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 相关文章推荐
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
详解如何使用babel进行es6文件的编译
May 29 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
PHP无限分类(树形类)
2013/09/28 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Redis构建分布式锁
2017/03/28 PHP
用 JSON 处理缓存
2007/04/27 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue脚手架及vue-router基本使用
2018/04/09 Javascript
jQuery实现表单动态加减、ajax表单提交功能
2018/06/08 jQuery
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
2020/12/04 Javascript
python实现音乐下载的统计
2018/06/20 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
2013/04/24 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
请解释流与文件有什么不同
2016/07/29 面试题
保洁公司服务承诺书
2014/05/28 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
教师个人年终总结
2015/02/11 职场文书
施工员岗位职责范本
2015/04/11 职场文书