Axios/fatch发送哀求后取消哀求,React中使用AbortController

关于前端停止哀求，其实许多业务场景中，我们都用到了这个功能，之前有一次面试，问道了这个，刚好手里有个需求，由于哀求时间很长，为避免用户焦虑，于是加上一个停息哀求的功能。
正常情况下，我们使用ajax/axios/fatch来发动哀求
关键代码直接看文末，照抄就对啦
1.原生AJAX的终止哀求，可以用abort()，

XMLHttpRequest.abort()方法用来终止已经发出的 HTTP 哀求。调用这个方法以后，readyState属性变为4，status属性变为0。

1. var xhr = new XMLHttpRequest();
2. xhr.open('GET', 'http://www.example.com/page.php', true);
3. setTimeout(function () {
4.   if (xhr) {
5.     xhr.abort();
6.     xhr = null;
7.   }
8. }, 5000);

复制代码

上面代码在发出5秒之后，终止一个 AJAX 哀求。
这是官网的示例代码，由于开辟过程中没有用到ajax，所以带过一下，AJAX -- JavaScript 标准参考教程（alpha）
2.axios中终止哀求，AbortController

axios的0.22版本后，需要使用浏览器原生的AbortController来终止哀求，当使用该方法终止哀求时，如果对应哀求已经被发送并且正在处置惩罚中，则会停止该哀求；如果哀求已经完成（即已经接收到完备的响应），则不会实行任何操作。
AbortController 接口表示一个控制器对象，允许你根据需要停止一个或多个 Web 哀求。
可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController。使用 AbortSignal 对象可以完成与 DOM 哀求的通讯。
AbortController.signal  
返回一个 AbortSignal 对象实例，它可以用来 with/abort 一个 Web（网络）哀求。
AbortController.abort()
停止一个尚未完成的 Web（网络）哀求。这可以或许停止 fetch 哀求及任何响应体的消费和流，比如停息视频的下载等

在下面的代码片段中，我们想通过 Fetch API 下载一段视频。
我们先使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal 属性获取其关联 AbortSignal 对象的引用。
当 fetch 哀求初始化时，我们将 AbortSignal 作为一个选项传递进入哀求的选项对象中（下面的 {signal}）。这将 signal 和 controller 与 fetch 哀求相关联，并且允许我们通过调用 AbortController.abort() 去停止它，如下面的第二个事件监听器。

1. let controller;
2. const url = "video.mp4";
4. const downloadBtn = document.querySelector(".download");
5. const abortBtn = document.querySelector(".abort");
7. downloadBtn.addEventListener("click", fetchVideo);
9. abortBtn.addEventListener("click", () => {
10.   if (controller) {
11.     controller.abort();
12.     console.log("中止下载");
13.   }
14. });
16. function fetchVideo() {
17.   controller = new AbortController();
18.   const signal = controller.signal;
19.   fetch(url, { signal })
20.     .then((response) => {
21.       console.log("下载完成", response);
22.     })
23.     .catch((err) => {
24.       console.error(`下载错误：${err.message}`);
25.     });
26. }

复制代码

在React中，终止axios的示例Demo，我是在函数组件中实现
起首在接口中，添加config

1. export const text2Img = (data,config) => {
2.     return Api.post('/tools/text2Img', data,config)
3. }

复制代码

1. import React, { useState, useEffect } from 'react';
2. import { text2ImgFn } from './api'
4. export const App = () => {
5.     const [controller, setController] = useState(null)
6.     const getData = async () => {
7.         const abortController = new AbortController();
8.         setController(abortController);
9.         try {
10.             const res=await text2ImgFn(data,{signal:abortController.signal})
11.         } catch (err){
12.             console.log(err,'终止')
13.         }
14.     }
15.     const stopFn=()=>{
16.         controller.abort()
17.     }
19.     useEffect(() => {
20.         return () => {
21.             if (controller) {
22.                 controller.abort();
23.             }
24.         };
25.     }, [])
27.     return (
28.         <div>
29.             <button onClick={getData}>发送</button>
30.             <button onClick={stopFn}>终止</button>
31.         </div>
32.     )
35. }

复制代码

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