使用场景
在前端开发中，我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景：
比如
- 重复请求：当页面中多个组件并发调用同一个接口时，在第一个请求返回后，我们可能需要中断其他组件对该接口的调用，以避免重复请求和冗余数据。这在组件高度复用、不依赖公共 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...catchtry {// 发送文件上传请求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 最好不要使用二次封装后的axiosimport axios from "axios";const url = "https://developer.mozilla.org/";// 创建请求令牌this.source = axios.CancelToken.source();console.log("初始声明的请求令牌---", this.source);// 第二种方法：try...catchtry {// 发送文件上传请求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);注意：该方法与AbortController相同，都可以同时取消多个请求，但是只能取消请求一次，一个CancelToken在终止过请求之后，如果后续请求还是绑定该请求令牌，则后续请求都会被提前终止，不会被发出。
同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么需要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。