核心：
1：vuex以数组的形式存放取消函数；
2：axios请求拦截中设置cancelToken；
3：页面跳转路由守卫取消上一个页面所有的请求。
vuex中
在vuex中设置一个存放取消函数的数组，还有一个添加数组元素的方法和清空数组的方法：
这里放到了自定义的home模块：
export default {
/**
* 定义命名空间，防止多个模块同名共享，使用时需要带上命名空间
*/
namespaced: true,
state: {
_axiosPromiseArr:[],
},
mutations: {
add_AxiosPromiseArr(state, item) {
console.log("添加_axiosPromiseArr");
state._axiosPromiseArr.push(item)
},
clear_AxiosPromiseArr(state) {
console.log("_axiosPromiseArr情空");
state._axiosPromiseArr = []
},
},
}
axios的拦截：
import axios from 'axios'
import store from '../../store/index'
let Ajax = axios.create({
baseURL: "http://127.0.0.1:3003/",
timeout: 50000
})
Ajax.interceptors.request.use(async config => {
//重点：重点：重点：重点：重点：重点：重点：重点：重点：
config.cancelToken = new axios.CancelToken(cancel => {
store.commit('home/add_AxiosPromiseArr', {
cancel })
})
//重点：重点：重点：重点：重点：重点：重点：重点：重点：
return config;
}, error => {
return Promise.reject(error);
});
Ajax.interceptors.response.use(response => {
return response.data;
}, error => {
return Promise.reject(error);
});
const getTIP = (url, params) => {
Ajax.defaults.headers['token'] = localStorage.getItem('token')
return new Promise((relove, reject) => {
Ajax.get(url, {
params, responseType: "arraybuffer", headers: {
responseType: 'arraybuffer' } }).then(res => relove(res)).catch(err => reject(err))
})
}
export default {
getTIP
}
路由守卫：
router.js
router.beforeEach((t, f, n) => {
store.state.home._axiosPromiseArr.forEach((ele, index) => {
ele.cancel("跳转页面,结束请求") // 路由跳转之前，清空（终止）上一个页面正在请求的内容
})
store.commit('home/clear_AxiosPromiseArr')
if (t.path.includes('login') || t.path.includes('zjq')) {
n()
}
if (!localStorage.getItem('token')) {
n('/login')
} else {
n()
}
})
