【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.hqwc.cn/news/615209.html

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

相关文章

隐私计算实训营第九讲-隐语多方安全计算在安全核对的行业实践

隐私计算实训营第九讲-隐语多方安全计算在安全核对的行业实践 文章目录 隐私计算实训营第九讲-隐语多方安全计算在安全核对的行业实践1.业务背景:安全核对产生的土壤1.1相关政策出台1.2 数据差异的来源 2.产品方案:从试点到规模化的路3.技术共建&#xf…

12V转5V3A降压恒压WT6019

12V转5V3A降压恒压WT6019 WT6019同步降压电源管理芯片。这个小宝贝啊,不管你怎么折腾它,电流都能稳稳地输出3A,而且效率高得吓人,达到92%呢! 说到它的工作原理,WT6019用的是电流模式控制,这意…

[BT]BUUCTF刷题第15天(4.11)

第15天(共3题) Web [WUSTCTF2020]朴实无华 打开网站没有发现可用信息,根据其他人题解了解到网站标题带有bot字样,因此尝试查看robots.txt文件 发现新的文件 User-agent: * Disallow: /fAke_f1agggg.php访问发现并无flag 但此…

桥接模式:解耦抽象与实现的设计艺术

在软件设计中,桥接模式是一种结构型设计模式,旨在将抽象部分与其实现部分分离,使它们可以独立地变化。这种模式通过提供更加灵活的代码结构帮助软件开发人员处理不断变化的需求,特别是在涉及多平台应用开发时。本文将详细介绍桥接…

Rocky(Centos)数据库等高并发或高io应用linux系统调优,及硬件问题排查(含网络、磁盘、系统监控)

一、系统参数优化 默认的最大打开文件数是1024.不满足生产环境的要求。按照如下配置: 1、修改 systemctl管理的 servie 资源限制 编辑/etc/systemd/system.conf # 全局的打开文件数 DefaultLimitNOFILE2097152 # 全局打开进程数 DefaultLimitNPROC655352、调整系…

【C++类和对象】上篇

💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…

Git 解决分支冲突

一、前言 一直习惯于 add commit push 的三步走,偶然间看到了一个评论说在 push 之前还有一个 pull,小小的疑问就埋在了我的心里。于是我就先了解了 pull 的工作原理,就是先拉取代码(fetch)再合并分支(mer…

rabbitmq安装rabbitmq-delayed-message-exchange插件

下载地址:Community Plugins | RabbitMQ 上传到rabbitmq安装目录的/plugins目录下 我的是/usr/lcoal/rabbitmq/plugins/ 直接安装 [rootk8s-node1 rabbitmq]# rabbitmq-plugins enable rabbitmq_delayed_message_exchange [rootk8s-node1 rabbitmq]# rabbitmq-pl…

科大讯飞“杀入”千亿规模市场,给100多家企业配上了AI程序员

Forrester预测到2028年,低代码市场将增长到300亿美元。Mordor Intelligence的报告指出,低代码开发平台市场规模预计到2024年为161.7亿美元,预计到2029年将达到621.5亿美元,在预测期内(2024-2029年)复合年增…

Windows下使用PanguVip实现浮动IP

在某些高可用场景下,我们往往需要使用浮动IP来进行实际访问的切换,比如为了保证Web应用的高可用,当主节点宕机后,我们将浮动IP切换到备节点,那么备节点就继续可以提供服务,在linux下我们可以使用keepalived…

前端三剑客 —— JavaScript (第六节)

目录 内容回顾 BOM编程 DOM编程* document对象 document对象的属性 document对象的方法 DOM对象节点 操作DOM对象内容 操作DOM对象的属性 --- DOM对象.属性名称 --- DOM对象[属性名称] --- 调用系统API (Application Program interface)&#…

逆向案例十六——简单webpack逆向,财联社信息

网址链接:财联社A股24小时电报-上市公司动态-今日股市行情报道 数据包sign参数为加密,可以直接搜索找参数的位置,搜索不到的情况下,在断点跟栈: 确定js文件所在位置,并打上断点。 点击加载刷新页面。可以发…