我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
vue路由切换取消上一个路由未完成的axios请求
同事写的,我也是借花献佛,顺带做个笔记
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)