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)
        }
      }
    );