axios之cancelToken取消多次重复请求

一、我们为什么需要取消？

我们常见的业务场景有，用户频繁点击数据提交，用户频繁的切换数据量大的表格，在网络较差的环境下，会出现一些异常的情况，当然，各类UI库提供的loading状态可以帮我们解决以上烦恼，以及可以通过防抖解决部分问题，但是我们今天从另一个方面，使用axios的cancelToken取消上次重复的请求。

二、我们怎样取消？

先看一下aixos官方文档的cancelToken的代码

方法1：可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
     // 处理错误
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

方法2：还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// cancel the request
cancel();

如何在我们项目中使用呢?

我们项目中，更常用的做法是在拦截器interceptors中使用。

当然，我们需要先定义一个map对象用于存储相关值（map为es6新增对象，如果你对es6不了解，请查阅阮一峰的ECMAScript 6 入门

// 用于存储pending的请求（处理多条相同请求）
const pendingRequest = new Map()

其次，需要封装一些辅助类的函数

generateRequestKey 将重复的请求生成一个唯一的key

import qs from 'qs'
// 生成request的唯一key
const generateRequestKey = (config = {}) => {
  // 通过url，method，params，data生成唯一key，用于判断是否重复请求
  // params为get请求参数，data为post请求参数
  const { url, method, params, data } = config
  return [url, method, qs.stringify(params), qs.stringify(data)].join('&')
}

addPendingRequest将重复的请求，保存到到pendingRequest中

// addPendingRequest 将重复请求添加到pendingRequest中
const addPendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (!pendingRequest.has(key)) { //判断pendingRequest中是否存在key
    config.cancelToken = new axios.CancelToken(cancel => {
      pendingRequest.set(key, cancel) //将key和cancel以键值对的方式保存
    })
  }
}

将重复的请求取消，并在pendingRequest中删除

// removePendingRequest 取消重复请求
const removePendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (pendingRequest.has(key)) { //判断pendingRequest中是否存在key
    const cancelToken = pendingRequest.get(key)
    cancelToken(key) // 取消之前发送的请求
    pendingRequest.delete(key)// 请求对象中删除requestKey
  }
}

完整代码

import axios from 'axios'
import qs from 'qs'

// 用于存储pending的请求（处理多条相同请求）
const pendingRequest = new Map()

// 生成request的唯一key
const generateRequestKey = (config = {}) => {
  // 通过url，method，params，data生成唯一key，用于判断是否重复请求
  // params为get请求参数，data为post请求参数
  const { url, method, params, data } = config
  return [url, method, qs.stringify(params), qs.stringify(data)].join('&')
}

// 将重复请求添加到pendingRequest中
const addPendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (!pendingRequest.has(key)) {
    config.cancelToken = new axios.CancelToken(cancel => {
      pendingRequest.set(key, cancel)
    })
  }
}

// 取消重复请求
const removePendingRequest = (config) => {
  const key = generateRequestKey(config)
  if (pendingRequest.has(key)) {
    const cancelToken = pendingRequest.get(key)
    cancelToken(key) // 取消之前发送的请求
    pendingRequest.delete(key)// 请求对象中删除requestKey
  }
}

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 处理重复请求
    removePendingRequest(config)
    addPendingRequest(config)

    return config
  },
  error => {
    // 处理请求错误
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 移除重复请求
    removePendingRequest(response.config)
    
    return res
  },
  error => {
    // 异常情况console，方便排查问题
    console.log('error', error)
    // 移除重复请求
    removePendingRequest(error.config || {})
    
    return Promise.reject(error)
  }
)

三、结尾

代码中如有需要更正和修改的地方，欢迎评论留言，我也会积极回复。