vue 中 axios 如何取消请求,取消前面一个或多个请求
有时候我们常常在发起一个请求时,希望取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), Axios 中提供了一个CanCelToken的函数,这是个构造函数,该函数的作用就是用来取消接口请求的,官方地址:https://javasoho.com/axios/index.html#%E5%8F%96%E6%B6%88 (opens new window) 在拦截器全局设置,用来取消所有请求,配置方法如下:
import axios from "axios";
window.axiosCancel = [] // 全局定义一个存放取消请求的标识
const Axios = axios.create({
baseURL:"",
timeout: 10000,
...
});
//请求前拦截
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
然后在组件中使用,发送一个新的请求之前,取消前面的所有正在请求的请求,如下:
methods:{
cancel(){ // 设置一个函数,在执行请求前先执行这个函数
// 获取缓存的 请求取消标识 数组,取消所有关联的请求
let cancelArr = window.axiosCancel;
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
},
getList(){
this.cancel() // 取消所有正在发送请求的请求
axios.post(..) // 发送一个新的请求
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
如果不希望每个组件里面都定义一个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 },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
另外如果想每次路由页面跳转时,取消上一个页面的所有请求,我们可以把cancel()函数的内容放在路由拦截器中,router/index.js文件配置,如下:
// 引入路由以及vue,下面的是固定写法,照写就可以
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//创建路由实例
const router = new Router({
linkActiveClass: 'app-active', // 路由点击选中时的颜色(app-active为自定义的class样式类)
routes: [
{ // 根路径
path: '/',
redirect: '/home',
component: () => import('@/pages/home') // 路由懒加载写法
},
{
path: '/home',
name: 'home',
component: () => import('@/pages/home'),
}
})
/* 路由拦截器 路由跳转前的操作 */
router.beforeEach((to, from, next) => {
// 获取缓存的 请求取消标识 数组,取消所有关联的请求
let cancelArr = window.axiosCancel;
cancelArr.forEach((ele, index) => {
ele.cancel("取消了请求") // 在失败函数中返回这里自定义的错误信息
delete window.axiosCancel[index]
})
next()
})
/* 路由拦截器 路由跳转后的操作 */
router.afterEach(to => {
})
// 将路由导出,供外部接收,主要用于main.js接收
export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13