一,概述
需要做到的是a页面发送请求,在还没有收到响应时,用户跳转B页面,这时候取消a页面的请求.
二,实现
axios提供了这个方法,我是结合axios和vuex以及vue-router实现的.
主要的思路如下:
在axios的请求拦截器中收集所有发送的接口,存储在vuex的一个数组中,然后在router.beforeEach中监听到路由跳转,就把该数组中的所有未完成的请求取消.
第一步:
在axios的请求拦截器中收集发送的请求,调用store的方法:
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项,表示请求URL公共部分
baseURL: process.env.VUE_APP_baseUrl, //除非 url 是绝对的,否则 baseURL 将会被加在 url 前面。
});
// request拦截器
service.interceptors.request.use(
async config => {
config.cancelToken = new axios.CancelToken(function (cancel) {
store.commit('pushToken', { cancelToken: cancel });
});
}
})
第二步:
在store中创建添加请求到数组中,和把数组中请求清空的方法:
import { createStore } from 'vuex';
const store = createStore({
state: {
cancelTokenArr: [] // 取消请求token数组
},
getters: {},
actions: {},
mutations: {
pushToken(state, payload) {
state.cancelTokenArr.push(payload.cancelToken);
},
clearToken({ cancelTokenArr }) {
cancelTokenArr.forEach(item => {
item('路由跳转取消请求');
});
cancelTokenArr = [];
}
},
});
export default store;
第三步:
在router.beforeEach中监听路由跳转,执行清空数组中未收到响应的请求.
router.beforeEach(async (to, from, next) => {
store.commit('clearToken'); // 取消请求
})
第四步:
因为被取消的请求,会走axios的响应拦截器的fail回调函数,于是为了避免控制台报错,可以在这里处理掉这个报错:
// 响应拦截器
service.interceptors.response.use(
res => {
resolve(res.data);
},
error => {
if (axios.isCancel(error)) {
// 取消请求的情况下,终端Promise调用链
return new Promise(() => {});
} else {
reject(error)
}
}
);