JavaScript取消请求有哪些方法

来源: https://www.ucloud.cn/yun/130344.html 作者: 3403771864 发布日期: 发布于2023-03-17 21:13

本篇文章主要为大家讲述的就是关于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 请求，需要用到AbortControllerAPI。我们可以构造一个 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 方法已经被弃用，更多请见文档axios-http.com/docs/cancel…；

　　本篇内容到此讲述完毕，请大家关注后续更多精彩内容。