我转过几个弯 绕过那个小雨楼
- 拿着蒲扇摆着衣衫渡着紧箍咒
- 不问天涯不停留 喝过几壶酒
- 不过年少白头道义放胸口
- 倘若明天之后 遥看前尘剑封侯
- 似那天上神仙无所求
- 朝朝暮暮君如梦醒十分不为何理由
- 是真是假是惶恐是无休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 又过了几个弯 算尽天量道莫慌
- 踏这田园闻这芳草香
- 跌跌撞撞仗剑天涯折煞不枉无笔良
- 是梦是幻是温柔是家乡
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 路过这风雨花满楼 片刻都不停留
- 我本这书生进京赶考留下许多愁
- 你问有没有时候 我叹这天道默悠悠
- 能否与我一醉方休
- 谁能与我一醉方休
vue路由切换取消上一个路由未完成的axios请求
木灵鱼儿
105 天前vue 项目实战
330
0
4
同事写的，我也是借花献佛，顺带做个笔记
axios拦截器添加取消请求的方法
因为我们需要在路由进入前判断有没有存在取消请求的方法，所以需要一个存储介质，选用数组，然后存放在vuex中，一是方便动态追踪，二是本来就在axios和router里面import了vuex，就没必要添加window的全局变量了。
import axios from "axios";
import store from "./store"; //vuex
//拦截器
api.interceptors.request.use(config => {
//设置取消请求的CancelToken
config.cancelToken = new axios.CancelToken(cancel => {
//存入vuex数组
store.commit("pushAxiosPromiseArr", cancel);
});
return config;
});vuex代码
export default {
state: {
axiosPromiseArr: [], //请求的axios
},
getters: {
axiosPromiseArr(state) {
return state.axiosPromiseArr;
}
},
mutations:{
pushAxiosPromiseArr(state, value) {
state.axiosPromiseArr.push(value);
},
setAxiosPromiseArr(state, value) {
state.axiosPromiseArr = value;
},
}
}路由进入前取消等待中的请求
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from "./store"; //vuex
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [...]
});
//路由守卫 进入前
router.beforeEach((to, from, next) => {
//路由跳转之前，中止还在等待的请求
store.getters.axiosPromiseArr.forEach((cancel) => cancel());
store.commit("setAxiosPromiseArr", []);
next();
})具体代码自己按照自己的项目调整，这里说一下取消axios请求后会进入error方法，所以建议每个api请求后面都接一个catch捕获错误，你可以不处理这个错误，但是一定要catch捕获，不然全局会抛出取消请求的错误对象。
具体请看本博客的axios取消请求的文章。
4
评论(0)