axios取消请求,取消前面一个或多个请求
2019-03-06 21:38
1576 查看
版权声明:作者:shenroom 来源:CSDN 版权声明:本文为博主原创文章,转载请附上博文链接! https://blog.csdn.net/qq_41772754/article/details/88258051
有时候我们常常在发起一个请求时,希望取消前面的一个或多个请求,就要使用axios的一个方法CancelToken(), 配置方法如下。
在拦截器全局设置,用来取消所有请求:
[code]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
然后在组件中使用,发送一个新的请求之前,取消前面的所有正在请求的请求,如下:
[code] 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文件中:
[code]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文件配置,如下:
[code]// 引入路由以及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
相关文章推荐
- 取消一个请求(Cancel)
- 完美解决:此地址使用了一个通常用于网络浏览以外目的的端口.出于安全原因,Firefox 取消了该请求
- RFC3261(9 取消一个请求)
- vue项目中 axios请求拦截器与取消pending请求功能
- 详解Axios 如何取消已发送的请求
- 动态方法调用 在Struts2中动态方法调用有三种方式,动态方法调用就是为了解决一个Action对应多个请求的处理,以免Action太多 第一种方式:指定method属性 这种方式我们前面已经用到过
- 【知识整理】Axios-如何发送一个GET请求
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- axios取消请求的实践记录分享
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- iOS 如何取消一个request请求,在ASINetworkQueue中
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- firefox调试::此地址使用了一个通常应该用于其他网页浏览的端口。由于安全原因,Firefox 取消了该请求。
- axios取消重复请求
- Firefox添加web浏览端口 "此地址访问受限 此地址使用了一个通常应该用于其他网页浏览的端口。由于安全原因,Firefox 取消了该请求。"
- axios 请求拦截及取消
- 取消一个请求(Cancel)
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。
- 此地址使用了一个通常用于网络浏览以外的端口。出于安全原因,Firefox 取消了该请求。