是什么偷走了我的网速

	在项目中经常会遇到一个页面中存在很多的请求，这时候如果切换页面没有处理的话请求依然会存在

	这是非常影响性能的一件事，特别是在网络情况不好的情况下，这只会让用户的网络体现的更慢。往往这时候我们不会再去等待页面慢慢的加载，这时候只会切换一个页面或者不停的刷新。

解决方法

那么我们改如何解决这个问题呢？理论很简单，在切换到下一个页面之前取消之前的请求就可以了。那么我们怎么操作呢？

首先在axios的配置文件中加入以下代码

其中最重要的就是下图所示的这部分代码：

挂载方式全凭你的个人喜好。

我把我的配置文件直接贴出来标出重点以供参考

import axios from 'axios';
import { message } from 'ant-design-vue';

const service = axios.create({
  baseURL: '/api',
});

service.interceptors.request.use(function (config) {
  config.cancelToken = new axios.CancelToken(cancel => {
    window._axiosPromiseArr.push({ cancel });
  });
  return config;
});

service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code === 0 || res.code === 1) {
      return res;
    } else if (res.code === -1) {
      message.warning(res.message);
    }
    return Promise.reject(res);
  },
  error => {
    if (error.response && error.response.status === 403) {
      // 在这里处理未登录或无权限访问的情况
    } else {
      message.destroy();
      message.error('请求失败！请稍后再试或联系管理员！');
    }
    return Promise.reject(error);
  }
);

function exportFiles(url, method = 'get', params = {}, data = {}) {
  return service({
    url: url,
    method: method,
    params: params,
    data: data,
    crossDomain: true,
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
    },
  })
    .then(res => {
      if (res && res.headers) {
        const fileName = res.headers['content-disposition'];
        const name = decodeURI(fileName.split('=')[1].replace('"', '').split('.')[0]);
        const format = decodeURI(fileName.split('=')[1].replace('"', '').split('.')[1].replace('"', ''));
        const blob = res.data;
        const a = document.createElement('a');
        if ('download' in a) {
          a.download = `${name}.${format}`;
          a.href = window.URL.createObjectURL(blob);
          a.click();
        } else {
          navigator.msSaveBlob(blob, `${name}.${format}`);
        }
      }
    })
    .catch(err => {
      console.error('文件下载失败:', err);
      message.error('文件下载失败，请稍后再试或联系管理员！');
      throw err;
    });
}

class Service {
  get(url, data = {}) {
    return service({
      url: url,
      method: 'get',
      params: data,
    });
  }

  post(url, data = {}) {
    return service({
      url: url,
      method: 'post',
      data: data,
    });
  }

  postFile(url, data = {}) {
    return service({
      url: url,
      method: 'post',
      data: data,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    });
  }

  put(url, data = {}) {
    return service({
      url: url,
      method: 'put',
      data: data,
    });
  }

  delete(url, data = {}) {
    return service({
      url: url,
      method: 'delete',
      data: data,
    });
  }
}

export default new Service();

第二步：通过路由守卫来取消请求

在你的router配置文件中写上如下代码即可

代码如下

// 创建一个全局变量，用于存储所有未完成的 Axios 请求的 cancel 函数
window._axiosPromiseArr = [];

// 在 Vue Router 的 beforeEach 导航守卫中取消所有未完成的 Axios 请求
router.beforeEach((to, from, next) => {
  // 遍历所有未完成的请求，并调用 cancel 方法
  window._axiosPromiseArr.forEach(({ cancel }, index) => {
    cancel(); // 取消请求
    delete window._axiosPromiseArr[index]; // 删除已取消的请求项
  });

  next(); // 继续导航
});

就此完成了切换页面取消之前所有请求的需求

想要知道的更多请移步至axios官方文档