切换路由时如何关闭上一个页面的所有请求-axios cancelToken

是什么偷走了我的网速

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

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

解决方法

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

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

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

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

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

import axios from 'axios';
import router from '../router/index'
import {
  message
} from 'ant-design-vue';
// const $cookies = require('vue-cookies');
let service = axios.create({
  // timeout: 5000,
  baseURL: '/api'
  // headers: {
  //   "Content-Type": "multipart/form-data"
  // }
  // headers: {
  //   'Content-Type': 'application/x-www-form-urlencoded'
  // }
})
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.status === 403) {
      // Message.error('未登录或无权限访问');
    } else {
      message.destroy();
      message.error('请求失败！请稍后再试或联系管理员！');
    }
    return Promise.reject(error);
  }
)


function exportFiles(url, method = "get", params = {}, data = {}) {
  return new Promise((resolve, reject) => {
    service({
      url: url,
      method: method,
      params: params,
      data: data,
      crossDomain: true,
      responseType: "blob",
      headers: {
        'Content-Type': 'application/json'
      },
    })
      .then(res => {
        resolve();
        if (res && res.headers) {
          let fileName = res.headers['content-disposition'];
          let name = decodeURI(
            fileName
              .split("=")[1]
              .replace('"', "")
              .split(".")[0]
          );
          let format = decodeURI(
            fileName
              .split("=")[1]
              .replace('"', "")
              .split(".")[1]
              .replace('"', "")
          );
          var blob = res.data;
          var reader = new FileReader();
          reader.readAsDataURL(blob);
          reader.onload = function (e) {
            if ("download" in document.createElement("a")) {
              var a = document.createElement("a");
              a.download = name + '.' + format;
              a.href = e.target.result;
              a.click();
            } else {
              navigator.msSaveBlob(blob, name + '.' + format)
            }
            resolve();
          };
        } else {
          reject();
        }
      })
      .catch(err => {
        reject(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配置文件中写上如下代码即可

代码如下

window._axiosPromiseArr = []
router.beforeEach((to, from, next) => {
  window._axiosPromiseArr.forEach((ele, index) => {
    ele.cancel()
    delete window._axiosPromiseArr[index]
  })
  next()
})

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

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