axios 取消重复请求简易封装

import axios from 'axios'

const CancelToken = axios.CancelToken
// 请求容器
const taskContainer = {
  list: [], // 请求队列
  addTask: function(task) {
    this.list.push(task)
  },
  delTask: function(url) {
    this.list = this.list.filter(t => t.url !== url)
  },
  cancelTask: function(task) {
    this.list.forEach(t => {
      if (t.url === task.url) {
        t.cancel()
      }
    })
    this.delTask(task.url)
  },
  getTask: function(url) {
    return this.list.find(t => t.url === url)
  },
  clearTask: function() {
    this.list = []
  }
}

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API
})

// 请求前拦截
service.interceptors.request.use(config => {
  // 请求前判断是否在队列中存在
  const task = taskContainer.getTask(config.url)
  if (task) {
    taskContainer.cancelTask(task)
  }
  // 添加请求取消
  config['cancelToken'] = new CancelToken((cancel) => {
    // 请求添加队列
    taskContainer.addTask({
      url: config.url,
      // method: config.method,
      cancel
    })
  })
  return config
}, error => {
  return Promise.reject(error)
})

// 请求拦截
service.interceptors.response.use(response => {
  // 请求回来从容器删除
  const config = response.config
  taskContainer.delTask(config.url)
  const res = response.data
  const code = res.code
  if (code !== 200) {
    return Promise.reject(res)
  }
  return res
}, (error) => {
  console.error('Request Error：', error)
  return Promise.reject(error)
})

export default service