vue 切换页面中断axios请求避免阻塞

vue yekong 1056℃

vue项目开发中,会遇到切换页面时,上一个页面的接口还在请求,当只有一两个页面的时候,无所谓,但是当页面有几十个接口的话,就有必要切换页面是,结束上一页未完成的无效请求,以节省接口资源。
切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页面的数据显示造成一定影响,所以我们应该,切换页面前中断前面所有请求。
调整后页面切换接口请求效果
wanjunshijiecom 2021-11-29 at 13.27.23

文件调整

main.js

//  cancelToken中的cancel函数
Vue.$httpRequestList=[];

Axios配置文件

Axios 提供了一个 CancelToken的函数,这是一个构造函数,该函数的作用就是用来取消接口请求的。

import Vue from 'vue'
import router from '../router'
// create an axios instance
const CancelToken = axios.CancelToken
// 在请求拦截器里面 统一添加 取消请求
request.interceptors.request.use(config => {
  // 强行中断请求要用到的,记录请求信息
  config['cancelToken'] = new CancelToken(function executor(cancel) {
      Vue.$httpRequestList.push(cancel) //存储cancle
  })
  config.headers = { ...config.headers, ...config.config.headers }
  ... ... 
  return config;
});

// response拦截器
// 在响应拦截器里面 统一添加 处理取消请求
request.interceptors.response.use(response => {
  ... ...
}, error => {
  if(error.message === 'interrupt') {
    console.log('请求中断');
    return new Promise(() => {});
  }
  // Vue.$httpRequestList = [];
  return Promise.reject(error)
});

路由文件

在路由守卫中,写一个执行cancel方法的clearHttpRequestingList方法,在每次跳转之前执行clearHttpRequestingList()函数

/**
* 在路由切换之前检测来中断上个页面的请求
*/
router.beforeEach((to, from, next) => { 
  clearHttpRequestingList();
  next();
});

// 清空cancelToken中的cancel函数
function clearHttpRequestingList() {
  // 路由切换检测是否强行中断, 强行中断时才向下执行
  if (Vue.$httpRequestList.length > 0) {
    Vue.$httpRequestList.forEach((item) => {
      // 给个标志,中断请求
      item('interrupt');
    })
    Vue.$httpRequestList = [];
  }
}

vuex 调整

export default createStore({
  state: {
    httpRequestList: [],
  },
  mutations: {
    addHttpRequestList(state, payload) {
      if (payload == 0) {
        //强行中断时才向下执行
        state.httpRequestList.forEach(item => {
          item("interrupt"); //给个标志,中断请求
        });
        state.httpRequestList = [];
      } else {
        state.httpRequestList.push(payload);
      }
    },
  },
  actions: {
    async removeHttpRequestList(ctx) {
      ctx.commit("addHttpRequestList", 0);
    },
  },
});
喜欢 (2)