vue axios路由跳转取消所有请求 和 防止重复请求
取消Axios请求
在发送第二次请求时,如果第一次请求还未返回,则取消第一次请求。这样可以确保后发的请求返回的数据不会被先发送的请求覆盖。
第一步: 使用Axios取消请求
const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { cancel = c; }) });
此处,我们使用axios的CancelToken来取消请求。
第二步: 存储多个取消的axios请求
state: { // 用于存储axios取消请求的数组 axiosPromiseCancel: [], }
通过Vuex的state,我们可以存储多个请求的取消函数。
第三步: 设置Axios拦截器
import store from './store'; const CancelToken = axios.CancelToken; let cancel; // 防止重复请求的函数 let removePending = (config) => { for (let k in store.state['axiosPromiseCancel']) { if (store.state['axiosPromiseCancel'][k].u === config.url + '&' + config.method) { store.state['axiosPromiseCancel'][k].f(); store.state['axiosPromiseCancel'].splice(k, 1); } } }; axios.interceptors.request.use(config=>{ removePending(config); config.cancelToken = new CancelToken((cancel) => { store.state['axiosPromiseCancel'].push({ u: config.url + '&' + config.method, f: cancel }); }); return config; }); axios.interceptors.response.use(res=>{ removePending(res.config); }, error=>{ if (axios.isCancel(error)) { return new Promise(() => {}); } else { return Promise.reject(error); } });
在此步骤中,我们设置axios的请求和响应拦截器,以处理和取消请求。
第四步: 在路由中取消请求
import store from './store'; router.before