axios cancelToken去除重复请求

import axios from 'axios'
let pendingList = []
const CancelToken = axios.CancelToken
axios.interceptors.request.use(config => {

  // token 用于赋值在config的cancelToken对象上
  // cancel 用于取消请求
  const { token, cancel } = CancelToken.source()

  // 用于记录请求的url
  const key = config.url

  // 赋值取消请求
  config.cancelToken = token

  // 如果请求列表中有处于请求中的cancelToken
  if (pendingList.length) {

    // 筛选出之前请求列表中相同的url进行cancel
    const cancelList = pendingList.filter(v=>v.key===key)
    cancelList.forEach((item,index)=>{
      item.cancel('取消'+item.key)
    })

    // 把执行了cancel的数据清理出请求列表
    pendingList = pendingList.filter(v=>v.key!==key)

  }
  // 把新的请求放进请求列表中
  pendingList.push({key,cancel})

  return config
}, err => {
  console.log('errrr', err)
})

axios.interceptors.response.use(res => {
  // 请求回来后把处于等待列表的数据清空
  pendingList = pendingList.filter(v=>v.key!==res.config.url)

  return res
}, err => {
  console.log('errrr', err)

})
export default axios

注：此举不会缓解服务器请求压力，请求仍然会被服务器收到，只是浏览器帮我们过滤掉了我们取消掉的响应。