Axios取消重复请求

Axios取消重复请求

场景

请求响应时间较长，且后一个请求可能返回速度比较上一个要快一些。

分析

这样的结果就是前一次的覆盖了，当然也可以通过防抖节流来处理。再就是通过loading效果来给他一个加载禁用的效果，阻止用户去进行连续的点击，但是有时候这样做不行，因为必须等待上一次的请求结果，才能继续下去。但是综合起来的话，还是取消上次请求这样更能让用户操作起来感觉顺畅一些，因为不会阻断用户的操作

取消请求

官网（取消请求）

• axiosv0.22.0以及以上的版本：

const controller = new AbortController()

axios.get(url, {
	signal: controller.signal
}).then(() => { ... }) 

// cancel request
controller.abort()

• axios旧版本

const CancelToken = axios.CancelToken
let cancel

if (cancel) {
	cancel()
} else {
	axios.get(url, {
		cancelToken: new CancelToken((c) => {
			cancel = c
		})
	})
}

可以使用同一个cancel token或signal取消多个请求。也可以使用两种取消方式针对同一个请求