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插件 大家可以收藏一下
Feb 07 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
在IE浏览器中resize事件执行多次的解决方法
Jul 12 Javascript
Node.js实现的简易网页抓取功能示例
Dec 05 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
详解JS预解析原理
Jun 16 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
使用数据库保存session的方法
2006/10/09 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
实例讲解Python中SocketServer模块处理网络请求的用法
2016/06/28 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
python实现翻译word表格小程序
2020/02/27 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
介绍一下木马病毒的种类
2015/07/26 面试题
do you have any Best Practice for testing
2016/06/04 面试题
写自荐信有哪些不宜?
2013/10/17 职场文书
校园招聘策划书
2014/01/09 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
政风行风评议工作总结
2014/10/21 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript
mysql序号rownum行号实现方式
2022/12/24 MySQL