是什么偷走了我的網速

	在項目中經常會遇到一個頁面中存在很多的請求，這時候如果切換頁面沒有處理的話請求依然會存在

	這是非常影響性能的一件事，特別是在網絡情況不好的情況下，這只會讓用戶的網絡體現的更慢。往往這時候我們不會再去等待頁面慢慢的加載，這時候只會切換一個頁面或者不停的刷新。

解決方法

那么我們改如何解決這個問題呢？理論很簡單，在切換到下一個頁面之前取消之前的請求就可以了。那么我們怎么操作呢？

首先在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官方文檔