【JS】获取接口返回 EventStream 结构的数据(即接收读取 stream 流)

文章目录

EventStream 是一种服务器推送的数据格式,可以用于实时数据传输。

  • 接口返回的示例图
    在这里插入图片描述

  • 获取示例:

// 这里的 url 为虚拟的,仅供演示用
fetch(`https://test.cn.com/api/agent/2`, {method: 'POST',headers: {'Content-Type': 'application/json',},mode: 'cors',credentials: 'include',body: JSON.stringify({messages: '测试文案,可修改',id: 76,}),}).then((response) => {const decoder = new TextDecoder('utf-8');let buffer = []// 获取可读流const reader = response.body.getReader();// 读取数据function read() {return reader.read().then(({ done, value }) => {if (done) {// 这里就能拿到完成的 bufferconsole.log('Stream 已经读取完毕', buffer);// 如果需要使用到完整的数据,可在这里使用,useData是你要使用数据来干嘛的函数useData(buffer)return buffer;}// 读取每段流的数据块const chunk = decoder.decode(value, { stream: false });// 由于数据块中可能包含多段数据,需要额外拆分成单段数据,具体因单段数据结构而异,这里不演示// 例如正常是:'{a: 1}' 结构,我们使用 JSON.parse 就能转换成对象结构。// 结果返回了 '{a: 1}{a: 2}' 两段拼接在一起的数据,这种需要自行处理为:[{a: 1}, {a: 2}]const list = parseMultiJson(chunk); // 封装一个自定义函数parseMultiJson去处理.// 如果需要每获取一段数据,就使用到一段数据,那就在这里使用,useData是你要使用这段数据来干嘛的函数useData(list)// 把处理好后的数据合并到 buffer中buffer = buffer.concat(chunk);// 继续读取return read();});}// 开始读取return read()}).catch((error) => {console.error('Error:', error);})
  • 上文中用到的parseMultiJson函数:函数链接

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

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

相关文章

Docker部署前后端项目

使用Docker部署前后端项目的全面指南 在现代软件开发中,Docker已经成为了部署应用程序的一种流行方式。它提供了一种轻量级的、可移植的、自给自足的解决方案,可以在不同的环境中一致地运行应用程序。本文将详细介绍如何使用Docker来部署一个包含前端和…

Hudi原理学习

Hudi原理学习 一、Hudi是什么 Hudi(Hadoop Upsert Delete and Incremental)是什么:围绕数据库内核构建的流式数据湖平台(Streaming Data Lake Platform) 简而言之,它是一个对计算和存储进行解耦的数据湖方…

提取图片地理位置

引言 在数字化时代,图片已经成为我们生活中不可或缺的一部分。然而,如何从图片中提取有用的信息,尤其是地址信息,一直是一个具有挑战性的问题。Python作为一种强大的编程语言,为我们提供了丰富的工具和库来解决这个问…

【SGDR】《SGDR:Stochastic Gradient Descent with Warm Restarts》

arXiv-2016 code: https://github.com/loshchil/SGDR/blob/master/SGDR_WRNs.py 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metric5.2 Single-Model Results5.3 Ensemble Results5.4 Experiment…

智慧污水井物联网远程监控案例

智慧污水井物联网远程监控案例 在当今数字化转型的浪潮中,智慧水务已成为城市基础设施建设的重要组成部分。其中,基于物联网技术的智慧污水井远程监控系统以其高效、精准、实时的特性,在提升污水处理效能、保障城市水环境安全、实现精细化管…

每日一题 — 水果成篮

思路: 通过阅读上面文字得出问题:就去只有两个种类的最大长度的连续子数组,这时我们可以想到用哈希表来存储数据,记录数据的种类和每个种类的数量。 解法一:暴力递归(right每次遍历完都回退) 解…

oceanbase一键安装

安装文档:https://www.oceanbase.com/docs/common-oceanbase-database-cn-1000000000642554 软件下载 https://www.oceanbase.com/softwarecenter 安装obd yum install -y yum-utils yum-config-manager --add-repo https://mirrors.aliyun.com/oceanbase/OceanBa…

Hystrixd的概念、作用、使用方法

概念: Hystrix是Netflix开源的一个用于分布式系统的延迟和容错库,其主要目的是提供容错能力,防止分布式系统中的雪崩效应。它通过对服务调用进行隔离、降级、断路器等处理,确保系统在异常情况下依然能够提供基本的功能。 在微服…

今日总结2024/4/12

明天蓝桥杯,祝看到此帖的会的都写出来,不会能暴力出来。 应该是第一次也是最后一次打了 P8602 [2013 省 A] 大臣的旅费 本题是图的邻接表的vector加pair存储形式,用来存储权值 本题概念为树的直径,可以先任选一个点找到距离这个点最远的点…

无线游戏手柄的测试(Windows11系统手柄调试方法)

实物 1、把游戏手柄的无线接收器插入到电脑usb接口中 2、【控制面板】----【查看设备和打印机】 3、【蓝牙和其它设备】--【更多设备和打印机设置】 4、鼠标右键【游戏控制器设置】 5、【属性】 6、【测试】(每个按键是否正常) 7、【校准】(…

稀碎从零算法笔记Day46-LeetCode:互质树

这几天有点懈怠了 题型:树、DFS、BSF、数学 链接:1766. 互质树 - 力扣(LeetCode) 来源:LeetCode 题目描述 给你一个 n 个节点的树(也就是一个无环连通无向图),节点编号从 0 到 …

使用Python快速模拟前端常用页面数据格式

1.模拟表格数据格式 import random data [] num_records 10 for _ in range(num_records):record {}record["name"] "Person" str(random.randint(1, 100)) # 随机生成姓名record["age"] random.randint(20, 60) # 随机生成年龄record[…

从“黑箱”到“透明”:云里物里电子标签助力汽车总装数字化转型

“汽车总装”指“汽车产品(包括整车及总成等)的装配”,是把经检验合格的数以百计、或数以千计的各种零部件按照一定的技术要求组装成整车及发动机、变速器等总成的工艺过程,是汽车产品制造过程中最重要的工艺环节之一。 其中&…

全量知识系统 程序详细设计 之 三种“活物” 之1(QA百度文库 2 )

前面一篇整理完之后&#xff0c;发现有些内容有问题。下面是重新就这个话题沟通的内容。 Q1. 三种 的进一步表述&#xff1a;KE “态”套件-情境演算&#xff08;“特征”Strcture::Class&#xff09;“全局global 垂直 等价” 丄<<Coreference>> (KE主目命名惯式…

算法 囚犯幸存者

题目 主类 public static List<Prisoner> prisoners new ArrayList<Prisoner>(); public static List<Prisoner> remainPrisoners new ArrayList<Prisoner>(); public static Prisoner lastPrisoner null;public static void main(String[] args) …

props组件传值(子串子)

父组件 <version :show"versionShow" closeVersion"versionShow false" data"onData"></version> <footBar url"index" :footShow"footShow"></footBar>第一个version 组件 this.$emit(data, fals…

一款自研Python解释器

项目简介: PikaScript是一个完全重写的超轻量级python引擎,具有完整的解释器,字节码和虚拟机架构,可以在少于4KB的RAM下运行,用于小资源嵌入式系统。相比同类产品,如MicroPython,LuaOS等,资源占用减少85%以上。 入选2021年度 Gitee最有价值开源项目,加入RT-Thread嵌入…

RUST语言之引用与借用

1.通过参数形式使用引用 调用函数并传入引用 //String::from会分配内存来存储RUST语言参考与借用//然后将s指针指向这块内存地址let mut s=String::from("RUST语言参考与借用");println!("{}",s);//调用自定义函数并传入引用let x= reftest(&mut s);…

vue3+ts中判断输入的值是不是经纬度格式

vue3ts中判断输入的值是不是经纬度格式 vue代码&#xff1a; <template #bdjhwz"{ record }"><a-row :gutter"8" v-show"!record.editable"><a-col :span"12"><a-input placeholder"经度" v-model:v…

linux使用docker实现redis主从复制和哨兵模式

目录 1. 拉取redis镜像 2.使用可视化redis工具 3. 设置从redis 4.设置哨兵模式 5. 使用docker-compose快速创建 1. 拉取redis镜像 docker pull redis 默认拉取最新的镜像。 然后pull结束后使用docker images检查镜像&#xff1a; 然后docker run创建container容器 首先…