axios取消请求封装

 思路，创建一个map对象存储请求中的链接，key就是当前请求的链接，value是cancelToken 方法，发起请求前判断如果仓库中存在相同的链接则取消已存在的链接，重新发起新的请求。

import axios from 'axios'

const CancelToken = axios.CancelToken
// 
let cancelMap = new Map()

api.interceptors.request.use(
    request => {
        // 如果请求链接已存在说明已有相同的请求未完成
        if (cancelMap.has(request.url)) {
            cancelMap.get(request.url)() // 取消请求
            cancelMap.delete(request.url) // 仓库里删除链接
        }
        // 统一在请求前添加 cancelToken 方法
        request.cancelToken = new CancelToken(function executor(c) {
            // executor 函数接收一个 cancel 函数作为参数
            cancelMap.set(request.url, c)
        })
        return request
    }
)

api.interceptors.response.use(
    response => {
        // 请求成功后清除该链接
        if (cancelMap.has(response.config.url)) {
            cancelMap.delete(response.config.url)
        }
        
        return Promise.reject(response)
    },
    error => {
        // 请求失败后清除该链接
        if (cancelMap.has(error.config.url)) {
            cancelMap.delete(error.config.url)
        }
        return Promise.reject(error)
    }
)

export default api