前端如何停止请求 ( axios、原生 ajax、fetch)

使用场景

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

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

除了以上提到的场景，还有许多其他环境必要停止请求以淘汰对服务器的无效请求。
下面先容几种终止请求的方案
原生ajax终止请求

abort() 方法

XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求。调用该方法后，如果请求正在处置惩罚中，则会中止该请求；如果请求已经完成（即已经接收到完整的响应），则不会执行任何操作。同时，调用该方法会触发 XMLHttpRequest 对象的 abort 事件，我们可以在事件处置惩罚函数中执行后续的逻辑代码，如清除请求相关的数据等。
当一个请求被终止后，它的 readyState 属性将变为 0，status 属性也会变为 0。
案例代码：

1. // 创建XMLHttpRequest对象
2. const xhr = new XMLHttpRequest();
3. // 请求地址
4. const url = "https://developer.mozilla.org/";
5. // 初始化请求
6. xhr.open('GET', url, true);
7. // 发送请求
8. xhr.send();
9. // 监听取消请求
10. xhr.addEventListener('abort', function () {
11.         console.log('请求被abort()取消了');
12. });
13. // 定时器模拟取消请求
14. setTimeout(() => {
15.         // 取消请求
16.         xhr.abort();
17.         // 取消请求之后的状态status
18.         console.log('abort()之后的xhr.status---', xhr.status);
19.         // 取消请求之后的状态readyState
20.         console.log('abort()之后的xhr.readyState---', xhr.readyState);
21. }, 100);

复制代码

fetch 终止请求

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

1. const controller = new AbortController();
2. const { signal } = controller;
3. // 请求地址
4. const url = "https://developer.mozilla.org/";
5. fetch(url, { signal })
6.   .then(response => response.json())
7.   .then(data => console.log(data))
8.   .catch(error => console.error(error));
10. // 中止 fetch 请求
11. controller.abort();

复制代码

axios 终止请求

AbortController（新版本）

从 axios 的 0.22.0 版本开始，推荐使用浏览器原生的 AbortController 来终止请求。当使用该方法终止请求时，如果请求正在处置惩罚中，则会中止该请求；如果请求已经完成（即已经接收到完整的响应），则不会执行任何操作。
我们可以通过两种方式来监听终止请求的操作并进行后续处置惩罚：

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

案例代码：

1. // 以vue项目中使用axios为例
2. // 创建请求控制器
3. this.controller = new AbortController();
4. console.log("初始声明的请求控制器------", this.controller);
6. const url = "https://developer.mozilla.org/";
7. // 第一种方法：绑定事件处理程序
8. this.controller.signal.addEventListener("abort", () => {
9.    console.log("请求已终止，触发了onabort事件");
10.    // 进行后续处理
11. });
13. // 第二种方法：try...catch
14. try {
15.     // 发送文件上传请求
16.     const res = await this.$axios.post(url, {}, {
17.      timeout: 0, // 设置超时时间为 0/null 表示永不超时
18.      signal: this.controller.signal, // 绑定取消请求的信号量
19.         });
20. } catch (error) {
21.     console.log("终止请求时catch的error---", error);
22.     // 判断是否为取消上传
23.     if (error.message == "canceled"){
24.         // 进行后续处理
25.     };
26. }
28. // 终止请求
29. this.controller.abort();
30. 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内容。
案例代码：

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

复制代码

留意：该方法与AbortController相同，都可以同时取消多个请求，但是只能取消请求一次，一个CancelToken在终止过请求之后，如果后续请求照旧绑定该请求令牌，则后续请求都会被提前终止，不会被发出。
同理，如果我们想要在终止请求之后，不影响后续请求的正常发出，且后续请求也是可以被终止的，那么必要在每次发出请求之前，都创建一个新的的 CancelToken，每次请求绑定的都是新的CancelToken，这样才能做到多次请求之间不干扰。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。