vue+typescript封装axios，实现取消重复请求

vue-cli3可以直接生成vue+typescript项目，然后对axios进行封装，实现拦截多次重复请求，并取消。
直接撸代码（也是借鉴网上的，做了修改）

1. 在根目录下新建axios.tool.ts文件

import Vue from 'vue';
import router from './router';
import axios from 'axios';
import qs from 'qs';
import { Base } from './base'; // 导入全局环境变量
const base = new Base();
// 取消请求
const CancelToken = axios.CancelToken;
// 是否需要拦截code==-1的状态
let is_log: boolean = false;
// 设置默认请求头
axios.defaults.headers = {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded',
};
axios.defaults.baseURL = base.url();
// 请求超时的时间限制
axios.defaults.timeout = 20000;
// 开始设置请求 发起的拦截处理
// config 代表发起请求的参数的实体
let requestName: any;
axios.interceptors.request.use((config: any) => {
    // 得到参数中的 requestName 字段，用于决定下次发起请求，取消对应的 相同字段的请求
    // 如果没有 requestName 就默认添加一个 不同的时间戳
    if (config.method === 'post') {
        if (config.data && qs.parse(config.data).requestName) {
            requestName = qs.parse(config.data).requestName;
        } else {
            requestName = new Date().getTime();
        }
        if (config.data.indexOf('is_log') !== -1) {
            is_log = true;
        }
    } else {
        if (config.params && config.params.requestName) {
            requestName = config.params.requestName;
        } else {
            requestName = new Date().getTime();
        }
        if (config.params.is_log) {
            is_log = true;
        }
    }
    // 判断，如果这里拿到的参数中的 requestName 在上一次请求中已经存在，就取消上一次的请求
    if (requestName) {
        if (axios[requestName] && axios[requestName].cancel) {
            axios[requestName].cancel('取消了请求');
        }
        config.cancelToken = new CancelToken( (c: any) => {
            axios[requestName] = {};
            axios[requestName].cancel = c;
        });
    }
    return config;
}, (error: any) => {
    return Promise.reject(error);
});

// 请求到结果的拦截处理
axios.interceptors.response.use( (config: any) => {
    // 返回请求正确的结果
    if ((!is_log) && config.data.code === -1) {
        router.push({path: '/login'});  // 进入登陆页面
    }
    if (config.data.code === -2) {
        router.push({path: '/'}); // 进入实名认证
    }
    return config.data;
}, (error: any) => {
    return Promise.reject(error);
    // 错误的请求结果处理，这里的代码根据后台的状态码来决定错误的输出信息
});
// 将axios 的 post 方法，绑定到 vue 实例上面的 $post
Vue.prototype.$post =  (url: any, params: any) => {
    return new Promise((resolve, reject) => {
        axios.post(url, qs.stringify(params)).then((res: any) => {
            resolve(res);
        }).catch((err: any) => {
            reject(err);
         });
     });
};
// 将axios 的 get 方法，绑定到 vue 实例上面的 $get
Vue.prototype.$get =  (url: any, params: any) => {
    return new Promise((resolve, reject) => {
        axios.get(url, { params: params }).then((res: any) => {
            resolve(res); // 返回请求成功的数据 data
        }).catch((err: any) => {
            reject(err);
        });
    });
};

1. 在shims-vue.d.ts中声明qs模块，因为axios中没有qs的ts文件暴露

declare module 'qs' {
  const qs: any;
  export default qs;
}

1. 在main.ts中引入

import './axios.tool'; // 导入封装好的axios

1. 在vue组件中使用

 this.$get("/userMessageAssociation/isRead", { is_log: true , requestName: 'get'}).then( (res: any) => {
    console.log(res);
 });