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 相关文章推荐
json 定义
Jun 10 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
微信小程序 video组件详解
Oct 25 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
简单了解three.js 着色器材质
Aug 03 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
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
javascript获得网页窗口实际大小的示例代码
2013/09/21 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
2014/12/16 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
在vue中created、mounted等方法使用小结
2020/07/21 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python字符串处理之count()方法的使用
2015/05/18 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
python实现学生管理系统
2018/01/11 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
留学生如何写好自荐信
2013/12/27 职场文书
事业单位辞职信范文
2014/01/19 职场文书
中学教师请假制度
2014/02/03 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
捐款倡议书格式范文
2014/05/14 职场文书
语文复习计划
2015/01/19 职场文书
单位收入证明范本
2015/06/18 职场文书