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

打印 上一主题 下一主题

主题 822|帖子 822|积分 2466

关于前端停止哀求,其实许多业务场景中,我们都用到了这个功能,之前有一次面试,问道了这个,刚好手里有个需求,由于哀求时间很长,为避免用户焦虑,于是加上一个停息哀求的功能。
正常情况下,我们使用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";
  3. const downloadBtn = document.querySelector(".download");
  4. const abortBtn = document.querySelector(".abort");
  5. downloadBtn.addEventListener("click", fetchVideo);
  6. abortBtn.addEventListener("click", () => {
  7.   if (controller) {
  8.     controller.abort();
  9.     console.log("中止下载");
  10.   }
  11. });
  12. function fetchVideo() {
  13.   controller = new AbortController();
  14.   const signal = controller.signal;
  15.   fetch(url, { signal })
  16.     .then((response) => {
  17.       console.log("下载完成", response);
  18.     })
  19.     .catch((err) => {
  20.       console.error(`下载错误:${err.message}`);
  21.     });
  22. }
复制代码
在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'
  3. export const App = () => {
  4.     const [controller, setController] = useState(null)
  5.     const getData = async () => {
  6.         const abortController = new AbortController();
  7.         setController(abortController);
  8.         try {
  9.             const res=await text2ImgFn(data,{signal:abortController.signal})
  10.         } catch (err){
  11.             console.log(err,'终止')
  12.         }
  13.     }
  14.     const stopFn=()=>{
  15.         controller.abort()
  16.     }
  17.     useEffect(() => {
  18.         return () => {
  19.             if (controller) {
  20.                 controller.abort();
  21.             }
  22.         };
  23.     }, [])
  24.     return (
  25.         <div>
  26.             <button onClick={getData}>发送</button>
  27.             <button onClick={stopFn}>终止</button>
  28.         </div>
  29.     )
  30. }
复制代码


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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

北冰洋以北

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表