有时候我们常常在发起一个请求时,希望取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), 配置方法如下。
第一种方法,使用CancelToken.source工厂创建一个取消令牌:
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// 处理错误
}
});
//取消请求(消息参数是可选的)
source.cancel('操作被用户取消。');
第二种方法,我们可以在拦截器里统一处理取消重复请求
import axios from "axios";
window.axiosCancel = [] // 全局定义一个存放取消请求的标识
//请求前拦截
Axios.interceptors.request.use(config => {
return config
// 添加取消标记
config.cancelToken = new axios.CancelToken(cancel => {
window.axiosCancel.push({
cancel
})
},function(error) {
return Promise.reject(error)
});
//请求后返回数据拦截
Axios.interceptors.response.use(res => {
},function axiosRetryInterceptor(res) {
return Promise.reject(res )
});
export default Axios
然后在组件中使用,发送一个新的请求之前,取消前面的所有正在请求的请求,如下:
methods:{
cancel(){ // 设置一个函数,在执行请求前先执行这个函数
// 获取缓存的 请求取消标识 数组,取消所有关联的请求
let cancelArr = window.axiosCancel;
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
},
getList(){
this.cancel() // 取消所有正在发送请求的请求
axios.post(..) // 发送一个新的请求
}
}
如果不希望每个组件里面都定义一个cancel函数,我们可以把这个函数挂载到vue实例的原型上,这样就可以在任何组件中使用cancel函数了:this.cancel(),如下main.js文件中:
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'//引入store
Vue.config.productionTip = false
// 将cancel,挂载到vue原型上
Vue.prototype.cancel = function(){
// 获取缓存的 请求取消标识 数组,取消所有关联的请求
let cancelArr = window.axiosCancel || [];
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
}
window.vm=new Vue({
el: '#app',
data(){
return{
}
},
router,
store,
components: { App },
})
另外如果想每次路由页面跳转时,取消上一个页面的所有请求,我们可以把cancel()函数的内容放在路由拦截器中,router/index.js文件配置,如下:
/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
// 获取缓存的 请求取消标识 数组,取消所有关联的请求
let cancelArr = window.axiosCancel;
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
next()
})
原文链接:https://blog.csdn.net/qq_41772754/article/details/88258051