前端如何取消接口调用

🧑‍💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣

1. xmlHttpRequest是如何取消请求的?

实例化的XMLHttpRequest对象上也有abort方法

const xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  console.log(this.responseText);
});
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

// 返回
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

如果在send后直接abort取消

// xhr的取消操作:执行过程比较模糊,不知道abort什么时机进行处理
xhr.abort()

如果在定时器中(当定时器的时长那个和接口请求时长差不多)取消请求,会发现资源已经获取到了,但是控制台没有打印
在这里插入图片描述

2. AbortController

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos/1";
​
fetch(url, { signal })
  .then((res) => res.json())
  .then((json) => console.log(json));

直接使用abort取消请求

ac.abort()

在这里插入图片描述
这里报错的原因是没有对错误进行捕获

// 修改后的代码
fetch(url, { signal: ac.signal })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch(e => console.log(e)) // DOMException: signal is aborted without reason
ac.abort() // abort接受一个入参,会被传递到signal的reason属性中

为什么可以这样取消?

fetch监听signal对象的状态,进而可以终止请求

2.1 如何同时取消多个请求?

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos";
​
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch((e) => console.log(e)); // DOMException: signal is aborted without reason
};
​
todoRequest(1, { signal });
todoRequest(2, { signal });
todoRequest(3, { signal });
​
ac.abort("cancled");

在这里插入图片描述

2.2 AbortSignal

是一个接口,用于表示一个信号对象,它允许你与正在执行的异步操作通信,以便可以在操作完成之前将其中止。

2.3 AbortSignal的方法

2.3.1 abort

静态方法,用于创建一个已经中止的 AbortSignal 对象。当你调用这个方法时,它会返回一个带有 aborted 状态为 true 的 AbortSignal 实例。

const signalAbout = AbortSignal.abort(); // AbortSignal {aborted: true, reason: DOMException: signal is aborted without reason...}

2.3.2 throwIfAborted 方法

用于在执行代码之前检查 AbortSignal 是否已经被中止。如果 AbortSignal 已经被中止,它会抛出一个 AbortError。这个方法可以帮助开发者在执行特定操作之前确保没有被中止,以避免不必要的处理。

const signalAbout = AbortSignal.abort('abortedReason');
try {
    signalAbout.throwIfAborted(); // 抛出error: abortedReason
} catch (error) {
    console.log(error);
}

2.3.3 timeout

用于创建一个在指定时间后自动中止的 AbortSignal 对象。这在需要设置请求超时时非常有用。

// 使用 AbortSignal.timeout 设置 10ms超时
const signalAbout = AbortSignal.timeout(10);
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log("json: ", json))
    .catch((e) => console.log("err: ", e)); //DOMException: signal timed out 
};
todoRequest(1, { signal: signalAbout });

在这里插入图片描述

2.3.3.1 添加事件监听 => 从没有终止到被终止

AbortSignal继承自EventTarget,因为 AbortSignal 是用来监听 abort 事件的,而 EventTarget 提供了添加、移除和触发事件监听器的机制。

const signalAbout = AbortSignal.timeout(10);
signalAbout.addEventListener("abort", (e) => {
    console.log("aborted: ", e);
})
​

e的打印如下:
在这里插入图片描述

3. 实现一个主动取消的promise

const ac = new AbortController();
const { signal } = ac;
​
const cancelablePromise = ({signal}) => 
    new Promise((resolve, reject) => {
        // 情况1:直接主动取消
        signal?.throwIfAborted(); // 也可以用reject
​
        // 情况2:正常处理业务逻辑
​
        setTimeout(() => {
            Math.random() > 0.5 ? resolve('data') : reject('fetch error');
        }, 1000);
​
        // 情况3:超时 todo?
​
        // 监听取消
        signal.addEventListener("abort", () => {
            reject(signal?.reason);
        });
    })
// 发起网络请求
cancelablePromise({signal})
.then(res => console.log('res: ', res))
.catch(err => console.log('err: ', err))
// 情况1 
// ac.abort('用户离开页面了') // err:  用户离开页面了
​
// 情况2 正常请求 err:  fetch error || res:  data

4. 如何使用signal取消事件监听?

当对一个元素添加了多个事件监听,不需要像removeEventListener一样,每个事件都需要取消一次,每次都要写明对应事件的事件句柄

使用signal 只需要取消一次信号,全部事件监听都被取消

const ac = new AbortController();
const { signal } = ac;
const eleA = document.querySelector('#a');
const eleB = document.querySelector('#b');
​
function aEleHandler () {}; // 事件
eleA.addEventListener('click', aEleHandler, {signal}); // 无论绑定多少个事件,都只需要一个signal
​
eleB.addEventListener('click', () => {
    ac.abort(); // 只需要取消一次
})

5. 请求多个接口进行数据组装的场景

当网速不好的时候,如何取消这种不断进行的网络请求?

const ac = new AbortController();
const { signal } = ac;
const fetchAndRenderAction = (signal) => {
    requestData(signal); // 多个串行或者并行的接口
    drawAndRender(signal); // 异步渲染
}
​
try{
    fetchAndRenderAction({signal})
}catch{
    // dosomething...
}

6. 总结

对于用户主动离开页面,或者用户的网络很卡的时候(预期返回顺序是:接口1 => 接口2;但是接口1返回太慢,导致顺序混乱。)这就需要手动终止请求。构造函数AbortController的实例信号量signal(可以作为ref存储起来),signal作为fetch的参数,在每次请求的时候,可以手动调用abort方法,取消上一次的请求。

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791777.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

昇思25天学习打卡营第17天|应用实践之SSD目标检测

基本介绍 今天要学习的内容是计算机视觉领域中的目标检测任务。与图像分类相比,目标检测更难,因为目标检测不仅要检测出图片中的物体的类别,还要检测出该物体的位置。现主流的目标检测算法大致可分为两种,一种是基于CNN的&#xf…

MQTT是什么,物联网

写文思路: 以下从几个方面介绍MQTT,包括:MQTT是什么,MQTT和webSocket的结合,以及使用场景, 一、MQTT是什么 MQTT(Message Queuing Telemetry Transport)是一种轻量级的发布/订阅消息…

Java技术栈总结:JVM虚拟机篇

一、Java的四种引用类型 1、强引用 最常见的引用,类似Object obj new Object()、String str “hello”。 如果一个对象具有强引用,垃圾回收器绝对不会回收它。即使抛出“OutOfMemoryError”错误,程序终止,也不会随意回收具有强…

市场趋势的智能预测:Kompas.ai如何洞察未来市场动向

在商业领域,市场趋势预测是企业制定战略规划和做出明智决策的关键。准确把握市场动向能够帮助企业及时调整战略,抓住机遇,规避风险。Kompas.ai,一款先进的人工智能市场分析工具,正通过其深度学习和数据分析能力&#x…

重塑肌肤DNA!华贝甄选解锁生命活力密码

在探索生命奥秘与健康的征途中,华贝甄选携手前沿干细胞科技,为您开启一场前所未有的健康革命。我们深知,生命的活力源自细胞的不懈更新与修复,而干细胞,正是这场生命奇迹的钥匙。 【重塑内分泌平衡,焕发自…

Sentieon Arm版本:进一步降低基因组计算成本

前不久,Arm在其社区的HPC blog上发布了一篇Sentieon在低通量全基因组(LP-WGS)的应用案例。 图1 伴随着大规模基因组学的需求持续增长,基因测序成本的降低使得研究和分析更加广泛。而在基因组学的每一个应用背后,都有一系列计算密…

入驻长沙!全球数据资产理事会长江中游中心挂牌成立

在全球数据资产化浪潮的推动下,长江中游地区迎来了其在数字经济领域的重要里程碑。 近日,《数据资产长江中游生态论坛暨数据资产入表和价值转化研讨会》于长沙圆满落幕,会上各产业专家、企业高管,围绕数据产品开发、数据资产融资…

ICC2:如何检查input floating

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 input floating分为两种情况: input没接net的情况: get_flat_pins -f "direction ==in && undefined(net)" input接net…

数据结构:链表相关题目

链表反转 LeetCode地址:LCR 024. 反转链表 - 力扣(LeetCode) 头插法: class Solution {public ListNode reverseList(ListNode head) {ListNode h1 new ListNode(-1);while(head!null){ListNode index new ListNode(head.val…

SQL职场必备:掌握数据库技能提升职场竞争力

💂 个人网站:【 摸鱼游戏】【网址导航】【神级代码资源网站】🤟 一站式轻松构建小程序、Web网站、移动应用:👉注册地址🤟 基于Web端打造的:👉轻量化工具创作平台💅 想寻找共同学习交…

顺序结构 ( 五 ) —— 数据输入输出 【互三互三】

文章目录 🍁序 🍁一、字符输入函数getchar 🍁二、字符输出函数putchar 🍁三、通过cout流输出数据 🍁四、通过cin流读入数据 🍁五、格式化输入函数scanf 🍁六、格式化输出函数printf &…

【每日一练】python面对对象的基本概念和用法(附实例)

面向对象编程(OOP)是一种程序设计方法,其基本概念包括对象、类、继承和封装。 对象:对象是系统中的基本单位,用于描述客观事物。每个对象包含一组属性和对这些属性进行操作的方法。对象是类的一个实例,具有…

高通开发系列 - LCD屏调试过程中的一些技巧

By: fulinux E-mail: fulinux@sina.com Blog: https://blog.csdn.net/fulinus 喜欢的盆友欢迎点赞和订阅! 你的喜欢就是我写作的动力! 返回:专栏总目录 目录 打开开发者模式wifi adb shellmodetest测试使用异显CPU和GPU加速开性能模式进程绑定大核CPU设置和查询进程状态视频…

Java 中的阻塞 IO 和非阻塞 IO

Java 中的阻塞 IO 和非阻塞 IO 1、阻塞 IO(Blocking IO)2、非阻塞 IO(Non-blocking IO)3、区别与应用场景4、总结 💖The Begin💖点点关注,收藏不迷路💖 IO(输入输出&…

文华财经盘立方博易大师boll布林带指标公式源码

TT:TIME>850&&TIME<1150; MID:MA(CLOSE,26);//求N个周期的收盘价均线&#xff0c;称为布林通道中轨 TMP2:STD(CLOSE,26);//求M个周期内的收盘价的标准差 TOP:MID2*TMP2;//布林通道上轨 BOTTOM:MID-2*TMP2;//布林通道下轨 A:EVERY(ISDOWN,2)&&TT&&…

Python机器学习推理工程化落地步骤指南

目录 一、引言 二、数据准备 2.1 数据收集 2.2 数据清洗 2.3 特征工程 2.4 数据分割 三、模型训练 3.1 选择算法 3.2 训练模型 3.3 模型评估 3.4 模型调优 四、模型部署 4.1 模型序列化 4.2 构建推理服务 4.3 部署与监控 五、总结 在当今科技飞速发展的时代…

text prompt如何超过77个词

【深度学习】sdwebui的token_counter,update_token_counter,如何超出77个token的限制?对提示词加权的底层实现_prompt中token权重-CSDN博客文章浏览阅读1.6k次,点赞26次,收藏36次。文章探讨了如何在StableDiffusionProcessing中处理超过77个token的提示,涉及token_counte…

【面试题】防火墙的部署模式有哪些?

防火墙的部署模式多种多样&#xff0c;每种模式都有其特定的应用场景和优缺点。以下是防火墙的主要部署模式&#xff1a; 一、按工作模式分类 路由模式 定义&#xff1a;当防火墙位于内部网络和外部网络之间时&#xff0c;需要将防火墙与内部网络、外部网络以及DMZ&#xff0…

mindspore打卡20天之Shufflenet图像分类

ShuffleNet图像分类 当前案例不支持在GPU设备上静态图模式运行&#xff0c;其他模式运行皆支持。 ShuffleNet网络介绍 ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型&#xff0c;和MobileNet, SqueezeNet等一样主要应用在移动端&#xff0c;所以模型的设计目标就是利用有…

对于人机结合+人工智能的一点思考

开题失败后看了不少论文&#xff0c;人机结合这个方向查了一下……作为毕业论文的题目还真没有&#xff0c;无论是知网公开的还是中科院自建库学生毕业论文都没有这个题目……这实验怎么设计啊……主观的&#xff0c;还要让模型像人&#xff0c;还要让模型更容易被人调教&#…