axios封装之cancelToken

在真实项目中，当路由已经跳转，而上一页的请求还在pending状态，如果数据量小还好，数据量大时，跳到新页面，旧的请求依旧没有停止，这将会十分损耗性能，这时我们应该先取消掉之前还没有获得相应的请求，再跳转页面。这里axios给我们提供了一个方法。

cancelToken使用

官网方法一：
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

如果我要跳转页面的话，我调用source.cance()方法就可以干掉之前这个没有请求完的请求了。
但是这个方法有个弊端，就是比较麻烦，每次都要手动去调用source.cance()方法。怎么做到全局统一管理呢？

官网给了以下方法：

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

根据这个方法：我们一步一步来实现它：
新建一个文件clearHttpRequest.js，内容如下：

export let httpRequestList=[];

export const clearHttpRequestingList = () => {
  if (httpRequestList.length > 0) {
    httpRequestList.forEach((item) => {
      item()
    })
    httpRequestList = []
  }
}

在request.js(axios的二次封装文件)加上：

import axios from 'axios'
import { httpRequestList } from '@mixins/clearHttpRequest';//上面创建的clearHttpRequest文件
const { CancelToken } = axios;


const cancelToken = new CancelToken((c) => {
  httpRequestList.push(c)
})
axios.create({
    baseURL: BASE_URL,
    timeout: 60000, //超时时间
    responseType: "json",//请求数据类型包括  'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
    withCredentials: false,//表示跨域请求时是否需要使用凭证,是true的时候，开启withCredentials后，服务器才能拿到你的cookie，当然后端服务器也要设置允许你获取你开启了才有用
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    cancelToken
})

然后路由拦截器文件里面加上：

import { clearHttpRequestingList } from '@mixins/clearHttpRequest';//上面创建的clearHttpRequest文件

clearHttpRequestingList();//这个方法写到路由拦截器的方法里面

这样就实现了每次路由跳转之前，就清空之前出于pending状态的请求，优化了性能。
如下图所示：
在这里插入图片描述

总结

视频学习中和度娘并不提到CancelToken这个东西，单独查CancelToken才知道这个对性能优化有很大帮助，axios封装必须把这个加上去呀！
本文章也是受到别的文章启发，不过是优化了一下.