axios 拦截重复请求，关闭当前请求

博客原文： http://www.globm.top/blog/1/detail/48
一直想封装一下 axios， 可以方便项目中使用，今天刚好 看到一位大佬的文章，就保存了过来，方便下次使用

axios配置文件

import axios from 'axios'

axios.defaults.timeout = 15000

// 拦截重复请求
const pending = {}
const CancelToken = axios.CancelToken
const removePending = (key, isRequest = false) => {
  if (pending[key] && isRequest) {
    pending[key]('请勿重复请求')
  }
  delete pending[key]
}
const getRequestIdentify = (config, isRequest = false) => {
  let url = config.url
  if (isRequest) {
    url = config.baseURL + config.url.substring(1, config.url.length)
  }
  const arr = ['put', 'post']
  return arr.includes(config.method)
    ? encodeURIComponent(url + JSON.stringify(config.params))
    : encodeURIComponent(config.url + JSON.stringify(config.data))
}

// http request 拦截器
axios.interceptors.request.use(
  config => {
  
    // 发送请求之前，拦截重复请求(即当前正在进行的相同请求)
    const requestData = getRequestIdentify(config, true)
    removePending(requestData, true)
    config.cancelToken = new CancelToken((c) => {
      pending[requestData] = c
    })

    // 添加token
    config.headers['api-token'] = store.getters.token
    return Promise.resolve(config)
  },
  error => {
    return Promise.reject(error)
  }
)

// http response 拦截器
axios.interceptors.response.use(
  async res => {
    return Promise.resolve(res.data)
  },
  async err => {
    return Promise.reject(err.response || { msg: err.message || '网络错误' })
  }
)


// ----------------------------------------------------get
export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: params
    })
      .then(response => {
        resolve(response)
      })
      .catch(err => {
        reject(err)
      })
  })
}
// ----------------------------------------------------post
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}
// ----------------------------------------------------patch
export function patch (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}
// ----------------------------------------------------put
export function put (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data)
      .then(response => {
        resolve(response)
      }, err => {
        reject(err)
      })
  })
}
// ----------------------------------------------------del
export function del (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.delete(url, {
      params: params
    })
      .then(response => {
        resolve(response)
      })
      .catch(err => {
        reject(err)
      })
  })
}

axios拦截封装参考文章：axios 的二次封装（拦截重复请求、异常统一处理）
vue 跳转路由取消参考文章：vue 跳转路由取消axios网络请求