【JavaScript】使用 AbortController 对象中断 fetch 的文本流传输

AbortController

正如我们所知道的,fetch 返回一个 promise。JavaScript 通常并没有“中止” promise 的概念。那么我们怎样才能取消一个正在执行的 fetch 呢?例如,如果用户在我们网站上的操作表明不再需要某个执行中的 fetch。

为此有一个特殊的内建对象:AbortController。它不仅可以中止 fetch,还可以中止其他异步任务。

用法非常简单。

创建一个控制器(controller)

let controller = new AbortController();

控制器是一个极其简单的对象。

它具有单个方法 abort(),
和单个属性 signal,我们可以在这个属性上设置事件监听器。
当 abort() 被调用时:

controller.signal // 就会触发 abort 事件。
controller.signal.aborted // 属性变为 true。

通常,我们需要处理两部分:

一部分是通过在 controller.signal 上添加一个监听器,来执行可取消操作。
另一部分是触发取消:在需要的时候调用 controller.abort()。
这是完整的示例(目前还没有 fetch):

let controller = new AbortController();
let signal = controller.signal;// 执行可取消操作部分
// 获取 "signal" 对象,
// 并将监听器设置为在 controller.abort() 被调用时触发
signal.addEventListener('abort', () => alert("abort!"));// 另一部分,取消(在之后的任何时候):
controller.abort(); // 中止!// 事件触发,signal.aborted 变为 true
alert(signal.aborted); // true

正如我们所看到的,AbortController 只是在 abort() 被调用时传递 abort 事件的一种方式。

我们可以自己在代码中实现相同类型的事件监听,而不需要 AbortController 对象。

但是有价值的是,fetch 知道如何与 AbortController 对象一起工作。它们是集成在一起的。

与 fetch 一起使用

为了能够取消 fetch,请将 AbortController 的 signal 属性作为 fetch 的一个可选参数(option)进行传递:

let controller = new AbortController();
fetch(url, {signal: controller.signal
});

fetch 方法知道如何与 AbortController 一起工作。它会监听 signal 上的 abort 事件。

现在,想要中止 fetch,调用 controller.abort() 即可:

controller.abort();

我们完成啦:fetch 从 signal 获取了事件并中止了请求。

当一个 fetch 被中止,它的 promise 就会以一个 error AbortError reject,因此我们应该对其进行处理,例如在 try…catch 中。

这是完整的示例,其中 fetch 在 1 秒后中止:

// 1 秒后中止
let controller = new AbortController();
setTimeout(() => controller.abort(), 1000);try {let response = await fetch('/article/fetch-abort/demo/hang', {signal: controller.signal});
} catch(err) {if (err.name == 'AbortError') { // handle abort()alert("Aborted!");} else {throw err;}
}

参考

AbortController.AbortController()——MDN
Fetch:中止(Abort)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【kettle006】kettle访问华为openGauss高斯数据库并处理数据至execl文件

1.一直以来想写下基于kettle的系列文章,作为较火的数据ETL工具,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下华为openGauss高斯数据库相关知识体系 3.欢迎批评指正,跪谢…

Spring Boot应用部署 - JAR包Docker部署

JAR包Docker部署 要使用Docker部署Spring Boot应用,需要创建一个Dockerfile来定义如何构建Docker镜像,并且可能还需要在Maven构建脚本中集成Docker插件以简化构建过程。以下是详细的步骤: 1. 创建Dockerfile 在Spring Boot项目的根目录下创…

【实时数仓架构】方法论(未完)

笔者不是专业的实时数仓架构,这是笔者从其他人经验和网上资料整理而来,仅供参考。写此文章意义,加深对实时数仓理解。 实时数仓背景和场景 一、实时数仓架构技术演进 1.1、四种架构演进 1)离线大数据架构 一种批处理离线数据分…

胡写乱写哈哈哈

message.from() 获取消息的发送者名称 const bot new Wechaty() .on(message, async message > { //这条消息是谁发送的const contact message.from()//这条消息的文本内容const text message.text()//这条消息是哪个群聊中发送的const room message.room()if (room) {/…

电脑开机后卡在开机LOGO画面如何排查处理

当电脑开机后长时间停滞在开机LOGO画面,无法继续进入操作系统,这一现象常令用户困扰不已。本文将深入探讨导致此类问题的多种可能原因,并提供相应的解决方法,帮助你有效地诊断和排除故障。 硬件故障或接触不良 1. 硬盘问题:硬盘是系统启动的关键组件,其故障或数据线接触…

css如何去掉重叠部分的边框,CSS中nth-child不生效

css如何去掉重叠部分的边框 div使用负的margin&#xff0c;margin-right:-1px&#xff1b;table表格设置边框后的重叠&#xff0c;border-collapse: collapse CSS中nth-child不生效 <body><ul><li><a><span class"item"></span&…

CentOS 删除文件提示 Operation not permitted 的解决方法

1、阿里云服务器提示存在挖矿行为&#xff0c;路径在 /etc/zzh&#xff0c;我们做下删除动作&#xff0c;发现不能删除 [rootMSH etc]# rm -f zzh# 提示 rm: cannot remove ‘zzh’: Operation not permitted2、解决方法&#xff1a; (1)、查看文件权限 [rootMSH etc]# lsat…

xml,json和protobuffer

数据组织格式 xmljsonprotobuffer小结 xml 是以成对的方式,来表示"键值对"的信息,同时标签支持嵌套,可以构成更复杂的树形结构数据. 请求: <request> // 开始标签<username>zhangsan</username> // 表示的是键值对 key:username value: zhangsan&l…

Django项目之电商购物商城 -- 校验用户输入密码是否合法

Django项目之电商购物商城 – 校验用户输入密码是否合法 需要开发文档和前端资料的可私聊 一. 创建用户逻辑操作 1. 创建用户app – users python manage.py startapp users2.注册app users.apps.UsersConfig,3. 创建视图 from django.shortcuts import render from djan…

如何在小程序中添加图片和视频

在微信小程序中添加图片和视频可以通过特定的组件和属性来实现。 对于添加图片&#xff0c;你可以使用<image>组件。 <view> <image src"图片链接" style"width: 375rpx; height: 375rpx;"></image> </view> 这里&…

原生IP和住宅IP有什么区别?

原生IP和住宅IP在多个方面存在显著的区别。 从定义和来源来看&#xff0c;原生IP是指未经NAT&#xff08;网络地址转换&#xff09;处理的真实、公网可路由的IP地址&#xff0c;它直接从互联网服务提供商&#xff08;ISP&#xff09;获得&#xff0c;而不是通过代理服务器或VP…

Django初步了解

目录 一、什么是Django 二、Django的设计模式 三、涉及的英文缩写及其含义 四、安装&#xff08;官方教程&#xff09; 一、什么是Django Django是一个Python Web框架&#xff0c;可以快速开发网站&#xff0c;提供一站式的解决方案&#xff0c;包括缓存、数据库ORM、后台…

Postgresql从小白到高手 十:Linux服务器配置详解

Postgresql从小白到高手 第十章 Linux服务器配置详解 文章目录 Postgresql从小白到高手Postgresql Linux 服务器配置conf常用配置conf配置类别1. 连接相关配置2. 资源管理相关配置3. 日志和错误报告相关配置4. 安全性相关配置5 内存和查询优化6、复制和备份配置注意事项 Postg…

大象机器人开源协作机械臂myCobot 630 全面升级!

1. 开篇概述 在快速发展的机器人技术领域中&#xff0c;Elephant Robotics的myCobot 600已经证明了其在教育、科研和轻工业领域的显著适用性。作为一款具备六自由度的机械臂&#xff0c;myCobot 600以其600mm的工作半径和2kg的末端负载能力&#xff0c;满足了多样化的操作需求。…

中间件解析漏洞

1 、 apache 解析漏洞 漏洞环境搭建 下载 vulhub git clone https://github.com/vulhub/vulhub.git 进入对应漏洞目录、 cd vulhub/httpd/apache_parsing_vulnerability apt-get docker-compose 启动漏洞环境 docker-compose up -d 注&#xff1a;启动容器时&#xf…

leetcode2389--感染二叉树需要的总时间

1. 题意 给定一个节点&#xff0c;每秒该节点会感染相邻的节点&#xff0c;受感染的节点下一秒也会感染周围节点&#xff1b; 求使得所有节点感染的时间 2. 题解 2.1 dfs建图bfs搜索层次 我们将目标节点找到&#xff0c;并从该节点出发找到以该节点形成的树的深度即可。 …

【spring mvc】配置请求到视图名称转换器

最近在开发项目中遇到springmvc在进行视图渲染时&#xff0c;pc端和移动端不是同一个页面的情况&#xff0c;需要将不同的设备类型解析到不同的视图进行渲染。 一、配置方式 这里我写了一个RequestToViewNameTranslatorImpl类实现了RequestToViewNameTranslator接口&#xff…

用数据检验函数正确性,matlab2C

数据存取格式 filename1 g.txt; fid1 fopen(filename1,w); for i 1 : length(g)for j1:size(g,2)if(j1)fprintf(fid1,{%.16f,,g(i,j)); elseif(j>1&&j<151)fprintf(fid1,%.16f,,g(i,j)); elsefprintf(fid1,%.16f},\n,g(i,j));endend%fprintf(fid1,\n…

Baumer工业相机堡盟工业相机如何通过NEOAPISDK查询和轮询相机设备事件函数(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPISDK查询和轮询相机设备事件函数&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和相机设备事件的技术背景Baumer工业相机通过NEOAPISDK在相机中查询和轮询相机设备事件函数功能1.引用合适的类文件2.通过NEOAPISDK…

ZooKeeper 环境搭建详细教程之三(真集群)

ZooKeeper 搭建详细步骤之三(真集群) ZooKeeper 搭建详细步骤之二(伪集群模式) ZooKeeper 搭建详细步骤之一(单机模式) ZooKeeper 及相关概念简介 真集群搭建 搭建 ZooKeeper 真集群涉及多个步骤,包括准备环境、配置文件设置、启动服务以及验证集群状态。 以下是一个简…