点击上方“小生方勤”,选择“设为星标”

第一时间关注技术干货!

背景

并发冲突问题, 是日常开发中一个比较常见的问题。

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

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

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

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

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

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

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

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

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

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

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

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

1. interceptors

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

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});

2. cancel token:

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

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

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

const CancelToken = axios.CancelToken;
let cancel;axios.get( /user/12345 , {cancelToken: new CancelToken(function executor(c) {// executor 函数接收一个 cancel 函数作为参数cancel = c;})
});// cancel the request
cancel();

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

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

  • 取消 A 请求,只发出 B 请求

  • 取消 B 请求,只发出 A 请求

  • 取消 B 请求,只发出 A 请求,把收到的 A 请求的返回结果也作为 B 请求的返回结果

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

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

具体实现

  1. 存储所有 pending 状态的请求

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

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

let pendingRequests = new Map()

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

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

帮助理解的小 tips:

  • 定义 pendingRequests 为 map 对象的目的是为了方便我们查询它是否包含某个 key,以及添加和删除 key。添加 key 时,对应的 value 可以设置用户自定义的一些功能参数,后面扩展功能的时候会用到。

  • config 是 axios 拦截器中的参数,包含当前请求的信息

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

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

  • 有:说明是重复的请求,cancel 掉当前请求

  • 没有:把 requestKey 添加到 pendingRequests 对象中

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

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

代码示例:

// 请求拦截器
axios.interceptors.request.use((config) => {if (pendingRequests.has(requestKey)) {config.cancelToken = new axios.CancelToken((cancel) => {// cancel 函数的参数会作为 promise 的 error 被捕获cancel(`重复的请求被主动拦截: ${requestKey}`);});} else {pendingRequests.set(requestKey, config);config.requestKey = requestKey;}return config;},(error) => {// 这里出现错误可能是网络波动造成的,清空 pendingRequests 对象pendingRequests.clear();return Promise.reject(error);}
);
  1. 在请求返回后维护 pendingRequests 对象

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

axios.interceptors.response.use((response) => {const requestKey = response.config.requestKey;pendingRequests.delete(requestKey);return Promise.resolve(response);
}, (error) => {if (axios.isCancel(error)) {console.warn(error);return Promise.reject(error);}pendingRequests.clear();return Promise.reject(error);
})
  1. 需要清空 pendingRequests 对象的场景

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

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

router.beforeEach((to, from, next) => {request.clearRequestList();next();
});

功能扩展

  1. 统一处理接口报错提示

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

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

// 接口返回 retcode 不为 0 时需要报错,请求设置了 noError 为 true 则这个接口不报错
if (response.data.retcode &&!response.config.noError
) {if (response.data.message) {Vue.prototype.$message({showClose: true,message: response.data.message,type:  error ,});}return Promise.reject(response.data);
}
  1. 发送请求时给控件添加 loading 效果

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

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

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

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

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

  1. 支持多个拦截器组合使用

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

this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {chain.unshift(interceptor.fulfilled, interceptor.rejected);
});this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {chain.push(interceptor.fulfilled, interceptor.rejected);
});while (chain.length) {promise = promise.then(chain.shift(), chain.shift());
}

总结

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

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

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

◆ ◆ ◆  ◆

关注小生,每日都有新收获!

你的在看我当成喜欢

使用 axios 拦截器解决「 前端并发冲突 」 问题相关推荐

  1. 【vue开发问题-解决方法】(八)利用axios拦截器实现elementUI中加载动画,控制加载区域

    [vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加载动画,控制加载区域 参考文章: (1)[vue开发问题-解决方法](八)利用axios拦截器实现elementUI中加 ...

  2. 使用Axios拦截器打印前端请求日志和后端后返回日志

    在main.ts引入 import axios from 'axios'; axios.defaults.baseURL = process.env.VUE_APP_SERVER;/*** axios ...

  3. axios拦截器_78.1K 的 Axios 项目有哪些值得借鉴的地方

    Axios 是一个基于 Promise 的 HTTP 客户端,同时支持浏览器和 Node.js 环境.它是一个优秀的 HTTP 客户端,被广泛地应用在大量的 Web 项目中. 由上图可知,Axios ...

  4. vue路由守卫,axios拦截器,权限树

    K15项目案例-后台 1.分页问题 关于分页表格列中的序号问题: <el-table-column type="selection" label="序号" ...

  5. axios拦截器 config_axios拦截器

    页面发送http请求,很多情况我们要对请求和其响应进行特定的处理:如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣.好在强大的axios为开发者提供了这样一个API: ...

  6. axios 拦截器——基本用法及拦截器代码

    之前在开发后台管理系统时,都是跟其他同事一起开发,说实在点,就是在别人开发的基础上写页面... 现在想把之前没有关注的点拾起来.. 今天看下axios拦截器的用法 用vue写代码在做ajax请求时,可 ...

  7. 全局配置axios、axios 拦截器 和 proxy 跨域代理

    目录 一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios ​ 4. 在 vue2 的项目中全局配置 axios ...

  8. axios 拦截器分析

    在 Axios 中设置拦截器很简单,通过 axios.interceptors.request 和 axios.interceptors.response 对象提供的 use 方法,就可以分别设置请求 ...

  9. axios拦截器 @令狐张豪

    下面是一个简易的axios拦截器使用的demo,主要看下代码注释,详细可参考axios官方API axios let app = new Vue({el: "#app",data( ...

最新文章

  1. Network UVA - 315(Tarjan+连通性问题:求割点)
  2. android 自定义加载动画效果,Android 自定义View修炼-自定义加载进度动画LoadingImageView...
  3. 计算机网络交换机组网及虚拟局域网实验报告,计算机网络实验报告材料(虚拟局域网).doc...
  4. C语言入门基础知识有哪些?
  5. VAE变分自编码器的一点理解
  6. 如何在30天内拿下软考初级程序员?
  7. java field的方法_Java Field 详解
  8. Windows 上路由、端口转发配置
  9. 符合python语言变量命名规则_符的解释|符的意思|汉典“符”字的基本解释
  10. 大咖面对面 | 喵奏@国家建筑师:梦回大宋,一起来做河里人
  11. 转换IC CD7833CZ:4x41W汽车音响功率放大电路
  12. Unity ShaderGraph图片发光效果
  13. 活动预告丨易盾CTO朱浩齐将出席2018 AIIA大会,分享《人工智能在内容安全的应用实践》...
  14. VPS防火墙是什么 操作步骤须知
  15. 程序员必备屏幕录制神器(GifCam)
  16. 项目管理十大知识领域(八)--- 项目干系人管理(过程、输入、工具和技术、输出)
  17. NOIP2016 天天爱跑步
  18. LTspice快速上手--搭建简单RC电路
  19. 推荐几个好玩的手机游戏
  20. thinkphp实现邮箱发送

热门文章

  1. 黑苹果Catalina 15.x USB定制(Asrock Z370)
  2. tesseract4.1.0 win10 VS2017profess编译
  3. 【ps】米饭工作室教你分分钟搞定“小问题”照片
  4. power bi数据分析_Power BI数据模型:使用关系
  5. 什么是Vue组件?如何创建和使用组件?
  6. Freescale Bootloader detail for MC56F8037
  7. VMware 安装好的系统 复制 (迁移) 到另外一台干净的电脑
  8. meshroom在不使用显卡的情况下,通过命令行进行三维重建
  9. 使用kubeadm配置kubernetes(v1.17.4)环境
  10. astmb348标准查询_ASTM标准中文版 B系列