axios 设置取消重复请求

取消请求需要用到cancelToken，cancelToken就是用来取消ajax请求的，取消请求之后,会进入error,在里面处理一下如果是取消请求,就不报错。
在响应拦截器的err里判断错误请求代码

    axios.interceptors.response.use(
      (response) => {
         return response;
    }, 
      (error) => {
      // 判断当前请求是否是主动取消的
        if (axios.isCancel(error)) {
     
            console.log( 'request cancel ', JSON.stringify(error))
            return new Promise(() =>{})
        }
        return Promise.reject(error)
    })

思路：
储存请求队列的链接，changePending方法，请求的队列 使用 mothod+&+url拼接作为标记请求，存到数组中。在请求拦截器中调用changePending()拿到当前的请求，然后去请求队列的数组中找，没有就存到队列数组中，如果存在相同的请求就把上一个请求清除掉。
clearPending方法 清除所有的请求队列，可以在跳转到下一个页面时，清除当前页面所有的请求队列。

代码：

import axios from 'axios'
const CancelToken = axios.CancelToken
const pending = new Map()

// 封装修改请求的方法
const changePending = (config) => {
//url 存放请求队列的链接
  const url = [config.method, config.url].join('&')
  config.cancelToken = config.cancelToken || new CancelToken(cancel => {
    if (!pending.has(url)) {
      pending.set(url, cancel)
    } else if (pending.has(url)) {
      const cancel = pending.get(url)
      cancel(url)
      pending.delete(url)
    }
  })
}
// 清空 pending 中的请求（在路由跳转时调用）
const clearPending = () => {
  for (const [url, cancel] of pending) {
    cancel(url)
  }
  pending.clear()
}

// 请求拦截器
service.interceptors.request.use(config => {
  changePending(config)
  return config
}, error => {
  //   对请求错误做些什么
  console.log(error)
  return Promise.reject(error)
})

写在最后，欢迎留言，欢迎指正和补充~