axios如何取消重复无用的请求详解


Posted in Javascript onDecember 15, 2019

前言

在开发中,经常会遇到接口重复请求导致的各种问题。

对于重复的get请求,会导致页面更新多次,发生页面抖动的现象,影响用户体验。

对于重复的post请求,会导致在服务端生成两次记录(例如生成两条订单记录)。

如果当前页面请求还未响应完成,就切换到了下一个路由,那么这些请求直到响应返回才会中止。

无论从用户体验或者从业务严谨方面来说,取消无用的请求确实是需要避免的。

当然我们可以通过页面loading来避免用户进行下一次的操作,但本文只讨论单纯的如何取消这些无用的请求。

axios 的 cancelToken

axios是一个主流的http请求库,它提供了两种取消请求的方式。

通过axios.CancelToken.source生成取消令牌token和取消方法cancel

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
 console.log('Request canceled', thrown.message);
 } else {
 // handle error
 }
});

axios.post('/user/12345', {
 name: 'new name'
}, {
 cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

通过axios.CancelToken构造函数生成取消函数

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
 // An executor function receives a cancel function as a parameter
 cancel = c;
 })
});

// cancel the request
cancel();

需要注意的是在catch中捕获异常时,应该使用axios.isCancel()判断当前请求是否是主动取消的,以此来区分普通的异常逻辑。

封装取消请求逻辑

上面有两种取消请求,用哪种都是可以的,这里使用第二种。

取消请求主要有两个场景:

  • 当请求方式method,请求路径url,请求参数(get为params,post为data)都相同时,可以视为同一个请求发送了多次,需要取消之前的请求
  • 当路由切换时,需要取消上个路由中未完成的请求

我们封装几个方法:

// 声明一个 Map 用于存储每个请求的标识 和 取消函数
const pending = new Map()
/**
 * 添加请求
 * @param {Object} config 
 */
const addPending = (config) => {
 const url = [
 config.method,
 config.url,
 qs.stringify(config.params),
 qs.stringify(config.data)
 ].join('&')
 config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
 if (!pending.has(url)) { // 如果 pending 中不存在当前请求,则添加进去
  pending.set(url, cancel)
 }
 })
}
/**
 * 移除请求
 * @param {Object} config 
 */
const removePending = (config) => {
 const url = [
 config.method,
 config.url,
 qs.stringify(config.params),
 qs.stringify(config.data)
 ].join('&')
 if (pending.has(url)) { // 如果在 pending 中存在当前请求标识,需要取消当前请求,并且移除
 const cancel = pending.get(url)
 cancel(url)
 pending.delete(url)
 }
}
/**
 * 清空 pending 中的请求(在路由跳转时调用)
 */
export const clearPending = () => {
 for (const [url, cancel] of pending) {
 cancel(url)
 }
 pending.clear()
}

Map是ES6中一种新型的数据结构,本身提供了诸多方法,方便操作,适合当前场景。如果不熟悉的可以查看ECMAScript 6 入门。

在给config.cancelToken赋值的时候,需要判断当前请求是否已经在业务代码中使用了cancelToken

qs是一个专门用来转换对象和字符串参数的库,最初是由 TJ 创建并维护的,也是axios推荐使用的参数序列化库。这里我们的目的只是单纯的将参数对象转换为字符串方便拼接。

Map结构默认部署了Symbol.iterator属性,可以使用for...of循环直接获取键名和键值,当然你也可以使用for...in循环。

在 axios 拦截器中使用

主要的方法已经写好了,只需要添加到axios拦截器中就可以了。

axios.interceptors.request.use(config => {
 removePending(options) // 在请求开始前,对之前的请求做检查取消操作
 addPending(options) // 将当前请求添加到 pending 中
 // other code before request
 return config
}, error => {
 return Promise.reject(error)
})

axios.interceptors.response.use(response => {
 removePending(response) // 在请求结束后,移除本次请求
 return response
}, error => {
 if (axios.isCancel(error)) {
 console.log('repeated request: ' + error.message)
 } else {
 // handle error code
 }
 return Promise.reject(error)
})

将clearPending()方法添加到vue路由钩子函数中

router.beforeEach((to, from, next) => {
 clearPending()
 // ...
 next()
})

测试效果

最后我们可以在浏览器中测试下,可以将chrome中控制面板的Network的网络状态切换为Slow 3G来模拟网速慢的情况。

我们把查询按钮的loading或者disabled属性干掉来方便测试

axios如何取消重复无用的请求详解

在上面控制面板中可以看到,红色的status为canceled的就是被取消的请求。

上面代码在e-admin-vue(一个使用 vue + element-ui + vue-cli3 构建的 rbac 权限模型)或者e-admin-react(一个使用 react + antd + create-react-app 构建的 rbac 权限模型)中都有体现,欢迎 star。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery监控数据是否变化(修正版)
Apr 12 Javascript
jcrop基本参数一览
Jul 16 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
Angular6项目打包优化的实现方法
Dec 15 #Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 #Javascript
Vue+ElementUI table实现表格分页
Dec 14 #Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 #Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 #Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 #Javascript
You might like
Yii2设置默认控制器的两种方法
2017/05/19 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
解放web程序员的输入验证
2006/10/06 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
屏蔽IE弹出"您查看的网页正在试图关闭窗口,是否关闭此窗口"的方法
2013/12/31 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
django中嵌套的try-except实例
2020/05/21 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
意大利在线药房:Saninforma
2021/02/11 全球购物
销售总监工作职责
2013/11/21 职场文书
公司活动邀请函
2014/01/24 职场文书
小区门卫管理制度
2014/01/29 职场文书
应用数学专业求职信
2014/03/14 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
社区党务工作总结2015
2015/05/19 职场文书
休学证明范本
2015/06/19 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python