ajax异步请求中途取消

最新推荐文章于 2023-12-22 16:10:29 发布

檀小泡泡

最新推荐文章于 2023-12-22 16:10:29 发布

阅读量4.1w

点赞数

分类专栏： HTTP/AXIOS 文章标签： ajax取消请求

本文链接：https://blog.youkuaiyun.com/weixin_42371145/article/details/114017888

版权

HTTP/AXIOS 专栏收录该内容

9 篇文章

订阅专栏

在前端即时搜索场景中，为避免不必要的旧请求，需要取消ajax请求。对于原生XHR，可通过调用abort()方法终止请求。而使用axios时，可以通过CancelToken.source()来取消请求，每个请求的cancelToken作为标识，便于精准取消特定请求。这种机制类似于C#的task异步多线程的cancelToken，有助于优化搜索请求，尤其是在用户频繁更改搜索条件时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景
当前端需要即时搜索时，会不断的向后端请求ajax，但是前端仅仅需要最后一次的搜索结果，之前的请求全部丢弃。

示例
对于原生XHR对象来说，取消的ajax的关键是调用XHR对象的.abort()方法

let xhr = new XMLHttpRequest();
xhr.open(method,url,true);
xhr.onreadystatechange = ()=>{} // 回调函数
xhr.send(); // 发送请求
xhr.abort(); // 请求终端

Axios
如果我们经常使用vue等框架的话，就会使用axios发送ajax请求。在axios中取消ajax请求不同于上面两种形式，在axios中是通过axios.CancelToken.source()方法取消请求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios({
    method:"GET",
    url:"https://api.github.com/",
    cancelToken:source.token
    //cancelToken的值起标识作用，标识由source控制的、将要被取消的ajax操作
}).then((res) => {
    console.log(res.data);
}).catch((err) => {
    console.log(err);
});

source.cancel('Operation canceled by the user.');

但如果我们有多个通过axios发送的ajax请求，需要精准的取消掉指定的请求应该这么做呢？在上面的代码中有注释“cancelToken的值起标识作用，标识由source控制的、将要被取消的ajax操作”，下面的栗子会更加清楚的展示cancelToken的作用

var CancelToken = axios.CancelToken;

var source = CancelToken.source();
axios({
    method:"GET",
    url:"https://api.github.com/",
    cancelToken:source.token
}).then((res) => {
    console.log(res.data);
}).catch((err) => {
    console.log(err);
});

var custom = CancelToken.source();
axios({
    method:"GET",
    url:"https://api.github.com/",
    cancelToken:custom.token
}).then((res)=>{
    console.log(res.data);
}).catch((err)=>{
    console.log(err);
});

source.cancel('Operation canceled by the user.');
custom.cancel('精确取消');

总结
配合取消请求可以优化减少搜索请求，特别是当用户不断修改搜索的时候。
Axios封装了promise，提供了cancelToken，与c# 的task异步多线程的cancelToken相似。

转自：
https://blog.youkuaiyun.com/wopelo/article/details/79802585