前端如何中断请求 ( axios、原生 ajax、fetch)

本文主要是介绍前端如何中断请求 ( axios、原生 ajax、fetch)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用场景

在前端开发中，我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景：
比如

重复请求：当页面中多个组件并发调用同一个接口时，在第一个请求返回后，我们可能需要中断其他组件对该接口的调用，以避免重复请求和冗余数据。这在组件高度复用、不依赖公共 API 的情况下特别有用。
竞态请求：当页面定时轮询发起请求时，如果上一个请求的响应速度比下一个请求慢，会导致数据错乱。中断较慢的请求可以确保只处理最新的数据，避免竞态条件。
无效请求：在单页应用中，当组件加载过慢，路由跳转后可能会导致组件卸载，但请求仍在进行中。如果接口返回错误，错误提示可能会在其他页面弹出。中断无效请求可以避免不必要的错误提示。
大文件上传暂停与恢复：在实现大文件上传功能时，用户可能会需要暂停和恢复上传过程。中断请求可以实现暂停功能，并在需要时重新发起请求以实现恢复上传。

除了以上提到的场景，还有许多其他情况需要中断请求以减少对服务器的无效请求。

下面介绍几种终止请求的方案

原生ajax终止请求

abort() 方法

XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求。调用该方法后，如果请求正在处理中，则会中止该请求；如果请求已经完成（即已经接收到完整的响应），则不会执行任何操作。同时，调用该方法会触发 XMLHttpRequest 对象的 abort 事件，我们可以在事件处理函数中执行后续的逻辑代码，如清除请求相关的数据等。

当一个请求被终止后，它的 readyState 属性将变为 0，status 属性也会变为 0。

案例代码：

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 请求地址
const url = "https://developer.mozilla.org/";
// 初始化请求
xhr.open('GET', url, true);
// 发送请求
xhr.send();
// 监听取消请求
xhr.addEventListener('abort', function () {console.log('请求被abort()取消了');
});
// 定时器模拟取消请求
setTimeout(() => {// 取消请求xhr.abort();// 取消请求之后的状态statusconsole.log('abort()之后的xhr.status---', xhr.status);// 取消请求之后的状态readyStateconsole.log('abort()之后的xhr.readyState---', xhr.readyState);
}, 100);

fetch 终止请求

使用 AbortController 可以中断 Fetch 请求。AbortController 是一个新的 Web 标准，用于中止 DOM 请求和 Fetch 请求。在执行 Fetch 请求时，可以通过 AbortController 创建一个信号对象 signal，并将 signal 作为配置选项传递给 fetch() 方法，这样就可以通过调用 AbortController 对象的 abort() 方法来中止请求。

案例代码：

const controller = new AbortController();
const { signal } = controller;
// 请求地址
const url = "https://developer.mozilla.org/";
fetch(url, { signal }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));// 中止 fetch 请求
controller.abort();

axios 终止请求

AbortController（新版本）

从 axios 的 0.22.0 版本开始，推荐使用浏览器原生的 AbortController 来终止请求。当使用该方法终止请求时，如果请求正在处理中，则会中止该请求；如果请求已经完成（即已经接收到完整的响应），则不会执行任何操作。

我们可以通过两种方式来监听终止请求的操作并进行后续处理：

使用 AbortController 提供的 onabort 事件，通过监听该事件并绑定事件处理函数，在函数中执行后续处理逻辑。
使用 try…catch，终止请求后会触发 catch，可以在 catch 中进行后续处理。如果同时使用 onabort 事件和 try…catch，则会先触发 onabort 事件，再触发 try…catch。

案例代码：

// 以vue项目中使用axios为例
// 创建请求控制器 
this.controller = new AbortController();
console.log("初始声明的请求控制器------", this.controller);const url = "https://developer.mozilla.org/";
// 第一种方法：绑定事件处理程序
this.controller.signal.addEventListener("abort", () => {console.log("请求已终止，触发了onabort事件");// 进行后续处理
});// 第二种方法：try...catch
try {// 发送文件上传请求const res = await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时signal: this.controller.signal, // 绑定取消请求的信号量});
} catch (error) {console.log("终止请求时catch的error---", error);// 判断是否为取消上传if (error.message == "canceled"){// 进行后续处理};
}// 终止请求
this.controller.abort();
console.log("终止请求后的请求控制器------", this.controller);

需要注意的是，每个 AbortController 可以同时取消多个请求，但只能取消请求一次。终止请求后，该请求的 signal.aborted 属性会从 false 变为 true。目前，暂无方法可以将其恢复为 false。如果后续请求仍然绑定了该请求控制器，那么后续请求都会被提前终止，不会被发送。

如果想要在终止请求后不影响后续请求的正常发送，并且后续请求也能够被终止，需要在每次发送请求之前都通过构造函数创建一个新的 AbortController，并将每次请求绑定到新的 AbortController 上，以确保多次请求之间不会相互干扰。

CancelToken（ axios 旧版本）

在 axios 的 0.22.0 版本之前，可以使用取消令牌（CancelToken）来中止请求。不过，从 0.22.0 版本开始，该 API 已被弃用，不再建议使用。当使用该方法终止请求时，如果请求正在处理中，则会中止该请求；如果请求已经完成（即已经接收到完整的响应），则不会执行任何操作。

该方法只能通过try…catch来监听取消请求操作，终止请求之后，会触发catch，在catch中进行后续处理。而且该方法在取消请求时，可以通过参数自定义catch的error中的message内容。

案例代码：

// 以vue项目中使用axios为例// 这个地方需要导入原生的axios 最好不要使用二次封装后的axios
import axios from "axios";
const url = "https://developer.mozilla.org/";
// 创建请求令牌
this.source = axios.CancelToken.source();
console.log("初始声明的请求令牌---", this.source);// 第二种方法：try...catch
try {// 发送文件上传请求const res = await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时cancelToken: this.source.token, // 绑定取消请求的令牌});
} catch (error) {console.log("终止请求时catch的error---", error);// 判断是否为取消上传if (error.message == "自定义取消请求的message"){// 进行后续处理};
}// 终止请求
this.source.cancel("自定义取消请求的message");
console.log("取消请求后的请求令牌---", this.source);