vue2 用aixos的cancelToken终止路由跳转后上页未成功返回的请求

大概就是 很快切换路由 path 上一页请求未成功 跳转到下一页时页面不刷新与卡顿 这样会导致用户体验很不好

原理 在请求拦截器里边记录每个请求的信息 用 vuex 保存下来 在切换路由的时候清除掉存起来的请求 清除只会在为请求成功时有效 若请求已成功清除无效
话不多说 看代码
↓↓↓ 代码 ↓↓↓

第一步 在请求拦截器里边创建 cancelToken 实例 获取清除请求的函数 并保存到 vuex中

1. 这是在请求拦截器里边

import axios from "axios";
import store from "../store";

const service = axios.create({
	 baseURL: xxx
});

service.interceptors.request.use((config) => {
 	config.cancelToken = new axios.CancelToken((cancel) => {
      store.commit("cancel_request/set_request_url", { cancelToken: cancel });
    });

    return config;
    },
  (err) => {
    // console.log("service.interceptors.request: ", err);

    return Promise.reject(err);
  }

service.interceptors.response.use((response) => {
	 return response;
},
(error) => {

	//这个是取消提示的 如果拦截就不会提示了
    if (axios.isCancel(error)) {
    
      // 取消请求的情况下，终端Promise调用链
      return new Promise(() => {});
      
    } else {
      
      return Promise.reject(error);
      
    }
  }

第二部 创建一个存放状态的仓库模块 cancel_request.js

// 存放请求信息和取消函数 调用 clear_request 函数清除路由跳转状态为 padding 的请求

/**
 *
 *  **************
 *  @request_lsit :  请求未完成的列表
 *  @set_request_url : 保存未完成请求
 *  @celar_request : 清除未完成请求
 *  **************
 *
 */

export default {
  namespaced: true,
  state: {
    request_list: [],
  },
  mutations: {
    set_request_url(state, cancel) {
      state.request_list.push(cancel);
    },
    clear_request(state) {
      state.request_list.map((item) => {
        item.cancelToken("路由跳转请求终止");
      });
    },
  },
};

第三部 在路由拦截器里边调用 清除请求的方法

import Router from "vue-router";
import store from "./store";

const router = new Router({

	//...

})

router.beforeEach((to, from, next) => {
	//在这里调用vuex的方法 终止请求
	store.commit("cancel_request/clear_request");
})