优化axios封装之配置使用AbortController取消重复请求防止用户频繁操作调用接口-Toy模板网

这篇具有很好参考价值的文章主要介绍了优化axios封装之配置使用AbortController取消重复请求防止用户频繁操作调用接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

当数据量过大请求缓慢时用户点击按钮或者tab标签页快速重复调用同一个请求时，会导致数据错乱，当只需要最新的请求数据，并且中断上一个重复请求时，可以利用axios的CancelToken去中断之前的请求。
ps:由于不是所有请求都需要这个逻辑所以我封装的时候增加了请求配置项removeCache，如果传了则取消重复请求，这样就不会影响其他的请求了文章来源地址https://www.toymoban.com/news/detail-768521.html

在封装的axios文件（我这里是request.js）里增加逻辑

1.定义变量

// isCancel-取消标识 用于判断请求是不是被AbortController取消的
const { isCancel } = axios
const cacheRequest = {}

2.定义删除缓存队列中请求的函数

// 删除缓存队列中的请求
function removeCacheRequest(reqKey) {
  if (cacheRequest[reqKey]) {
    // 通过AbortController实例上的abort来进行请求的取消
    cacheRequest[reqKey].abort()
    delete cacheRequest[reqKey]
  }
}

3.在请求request拦截器里添加标识将需要清除的请求增加到缓存队列里

service.interceptors.request.use(config => {
	// removeCache - 是config里配置的是否清除相同请求的标识，不传则默认是不需要清除
	// 此处根据实际需求来 如果需要全部清除相同的请求功能 则默认为true 或者增加白名单
	const { url, method, removeCache = false } = config
	if (removeCache) {
    	// 请求地址和请求方式组成唯一标识，将这个标识作为取消函数的key，保存到请求队列中
    	const reqKey = `${url}&${method}`
    	// 如果config传了需要清除重复请求的removeCache，则如果存在重复请求，删除之前的请求
    	removeCacheRequest(reqKey)
    	// 将请求加入请求队列，通过AbortController来进行手动取消
    	const controller = new AbortController()
   		config.signal = controller.signal
    	cacheRequest[reqKey] = controller
  	}
})

4.在响应response拦截器里请求成功后在队列里移除，请求失败error里判断，使得CancelToken取消的请求不做任何处理

service.interceptors.response.use(res => {
  // 请求成功，从队列中移除
  const { url, method, removeCache = false } = res.config
  if (removeCache) removeCacheRequest(`${url}&${method}`)
}), error => {
  if (isCancel(error)) {
    // 通过CancelToken取消的请求不做任何处理
    return Promise.reject({
      message: '重复请求，自动拦截并取消'
    })
  }
}

5.使用

// 根据自己项目封装的axios格式来 我这里是根据我项目的第二层封装来写的
export function getList(data) {
  return request({
    url: '/list',
    method: 'post',
    data: data,
    removeCache: true // 配置标识 则这个请求如果频繁请求 则会中断上次请求保留最新一次请求
  })
}