JavaScript怎么取消请求

这篇文章主要介绍了JavaScript怎么取消请求的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript怎么取消请求文章都会有所收获,下面我们一起来看看吧。

取消 XMLHttpRequest 请求

当请求已经发送了,可以使用 XMLHttpRequest.abort() 方法取消发送,代码示例如下:

const xhr = new XMLHttpRequest();
xhr.open('GET', '<http://127.0.0.1:3000/api/get>', true);
xhr.send();
setTimeout(() => {
	 xhr.abort();
}, 1000);

取消请求,readyState 会变成 XMLHttpRequest.UNSENT(0);请求的 xhr.status 会被设为 0 ;

不如在 Chrome DevTools Network 中,看看正常请求和取消请求的对比图:

JavaScript怎么取消请求  javascript 第1张

取消 Fetch 请求

取消 Fetch 请求,需要用到 AbortController API。我们可以构造一个 controller 实例:const controller = new AbortController() , controller 它有一个只读属性 AbortController.signal,可以作为参数传入到 fetch 中,用于将控制器与获取请求相关联;

代码示例如下:

const controller = new AbortController();
void (async function () {
    const response = await fetch('<http://127.0.0.1:3000/api/get>', {
        signal: controller.signal,
    });
    const data = await response.json();
})();
setTimeout(() => {
    controller.abort();
}, 1000);

浏览器控制台对比图:

JavaScript怎么取消请求  javascript 第2张

我们其实可以在 controller.abort() 传入“取消请求的原因”参数,然后进行 try...catch 捕获

JavaScript怎么取消请求  javascript 第3张

取消 aixos 请求

axios 同样支持 AbortController

const controller = new AbortController();
const API_URL = '<http://127.0.0.1:3000/api/get>';
void (async function () {
    const response = await axios.get(API_URL, {
        signal: controller.signal,
    });
    const { data } = response;
})();
setTimeout(() => {
    controller.abort();
}, 1000);

控制台截图:

JavaScript怎么取消请求  javascript 第4张

错误捕获:

JavaScript怎么取消请求  javascript 第5张

注意:axios 之前用于取消请求的 CancelToken 方法已经被弃用

关于“JavaScript怎么取消请求”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“JavaScript怎么取消请求”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注蜗牛博客行业资讯频道。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论电报频道链接