fetch: 取消请求、读取流、获取下载进度...

引言

Fetch API 提供了一个获取资源的接口(包括跨网络通信)。对于任何使用过 XMLHttpRequest 的开发者来说, 对于 Fetch 应该都能轻松上手, 而且新的 API 提供了更强大和灵活的功能集…

本文主要就是记录下, 在使用 Fetch 期间可能会碰到的几个小案例…

一、取消请求

在前端开发中, 取消请求是一个比较常见的需求了吧!!

下面举个场景, 比如我们要实现一个类似 google 一样的搜索提示下拉框, 下拉框内容是根据输入框内容查询出来的!! 当用户快速输入词条, 必然会高频的调用接口, 这时难免会出现先请求的接口响应速度比后请求的慢, 这样的话就有可能出现响应覆盖的问题!! 这里常规的解决办法有以下几种:

  1. 防抖: 用户快速地交互过程中, 只使用最后一次交互产生的数据, 然后再发起请求!
  2. 锁状态: 在上一个接口没有返回数据时, 交互状态一直处于 loading 的锁定状态
  3. 取消上一个请求: 在发起下一个请求前, 把之前的请求取消掉

防抖锁状态 虽然能解决问题, 但或多或少还是会影响用户的一个体验, 所以个人认为比较好的方案就是 取消上一个请求。下面将介绍如果在 Fetch 中如何取消请求!

Fetch 中如果需要中止未完成请求, 可使用 AbortController, AbortController 接口表示一个控制器对象, 允许你根据需要中止一个或多个 Web 请求

具体使用见下面代码:

  • 先创建了一个 AbortController 实例对象 controller
  • fetch 发起请求过程中, 设置 signal 参数, 让对应 fetch 请求和 AbortController 控制器进行一个绑定
  • 通过定时器, 在 1 秒后通过控制器的 abort() 方法来取消所有和控制器相互关联的请求
  • 最后我们可以在 .catch 中通过判断 Error 对象的 name 属性, 来检测到请求取消的行为
const controller = new AbortController();

fetch(
  "/user/12345", 
  { signal: controller.signal }
).then(response => {
  console.log('请求成功');
}).catch(err => {
  if(err.name === "AbortError") {
		// 请求被手动取消
	} else {
    // 处理正常错误
  }
});

// 1S 后手动取消请求
setTimeout(() => {
  controller.abort();
}, 1000)

二、读取流数据

想必你应该听说过 Server-Sent Events(SSE), 如果还不清楚可以看看我的这篇文章 《在 Koa 中基于 gpt-3.5 模型实现一个最基本的流式问答 DEMO》!!

本质上其实就是后端接口和前端建立了一个单向长连接, 然后后端不断的向前端推送流数据, 前端可通过 SSE 的方式来接收流数据!!

但实际上, 在 Fetch 中其实也是支持实时读取流数据的, 我们可以使用 response.body 属性。它是 ReadableStream 特殊对象, 它允许接口逐块(chunk)为前端提供 body。在 Streams API 规范中有对 ReadableStream 的详细描述!

如下代码所示:

  • await reader.read(): 调用的结果是一个具有两个属性的对象
  • done: 当读取完成时为 true, 否则为 false
  • value: 字节的类型化数组: Uint8Array
const handle = async () => {
  // 1. 请求接口
  const response = await fetch('http://127.0.0.1:4000/demo');
  const reader = response.body.getReader(); // 获取reader
  const decoder = new TextDecoder(); // 文本解码器

  // 2. 循环取值
  while (true) {
    // 取值, value 是后端返回流信息, done 表示后端结束流的输出
    const { value, done } = await reader.read();

    if (done) break;
    // 打印值: 对 value 进行解码
    console.log('推送数据', decoder.decode(value));
  }
};

handle();

三、获取下载文件长度

上文提到 Fetch 可以分片读取流数据, 那么如果我们能够知道要获取的资源大小或者长度, 那么我们就能够通过资源大小以及获取到的数据大小来计算出请求的进度

所以这里其实还需要后端配合, 需要将响应头 Content-Length 设置为资源的一个完整的长度, 这样前端就可以直接通过响应头 Content-Length 来拿到资源的完整长度, 从而计算出当前下载进度

// 1. 启动 fetch, 并获得一个 reader
let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits?per_page=100');
const reader = response.body.getReader();

// 2. 获得总长度(length)
const contentLength = +response.headers.get('Content-Length');

// 3. 读取数据
let receivedLength = 0; // 当前接收到了这么多字节
let chunks = []; // 接收到的二进制块的数组(包括 body)

while(true) {
  const {done, value} = await reader.read();

  if (done) {
    break;
  }

  chunks.push(value);
  receivedLength += value.length;

  console.log(`Received ${receivedLength} of ${contentLength}`)
}

// 4. 将块连接到单个 Uint8Array
let chunksAll = new Uint8Array(receivedLength); // (4.1)
let position = 0;
for(let chunk of chunks) {
  chunksAll.set(chunk, position); // (4.2)
  position += chunk.length;
}

// 5. 解码成字符串
let result = new TextDecoder("utf-8").decode(chunksAll);

// 我们完成啦!
let commits = JSON.parse(result);
alert(commits[0].author.login);

四、上传文件进度条

到目前为止, fetch 方法无法跟踪 上传 进度。相关功能可以使用 XMLHttpRequest 来实现

使用 XMLHttpRequest 对象, 它提供了一个 progress 事件, 该事件在 上传数据时 会不断被触发, 并且在回调函数中我们可以获取当当前上传的一个进度, 具体参考 《MDN - 使用 XMLHttpRequest》

var oReq = new XMLHttpRequest();

oReq.addEventListener("progress", updateProgress);
oReq.addEventListener("load", transferComplete);
oReq.addEventListener("error", transferFailed);
oReq.addEventListener("abort", transferCanceled);

oReq.open();

// ...

// 服务端到客户端的传输进程(下载)
function updateProgress(oEvent) {
  if (oEvent.lengthComputable) {
    var percentComplete = (oEvent.loaded / oEvent.total) * 100;
    // ...
  } else {
    // 总大小未知时不能计算进程信息
  }
}

function transferComplete(evt) {
  console.log("The transfer is complete.");
}

function transferFailed(evt) {
  console.log("An error occurred while transferring the file.");
}

function transferCanceled(evt) {
  console.log("The transfer has been canceled by the user.");
}

五、参考

  • Fetch: 下载进度
  • fetch 下载文件 + 显示进度
  • axios/fetch/XMLHttpRequest怎么取消请求

image

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

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

相关文章

【 纷享销客-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 1. 暴力破解密码,造成用户信息泄露 2. 短信盗刷的安全问题,影响业务及导致用户投诉 3. 带来经济损失,尤其是后付费客户,风险巨大,造…

mobaxterm 中文输入问号解决办法

无论是终端,还是session的name,输入中文都是问号,那么使用以下方法可解决问题 语言设置中找到英文键盘删除即可

Hive的数据存储格式

目录 一、前言 二、存储格式 2.1、文本格式(TextFile) 2.1.1、定义与特点 2.1.2、存储与压缩 2. 1.3、使用场景 2.2、行列式文件(ORCFile) 2.2.1、ORC的结构 2.2.2、ORC的数据类型 2.2.3、ORC的压缩格式 2.2.3、ORC存储…

Spring Boot的核心优势及其应用详解

目录 前言1. Spring Boot的核心优势1.1 启动依赖的集成1.2 自动化配置 2. 内嵌服务器支持2.1 内嵌Tomcat服务器2.2 独立运行与便捷部署 3. 外部配置管理3.1 多环境支持3.2 配置优先级与外部化配置 4. Spring Boot的应用场景4.1 微服务架构4.2 云原生应用 结语 前言 在现代的Ja…

scala---10.30

val、var package com_1030class Person {var name:String"rose"def sum(n1:Int,n2:Int):Int{n1n2} } object Person{def main(args: Array[String]): Unit {//创建person对象var personnew Person()println(person.sum(10,20))//30println(person.name)person.nam…

ubuntu22.04 docker-compose搭建apisix高可用

首先你得先确保每台主机安装了docker和docker-compose 3台主机 没有安装docker和docker-compose的可以看我前两篇博客 可以先克隆仓库 git clone https://github.com/apache/apisix-docker.git 进入example目录 拷贝dashboard配置文件 将all-in-one中apisix-dashboard文件夹拷…

北大计算机考研难度如何?毕业后就业情况怎么样?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 一、总体情况概述 北京大学计算机 2024 届考研整体呈现 “稳中有升” 的态势。在复试分数线方面,无论是学硕(本部)还是专硕(深圳),较 2023 届均有…

黑马JavaWeb-day04

文章目录 mavenmaven 简介maven 安装IDEA集成maven创建maven项目Maven 坐标依赖管理单元测试 Web入门Springboot 入门HTTP协议三层架构分层解耦 I O C & D I IOC\&DI IOC&DI入门 I O C IOC IOC和 D I DI DI详解 maven maven 简介 maven: M a v e n Maven Maven是…

什么是FUSE用户态文件系统

零. 文件系统 1. 为什么要有文件系统 文件系统是操作系统中管理文件和目录的一种机制。它提供了组织、存储、检索和更新文件的方法,主要如下: 数据组织:文件系统将数据组织成文件和目录,使用户能够更方便地管理和查找文件。每个…

品牌怎么找到用户发的优质内容,进行加热、复制?

在,相对传统媒体来说,社交媒体营销具有更高的成本效益。品牌可以通过相对较低的成本达到大量潜在客户,尤其是通过口碑营销和内容分享,可以实现倍增的传播效果。在社媒营销的过程中,去找到与品牌有关的优质、正向内容&a…

梁山派入门指南3——串口使用详解,包括串口发送数据、重定向、中断接收不定长数据、DMA+串口接收不定长数据,以及对应的bsp文件和使用示例

梁山派入门指南3——串口使用详解,包括串口发送数据、重定向、中断接收不定长数据、DMA串口接收不定长数据,以及对应的bsp文件和使用示例 1. 串口发送数据1.1 串口简介1.2 梁山派上的串口开发1.3 bsp_uart文件(只发送不接收,兼容串…

notepad++ compare插件的离线下载和安装

一、离线安装 去改地址找到最新的插件:https://github.com/notepad-plus-plus/nppPluginList/blob/master/doc/plugin_list_x64.md下载之后复制到插件文件夹,插件文件夹的打开方式如下 注意目录: 二、问题汇总 (1&#xff09…

你的网站需要防护吗?

你的网站经常被恶意爬虫,重要数据被批量搬运吗? 你想知道你的网站是不是安全的,有没有被 xss攻击、sql注入、命令注入等等这些乱七八糟的攻击手段攻击吗? 2014年我还是学生的时候,负责学院官网的维护,一…

在postman设置请求里带动态token,看看这两种方法!

问题描述 在使用postman调试接口时,遇到一些需要在请求里加上token的接口,若token出现变化,需要手动修改接口的token值,带来重复的工作量,翻看postman使用手册后,我发现了两种方法可以解决这个问题。 01 …

商家如何在高德地图上申请店铺入驻?

在当今数字化时代,互联网成为了消费者寻找商品和服务的主要渠道。高德地图作为国内领先的地图导航软件,不仅拥有庞大的用户基础,还为商家提供了优质的店铺展示平台。因此,对于实体店商家而言,入驻高德地图是提升店铺曝…

Java并发常见面试题总结(下)

Map(重要) HashMap 和 Hashtable 的区别 线程是否安全: HashMap 是非线程安全的,Hashtable 是线程安全的,因为 Hashtable 内部的方法基本都经过synchronized 修饰。(如果你要保证线程安全的话就使用 ConcurrentHashMa…

数字化导师坚鹏:2025年银行开门红营销规划、方法及案例工作坊

2025年银行开门红营销规划、方法及案例工作坊 ——数字化赋能 新策略启航 开门红必胜 课程背景: 面对即将打响的开门红战役,很多银行存在以下问题: 不知道如何分析银行开门红面临形势及机遇? 不知道如何制定科学高效的开…

普通的Java程序员,需要深究源码吗?

作为Java开发者,面试肯定被问过多线程。对于它,大多数好兄弟面试前都是看看八股文背背面试题以为就OK了;殊不知现在的面试官都是针对一个点往深了问,你要是不懂其中原理,面试就挂了。可能你知道什么是进程什么是线程&a…

ctfshow——web(总结持续更新)

文章目录 1、基础知识部分2、php伪协议2.1 php://input协议2.2 data://text/plain协议 3、webshell连接工具3.1 蚁剑连接一句话木马 4、各个web中间件重要文件路径4.1 Nginx 5、sqlmap使用6、php特性6.1 md5加密漏洞 7、TOP 10漏洞7.1 SQL注入 1、基础知识部分 识别base64编码…

MYSQL---TEST5(Trigger触发器综合练习)

触发器Trigger 数据库mydb16_trigger创建 表的创建 goods create table goods( gid char(8) primary key, #商品号 name varchar(10), #商品名 price decimal(8,2), #价格 num int;) #数量orders create tabl…