[FE] AJAX 异步请求中途取消
本文作者: Minskiter @Blog of Minskiter
本文链接: https://mskter.com/2020/10/04/ajaxCancel-zh/
版权声明: 本站所有文章除特别声明外,均采用 (CC)BY-NC-SA 许可协议。转载请注明出处!
应用场景
当前端需要即时搜索时,会不断的向后端请求ajax,但是前端仅仅需要最后一次的搜索结果,之前的请求全部丢弃。
示例
对于未封装原生的js来说
let xhr = new XMLHttpRequest();
xhr.open(method,url,true);
xhr.onreadystatechange = ()=>{} // 回调函数
xhr.send(); // 发送请求
xhr.abort(); // 请求终端
Axios
let cancelToken = axios.CancelToken;
let source = ConcelToken.source();
axios({
method: method,
url: url,
concelToken: source.Token
}).then(res=>{
}).catch(err=>{
});
source.cancel();
总结
配合取消请求可以优化减少搜索请求,特别是当用户不断修改搜索的时候。
Axios封装了promise,提供了cancelToken,与c# 的task异步多线程的cancelToken相似。