封装CancelToken功能，离开页面时取消请求

项目背景：公司的一个五年前的Vue2项目，很多页面都是直接使用axios.get进行数据请求，没对axios做封装。

无意间刷到倔友的帖子，留存笔记自用 参考地址

代码如下↓

import axios from 'axios';
const CancelToken = axios.CancelToken;

const cancelTokenMixin = {
  data() {
    return {
      cancelToken: null, // cancelToken实例
      cancel: null // cancel方法
    }
  },
  created() {
    this.newCancelToken();
  },
  beforeDestroy() {
    //离开页面前清空所有请求
    this.cancel('取消请求');
  },
  methods: {
    //创建新CancelToken
    newCancelToken() {
      this.cancelToken = new CancelToken(c => {
        this.cancel = c;
      });
    }
  }
}

export default cancelTokenMixin;

使用方法↓

/**
 * 使用方法
 *  1. import cancelTokenMixin from "common/js/axiosCancelTokenMixin.js";
 *  2. export default{} 里添加 mixins: [cancelTokenMixin], 与 created() 同级;
 *  3. 在get请求的函数定义 const config = { cancelToken: this.cancelToken };
 *  4. axios.get('/api', params, config)
 *  5. 使用参考：绩效计划 /performanceList
 */