在我们日常开发中,有这样一种场景必须要进行处理,那就是在提交表单的时候,如果很快的重复点击两次,会造成重复请求,第二次请求就会报错,给用户带来很不好的体验,同时如果后端没有加以控制,也容易造成数据重复。所以我们需要对这种重复请求进行处理和控制。
axios
是现在前端项目开发中必用的一个用于前端后网络请求的工具,它是基于ajax
和promise
封装而成,很受欢迎。
那么,今天就结合axios
来实现一下如何取消重复请求。
思路整理
取消重复请求的思路就是,将每一次请求的url
、method
、params
、data
拼接起来组成一个key
,然后添加到map
中,下一次请求时就拿key
在map
中查找是否已存在,如果存在就表示重复请求,就取消,如果不存在就放行,等请求成功后在从map
中删除这个key
。
axios中如何取消请求
- 普通请求取消
在普通的ajax
中,是通过XMLHttpRequest
的abort()
方法实现取消请求的。
var ajax = new XMLHttpRequest();
ajax.open('GET', '/abc');
ajax.send();
setTimeout(() => {
ajax.abort(); // 取消当前请求
}, 300);
- axios请求取消
axios
中是通过CancelToken
给每个请求添加一个cancelToken
属性,使得每个请求具备取消请求的能力。有两种方法实现:
// 方式一:
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).then(res => {
});
// cancel方法里面的参数是可选参数
source.cancel('取消请求');
// 方式二:
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// 这里的c就是取消当前请求的方法,这里把c赋值给cancel变量
cancel = c;
})
});
// 调用取消方法
cancel(