文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Axios 拦截器解决「 前端并发冲突 」 问题

2024-12-03 05:00

关注

不同用户在较短时间间隔内变更数据,或者某一个用户进行的重复提交操作都可能导致并发冲突。

并发场景在开发和测试阶段难以排查全面,出现线上 bug 以后定位困难,因此做好并发控制是前后端开发过程中都需要重视的问题。

对于同一用户短时间内重复提交数据的问题,前端通常可以先做一层拦截。

本文将讨论前端如何利用 axios 的拦截器过滤重复请求,解决并发冲突。

一般的处理方式 — 每次发请求添加 loading

在尝试 axios 拦截器之前,先看看我们之前业务是怎么处理并发冲突问题的:

每次用户操作页面上的控件(输入框、按钮等),向后端发送请求的时候,都给页面对应的控件添加 loading 效果,提示正在进行数据加载,同时也阻止 loading 效果结束前用户继续操作控件。

这是最直接有效的方式,如果你们前端团队成员足够细心耐心,拥有良好的编码习惯,这样就可以解决大部分用户不小心重复提交带来的并发问题了。

更优的解决方案:axios 拦截器统一处理

项目中需要前端限制并发的场景这么多,我们当然要思考更优更省事的方案。

既然是在每次发送请求的时候进行并发控制,那如果能重新封装下发请求的公共函数,统一处理重复请求实现自动拦截,就可以大大简化我们的业务代码。

项目使用的 axios 库来发送 http 请求,axios 官方为我们提供了丰富的 API,我们来看看拦截请求需要用到的两个核心 API:

1. interceptors

拦截器包括请求拦截器和响应拦截器,可以在请求发送前或者响应后进行拦截处理,用法如下:

  1. // 添加请求拦截器 
  2. axios.interceptors.request.use(function (config) { 
  3.   // 在发送请求之前做些什么 
  4.   return config; 
  5. }, function (error) { 
  6.   // 对请求错误做些什么 
  7.   return Promise.reject(error); 
  8. }); 
  9.  
  10. // 添加响应拦截器 
  11. axios.interceptors.response.use(function (response) { 
  12.     // 对响应数据做点什么 
  13.     return response; 
  14.   }, function (error) { 
  15.     // 对响应错误做点什么 
  16.     return Promise.reject(error); 
  17.   }); 

2. cancel token:

调用 cancel token API 可以取消请求。

官网提供了两种方式来构建 cancel token,我们采用这种方式:

通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token,方便在上面的请求拦截器中检测到重复请求可以立即执行:

  1. const CancelToken = axios.CancelToken; 
  2. let cancel; 
  3.  
  4. axios.get('/user/12345', { 
  5.   cancelToken: new CancelToken(function executor(c) { 
  6.     // executor 函数接收一个 cancel 函数作为参数 
  7.     cancel = c; 
  8.   }) 
  9. }); 
  10.  
  11. // cancel the request 
  12. cancel(); 

本文提供的思路就是利用 axios interceptors API 拦截请求,检测是否有多个相同的请求同时处于 pending 状态,如果有就调用 cancel token API 取消重复的请求。

假如用户重复点击按钮,先后提交了 A 和 B 这两个完全相同(考虑请求路径、方法、参数)的请求,我们可以从以下几种拦截方案中选择其一:

第三种方案需要做监听处理增加了复杂性,结合我们实际的业务需求,最后采用了第二种方案来实现,即:

只发第一个请求。在 A 请求还处于 pending 状态时,后发的所有与 A 重复的请求都取消,实际只发出 A 请求,直到 A 请求结束(成功/失败)才停止对这个请求的拦截。

具体实现

存储所有 pending 状态的请求

首先我们要将项目中所有的 pending 状态的请求存储在一个变量中,叫它 pendingRequests,

可以通过把 axios 封装为一个单例模式的类,或者定义全局变量,来保证 pendingRequests变量在每次发送请求前都可以访问,并检查是否为重复的请求。

  1. let pendingRequests = new Map() 

把每个请求的方法、url 和参数组合成一个字符串,作为标识该请求的唯一 key,同时也是 pendingRequests 对象的 key:

  1. const requestKey = `${config.url}/${JSON.stringify(config.params)}/${JSON.stringify(config.data)}&request_type=${config.method}`; 

帮助理解的小 tips:

在请求发出前检查当前请求是否重复

在请求拦截器中,生成上面的 requestKey,检查 pendingRequests 对象中是否包含当前请求的 requestKey

因为后面的响应拦截器中还要用到当前请求的 requestKey,为了避免踩坑,最好不要再次生成。

在这一步就把 requestKey 存回 axios 拦截器的 config 参数中,后面可以直接在响应拦截器中通过 response.config.requestKey 取到。

代码示例:

  1. // 请求拦截器 
  2. axios.interceptors.request.use( 
  3.   (config) => { 
  4.     if (pendingRequests.has(requestKey)) { 
  5.       config.cancelToken = new axios.CancelToken((cancel) => { 
  6.         // cancel 函数的参数会作为 promise 的 error 被捕获 
  7.         cancel(`重复的请求被主动拦截: ${requestKey}`); 
  8.       }); 
  9.     } else { 
  10.       pendingRequests.set(requestKey, config); 
  11.       config.requestKey = requestKey; 
  12.     } 
  13.     return config; 
  14.   }, 
  15.   (error) => { 
  16.     // 这里出现错误可能是网络波动造成的,清空 pendingRequests 对象 
  17.     pendingRequests.clear(); 
  18.     return Promise.reject(error); 
  19.   } 
  20. ); 

在请求返回后维护 pendingRequests 对象

如果请求顺利走到了响应拦截器这一步,说明这个请求已经结束了 pending 状态,那我们要把它从 pendingRequests 中除名:

  1. axios.interceptors.response.use((response) => { 
  2.   const requestKey = response.config.requestKey; 
  3.   pendingRequests.delete(requestKey); 
  4.   return Promise.resolve(response); 
  5. }, (error) => { 
  6.   if (axios.isCancel(error)) { 
  7.     console.warn(error); 
  8.     return Promise.reject(error); 
  9.   } 
  10.   pendingRequests.clear(); 
  11.   return Promise.reject(error); 
  12. }) 

需要清空 pendingRequests 对象的场景

遇到网络波动或者超时等情况造成请求错误时,需要清空原来存储的所有 pending 状态的请求记录,在上面演示的代码已经作了注释说明。

此外,页面切换时也需要清空之前缓存的 pendingRequests 对象,可以利用 Vue Router 的 beforeEach 钩子:

  1. router.beforeEach((tofromnext) => { 
  2.   request.clearRequestList(); 
  3.   next(); 
  4. }); 

功能扩展

统一处理接口报错提示

与后端约定好接口返回数据的格式,对接口报错的情况,可以统一在响应拦截器中添加 toast 给用户提示,

对于特殊的不需要报错的接口,可以设置一个参数存入 axios 拦截器的 config 参数中,过滤掉报错提示:

  1. // 接口返回 retcode 不为 0 时需要报错,请求设置了 noError 为 true 则这个接口不报错  
  2. if ( 
  3.   response.data.retcode && 
  4.   !response.config.noError 
  5. ) { 
  6.   if (response.data.message) { 
  7.     Vue.prototype.$message({ 
  8.       showClose: true
  9.       message: response.data.message, 
  10.       type: 'error'
  11.     }); 
  12.   } 
  13.   return Promise.reject(response.data); 

发送请求时给控件添加 loading 效果

上面利用 axios interceptors 过滤重复请求时,可以在控制台抛出信息给开发者提示,在这个基础上如果能给页面上操作的控件添加 loading 效果就会对用户更友好。

常见的 ui 组件库都有提供 loading 服务,可以指定页面上需要添加 loading 效果的控件。下面是以 element UI 为例的示例代码:

  1. // 给 loadingTarget 对应的控件添加 loading 效果,储存 loadingService 实例 
  2. addLoading(config) { 
  3.   if (!document.querySelector(config.loadingTarget)) return
  4.   config.loadingService = Loading.service({ 
  5.     target: config.loadingTarget, 
  6.   }); 
  7.  
  8. // 调用 loadingService 实例的 close 方法关闭对应元素的 loading 效果 
  9. closeLoading(config) { 
  10.   config.loadingService && config.loadingService.close(); 

与上面过滤报错方式类似,发请求的时候将元素的 class name 或 id 存入 axios 拦截器的 config 参数中,

在请求拦截器中调用 addLoading 方法, 响应拦截器中调用 closeLoading 方法,就可以实现在请求 pending 过程中指定控件(如 button) loading,请求结束后控件自动取消 loading 效果。

支持多个拦截器组合使用

简单看下 axios interceptors 部分实现源码可以理解,它支持定义多个 interceptors,所以只要我们定义的 interceptors 符合 Promise.then 链式调用的规范,还可以添加更多功能:

  1. this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) { 
  2.   chain.unshift(interceptor.fulfilled, interceptor.rejected); 
  3. }); 
  4.  
  5. this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) { 
  6.   chain.push(interceptor.fulfilled, interceptor.rejected); 
  7. }); 
  8.  
  9. while (chain.length) { 
  10.   promise = promise.then(chain.shift(), chain.shift()); 

总结

并发问题很常见,处理起来又相对繁琐,前端解决并发冲突时,可以利用 axios 拦截器统一处理重复请求,简化业务代码。

同时 axios 拦截器支持更多应用,本文提供了部分常用扩展功能的实现,感兴趣的同学可以继续挖掘补充拦截器的其他用法。

今天的内容就这么多,希望对你有帮助。

 

来源:前端皮小蛋内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯