「这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战」
需求前提
防抖: 开发过程中,用户快速地交互过程中,只使用最后一次交互产生的数据,然后再发起请求,例如频繁的切换 tab,或者快速输入数据,或者在导出文件或下载文件时,中途需要取消操作时等。这些都需要对接口请求的时机或者请求接口之后进行处理,避免一些无用的请求或者接口返回顺序的差异。
如果我们不处理这些未完成的请求,那么这些请求会极大的影响页面的性能,甚至导致之后的请求超时。
锁状态: 在上一个接口没有返回数据时,交互状态一直处于 loading 的锁定状态,直到数据正确返回或者超时等异常;
取消上一个请求: 在发起下一个请求前,把之前的请求取消掉;
前两种方式,是在发起请求前进行控制,当请求发出之后则不再控制;最后一种方式则是取消中断还在路上的请求,然后再发起一个新的请求,不用管发起的时机。
在Vue的开发过程中,大多是使用axio
s来发起http
请求,那么在axios
中我们要怎么中止某个http
请求呢?那就看看axios
官网给出的方案吧。果然,axios
提供了CancelToken
来取消发起的请求。
使用方法
- 添加配置对象的属性;
- 声明全局变量;
- 将c的值赋值给cancel;
- 执行取消请求;
let cancel = null;
btn.onclick = function() {
axios({
methods: 'GET',
url: '',
cancelToken: new axios.CancelToken(function(c) {
cancel = c;
}).then(res => {
console.log(res)
})
})
}
防止多次发送请求
点击发送请求时,若数据还没有返回再次点击请求,会增加服务器压力,因此,要判断上一次请求是否完成。
未完成--------取消上一次请求; 完成--------- 返回数据;
btns[0].onclick = function() {
// 检测上一次请求是否完成
if(cancel !== null) {
// 取消上一次请求
cancel();
}
axios({
methods: 'GET',
url: 'http://localhost:3000/posts',
cancelToken: new axios.CancelToken(function(c) {
cancel = c;
})
}).then(res => {
cancel = null;
})
},