引言

众所周知，JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch。我们平常用的较多的是 Promise 请求库 axios，它基于 XMLHttpRequest。

本篇带来 XMLHttpRequest、Fetch 和 axios 分别是怎样“取消请求”的。

闲话少说，冲就完事了~

取消 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 中，看看正常请求和取消请求的对比图：

取消 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);

浏览器控制台对比图：

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

取消 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);

控制台截图：

错误捕获：

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

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

猜你喜欢

• JS中删除元素hidden属性的方法是什么，代码怎样写？

  这篇文章给大家分享的是JS中删除元素hidden属性的方法。这里我们使用到removeAttribute()方法来实现，那么实现代码怎样写呢？文中有示例代码供大家参考，感兴趣的朋友可以参考，接下来就跟随小编一起了解看看吧。

• Map和Set的数据结构是什么样，两者啥区别

  首先了解一下 Map再来了解一下 Set总结Map和Set的区别结语：首先了解一下 MapMap 是一组键值对的结构，和 JSON 对象类似。(1) Map数据结构如下这里我们可以看到的是Map的数

• angularjs循环对象属性优缺点是什么，怎么实现

  这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• JavaScript原型继承怎么实现，思路和方法是什么

  定义新的构造函数，并在内部使用call()调用希望继承的结构函数，绑定this。借助中间函数F实现原型链继承，最好通过封装的inherits函数完成。在新的构造函数原型上继续定义新的方法。

• JavaScript原型与原型链是什么意思?

  这篇文章主要给大家介绍关于JavaScript原型与原型链的内容，一些朋友可能对JavaScript原型和JavaScript原型链是什么不是很了解，对此本文有很详细的介绍，需要的朋友了解看看，那么接下来就跟随小编来学习一下吧。