木灵鱼儿
阅读:5447
如何取消axios请求以及取消后错误处理的思路
前端在api请求的时候,有时候可能会遇到发送多个请求的时候,但是实际有效的是最后一次,但是后端响应的值不一定是你最后一次发送的请求,有可能最后一次比之前的还要更快响应,这就导致用户切换到a数据,前端显示是b数据。
解决这个情况有很多种方式,比如改动api请求方式,或者请求如果重复同一个接口,取消前面的请求,发起新的请求。
这里我们是后者。
使用方式
官方提供了两个例子,第一个例子照着写怎么都没用,第二个没看懂他的参数到底是data的还是谁的,最终还是百度了好多文章,才渐渐明白。
首先,我的项目使用的axios是二次封装的,也就是通过axios.create()
方法预设了baseURL和拦截器的,最终再导出,就是axios.create()
创建的实例。其他axios方式我就没空测了,可以看完本教程,在自行根据代码调整。
那么这个封装和导出,简单来说可以这么看:
request.js
import axios from "axios";
let api = axios.create({
...
});
export default api;
然后我的实际api请求是这样的
api-xxx.js
import api from "@/utils/request";
export const apiData = (data) => {
return api({
url: '/xxx/xx/xxx',
method: 'post',
data
});
};
我们现在就要对着api的请求进行调整,添加一个cancelToken参数,这个参数必须要引用axios对象来创建。
增加cancelToken参数
api-xxx.js
import api from "@/utils/request";
import axios from 'axios'
export const apiData = (data,that) => {
return api({
url: '/xxx/xx/xxx',
method: 'post',
data,
cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
that.cancel = c;
})
});
};
我们给apiData增加了一个that参数,这个参数用于获取到api所使用的vue文件的上下文对象,我们给他的上下文对象cancel设置了一个方法c,c就是用于取消本次请求的方法。
vue中使用
<template>
...
</template>
<script>
import { apiData } from "@/api/api-xxx";
export default {
data(){
return {
cancel: null, //取消请求
}
},
methods:{
//请求
getApiData(){
//判断取消方式是否存在,存在说明在这之前已经发请了请求
if(typeof this.cancel === "function") {
this.cancel("取消本次请求");
};
//发起请求
apiData({key:value},this).then(res=>{
...
}).catch(err=>{
...
})
}
}
}
</script>
这样就行了,每次发请求都都会先判断上一次是否有请求,有的话取消,但是上一次请求可能会很早就发出的,再取消也无所谓,所以不用再判断间隔啥的。
this.cancel("取消本次请求")
中的参数,可传可不传,就是一个文字mssage而已,无妨。
错误处理
取消请求,其实走的是promise的错误处理,也就是说,取消本次请求后,会触发api的interceptors.response
拦截器的错误处理,也就是如下代码所示:
import axios from "axios";
let api = axios.create({
...
});
api.interceptors.response.use(response => {},error=>{
//触发这个错误处理
})
export default api;
其中error并不是一个真正意义上的Error对象,他是一个axios生成的一个对象,本身也不是有code值这些,他的对象如下:
Cancel {message: undefined}
如果我们在this.cancel
方法中传入一个值,那么undefined就是这个值了。
但是取消的请求我们并不需要进行错误提示,因为他并不是一个真正的错误,好在axios官方提供了一个判断方法
import axios from "axios";
let api = axios.create({
...
});
api.interceptors.response.use(response => {},error=>{
//触发这个错误处理
if(!axios.isCancel(error)){
...统一的错误通知
};
return Promise.reject(error);
})
export default api;
本身是一个promise,所以我们忽略在取消请求时的统一错误通知方法,但是还是要抛出一个错误给vue文件中apiData
请求的catch。
这里其实有两个路子:
- 原封不动的返回error对象
- 自己封装一个对象用于判断
我选的第一条,简单点。
一般来说,我们在安装完axios会在main.js中将axios注册在vue的原型链上。
main.js
import Vue from "vue";
//axios
import axios from "axios";
Vue.prototype.$axios = axios;
所以我们在apiData
请求的catch中可以这么写
<template>
...
</template>
<script>
import { apiData } from "@/api/api-xxx";
export default {
data(){
return {
cancel: null, //取消请求
}
},
methods:{
//请求
getApiData(){
//判断取消方式是否存在,存在说明在这之前已经发请了请求
if(typeof this.cancel === "function") {
this.cancel("取消本次请求");
};
//发起请求
apiData({key:value},this).then(res=>{
...
}).catch(err=>{
if (this.$axios.isCancel(err)) return;
...省略自己的错误处理方法
})
}
}
}
</script>
直接在catch中判断一下,是取消就return跳过就行了。
效果图
取消错误的补充
axios的请求取消后,会触发到error回调,对于这个回调的error参数对象,axios本身提供了一个isCancel()
的方法判断。
一般来说我们都会在这个error回调里面抛出一个Promise.reject();
api.interceptors.response.use(response => {},error=>{
return Promise.reject(error);
})
但是这也会产生一个问题,就是如果发起api请求的那边,没有使用catch
捕获这个错误,那么promise会将这个错误直接全局抛出,也就是说会在浏览器的cosole那报错,但是并不影响代码运行。
在实际api请求那边,catch并不一定要做处理,可以是一个空的回调函数,也没必要在那边判断是否为取消。
上面我的说明有些偏面,但是也是一种思路,常用的话可能是这样:
//发起请求
apiData({key:value},this).then(res=>{
...
}).catch(()=>{
//不处理或者做其他的
})
我们也没必要每个请求的catch都去判断是否为取消的请求,其实没啥必要,只要不要写一些复杂的需求,为了不让他全局抛出错误,我们可以直接如上所示,写一个空的回调即可。
当然axios的issues中有提供了一个防止全局抛出错误的处理方式,但是呢,答者本人并不推荐,代码如下:
instance.interceptors.response.use((response) => {
if (someCondition(response) {
return new Promise(() => {});
}
return response;
});
他的原理就是,如果是一个取消请求的报错,那么就返回一个永远不会有结果的Promise,于是请求的then和catch都不会被触发,全局的报错就不会存在了。
但是,也会有一个问题,就是内存泄漏,当promise创建后,他就一直在pengding状态,一直在内存中常驻等待返回内容处理。
所以,如果是一个永远不会有结果的promise会让内存中常驻一个用不到的内容。但是又无法清除。
所以,对于取消产生的错误处理方式其实就两种:
- 每个请求都带catch捕获 (推荐使用的)
- 返回一个不会有结果的Promise (会造成内存泄漏)
以上就是关于axios取消请求以及取消后错误处理的方式思路。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关推荐
封装uni.request api为类似axios的用法
前言uniapp的请求都是通过uni.request的api实现的,但是这个api和前端常用的axios库用法上有着太多的不同了,移植起来非常痛苦,所以萌生了自己造一个轮子的想法,由于本人技术菜鸡,只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求,如下:axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } });所以大体上都是围绕这种用法展开工作的。首先说下使用上...
实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

马呆呆
Google Chrome Windows 10点赞有bug 可以无限点
木灵鱼儿
FireFox Windows 10是的,因为不太会php( ´_ゝ`)
请教问题
Google Chrome MacOS请教的问题,如果用第二种方式,我改下写法比如
instance.interceptors.response.use((response) => {
if (someCondition(response) {
let promiseObj = new Promise(() => {});
setTimeout(() => { promiseObj = null }, 0);
return promiseObj;
}
return response;
});
这样可以清除掉内存中创建的promise 对象吗?
木灵鱼儿
FireFox Windows 10你清除的是你的promiseObj ,跟axios的promise有啥关系,不同的东西了
请教问题
Google Chrome MacOS确实,是我理解错误了。
如果有了可惜
Google Chrome Windows 10好家伙我以为是在看掘金
有用不错,但是传入 this 的方式。。
木灵鱼儿
FireFox Windows 10其实也用不着这样了,正确做法是封装axios时增加重复请求取消的操作