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

news2024/11/25 10:24:21

文章目录

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) {
              // 这里就能拿到完成的 buffer
              console.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.coloradmin.cn/o/1591370.html

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

相关文章

EaticSearch学习

ES学习目标 1、全文检索 2、ES介绍 2.1 安装(docker) docker pull elasticsearch:7.14.0 docker run -d -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" elasticsearch:7.14.0初步检索 1、_cat GET /_cat/nodes:查看所…

RocketMQ安装部署+简单实战开发

文章目录 1.简介、安装部署2.Springboot集成RocketMQ2.1.添加maven依赖:2.2.RocketMQ配置生产者配置消费者配置 2.3.生产者(发送消息)2.4.消费者(接收消息) 3.实战结果3.1.消费者服务3.2.生产者服务3.3.运行日志生产日…

【SpringBoot】-- 使用minio对象存储服务实现上传图片

目录 一、安装minio 拉取镜像 启动 查看 进入登录页面 创建bucket 二、安装miniomc 三、代码 application.yml MinioUtil Controller 四、拓展 以下基于云服务和docker使用minio服务 一、安装minio Minio 是一个开源的对象存储服务器。它允许用户在私有云环境中建…

【vue】watch 侦听器

watch&#xff1a;可监听值的变化&#xff0c;旧值和新值 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><titl…

蓝桥杯嵌入式(G431)备赛——最后一晚查漏补缺

蓝桥杯嵌入式&#xff08;G431&#xff09;备赛笔记——初始化cubeMX 蓝桥杯嵌入式&#xff08;G431&#xff09;备赛笔记——LED 蓝桥杯嵌入式&#xff08;G431&#xff09;备赛笔记——按键模块设计 蓝桥杯嵌入式&#xff08;G431&#xff09;备赛笔记——LCD按键 蓝桥杯…

2023年度编程语言将花落谁家

2023年度编程语言将花落谁家 TIOBE的预测你预测年度最受欢迎的编程语言会是什么&#xff1f;TIOBE 认为 C# 最有可能成为年度编程语言&#xff0c;你同意吗&#xff1f;为什么&#xff1f;AI时代已经到来&#xff0c;你有学习新语言的打算吗&#xff1f; 以下是来自年度编程语言…

Android 纵向双选日历

这个日历的布局分两部分&#xff0c;一部分是显示星期几的LinearLayout&#xff0c;另外就是一个RecyclerView&#xff0c;负责纵向滚动了。 工具类&#xff1a; implementation com.blankj:utilcode:1.17.3上activity_calendar代码&#xff1a; <?xml version"1.0&…

Springboot+Vue项目-基于Java+MySQL的在线视频教育平台系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

中仕公考:非师范生能考教师编吗?

非师范生能考教师编吗?关于这个问题&#xff0c;首要条件是必须持有教师资格证。只要符合招聘条件&#xff0c;非师范专业背景的考生同样有资格报名参加教师编制考试。具体要求如下&#xff1a; 1. 年龄要求&#xff1a;申请人需年满35岁以下&#xff0c;对于特定职位&#x…

Elastic 线下 Meetup 将于 2024 年 4 月 27 号在重庆举办

2024 Elastic Meetup 重庆站活动&#xff0c;由 Elastic、新智锦绣联合举办&#xff0c;现诚邀广大技术爱好者及开发者参加。 活动时间 2024年4月27日 13:30-18:00 活动地点 中国重庆 沙坪坝区学城大道62-1号研发楼一期b3栋1楼(瑞幸咖啡旁&#xff09; 活动流程 14:00-14:50…

多因子模型的数据处理

优质博文&#xff1a;IT-BLOG-CN 数据处理的基本目的是从多量的、可能是杂乱无章的、难以理解的数据中抽取并推导出有价值、有意义的数据。特别是金融数据&#xff0c;存在数据缺失&#xff0c;不完整以及极端异常值等问题&#xff0c;对于我们的分析和建模影响很多。 对于我…

【新版HI3559AV100开发注意事项(四)】

新版HI3559AV100开发注意事项&#xff08;四&#xff09; 三十、HI3559A参数中对输入分辨率限制的原因是&#xff1f; 答&#xff1a;分辨率限制有两个来源&#xff1a; 一个是时钟频率最高为600M&#xff0c;开启一拍两像素之后相当于1200M。你这个数据量太大了&#xff0c;6…

(学习日记)2024.04.17:UCOSIII第四十五节:中断管理

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

微信小程序开发学习笔记——4.9【小案例】开启下拉刷新页面enablePullDownRefresh

>>跟着b站up主“咸虾米_”学习微信小程序开发中&#xff0c;把学习记录存到这方便后续查找。 课程连接&#xff1a;4.9.【小案例】开启下拉刷新页面enablePullDownRefresh_哔哩哔哩_bilibili 一、api2.json 小程序配置 / 页面配置 (qq.com) {"usingComponents&q…

抖音小店是什么?个人店、个体店、企业店,新手商家该如何选择?

大家好&#xff0c;我是电商花花。 抖音小店这两年来说都是一个发展不错的电商项目&#xff0c;凭借着直播电商的快速发展&#xff0c;让更多人看到了抖音小店其中的红利&#xff0c;吸引着商家入驻。 抖音小店是什么&#xff1f; 很多人会把抖音小店和达人橱窗搞混&#xff…

Harmony鸿蒙南向驱动开发-Regulator接口使用

功能简介 Regulator模块用于控制系统中某些设备的电压/电流供应。在嵌入式系统&#xff08;尤其是手机&#xff09;中&#xff0c;控制耗电量很重要&#xff0c;直接影响到电池的续航时间。所以&#xff0c;如果系统中某一个模块暂时不需要使用&#xff0c;就可以通过Regulato…

LC 515.在每个树行中找最大值

515. 在每个树行中找最大值 给定一棵二叉树的根节点 root &#xff0c;请找出该二叉树中每一层的最大值。 示例1&#xff1a; 输入: root [1,3,2,5,3,null,9] 输出: [1,3,9] 示例2&#xff1a; 输入: root [1,2,3] 输出: [1,3] 提示&#xff1a; 二叉树的节点个数的范围是…

ubuntu下NTFS分区无法访问挂载-解决办法!

Ubuntu系统下&#xff0c;有的时候发现&#xff0c;挂载的NTFS文件系统硬盘无法访问。点击弹出类似问题&#xff1a; Error mounting /dev/sda1 at /media/root/新加卷: Command-line mount -t "ntfs" -o "uhelperudisks2,nodev,nosuid,uid0,gid0" "/…

LeetCode-416. 分割等和子集【数组 动态规划】

LeetCode-416. 分割等和子集【数组 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;01背包问题&#xff0c;动规五部曲解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分…

云计算:OVS 集群 使用 Geneve 流表

目录 一、实验 1.环境 2.OVS 集群 使用 Geneve 流表 二、问题 1.VXLAN与Geneve区别 一、实验 1.环境 (1) 主机 表1 宿主机 主机架构软件IP网卡备注ovs_controller控制端 karaf 0.7.3 192.168.204.63 1个NAT网卡 &#xff08;204网段&#xff09; 已部署ovs_server01服务…