vue项目路由跳转后上一页面未完成的接口取消

一,概述

需要做到的是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) } } ); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10904.html