Fetch处理大模型流式数据请求与解析

news2025/1/3 21:19:44

为什么有的大模型可以一次返回多个 data

  1. Server-Sent Events (SSE):允许服务器连续发送多个 data: 行,每个代表一个独立的数据块。

  2. 流式响应:大模型服务通常以流式响应方式返回数据,提高响应速度。

  3. 批量处理:服务器可能将多个数据块打包发送,减少网络开销。

一、问题分析

从上图中只能简易看出这种数据特点前两个特点:
  • 分段返回
  • 每段有多条类似json数据
  • 每段的最后一条json数据有可能不完整

 二、解决方案


 /**
 * 异步函数 fetchEventGpt,用于向服务器发送获取 GPT 数据的请求
 *
 * @param data 要发送的数据对象
 * @returns 返回响应体内容
 */
const fetchEventGpt = async (data: any) => {
  const response = await fetch('/getGPT', {
    method: 'Post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  })
  // 等待直到请求完成
  console.log(response)

  return response.body
}

/**
 * 异步解析流数据并返回 Response 对象。
 *
 * 该函数通过 fetchEventGpt 发送请求,获取 ReadableStream 流数据,然后通过 ReadableStream API 进行解析。
 * 解析过程中,会将流数据分片并尝试解析 JSON 对象,处理可识别内容,并将结果通过 controller.enqueue 返回。
 * 如果解析结束,会清空缓存区并关闭连接。
 *
 * @return {Response} Response 对象,包含解析后的流数据
 */
const parseStream = async () => {
  const response = await fetchEventGpt({
    messages: [
      {
        role: 'user',
        content: '核能',
      },
      {
        role: 'assistant',
        content:
          '<br/>根据您提供的文章内容,以下是对“核能”的相关信息的整理:<br/><br/>1. 知识产权归属 :本文件及其附件的知识产权属于核电运行研究(上海)有限公司和中核()供应链管理有限公司,未经书面许可不得擅自使用。<br/><br/>2. 民用核设施事故责任 :根据《民法典》第一千二百三十七条,民用核设施或运入运出核设施的核材料发生事故造成他人损害的,营运单位应承担侵权责任。但是,如果损害是由战争、武装冲突、暴乱等情形或者受害人故意造成的,则营运单位不承担责任。<br/><br/>3. 招标代理机构招标人 :本次招标的代理机构为中核(上海)供应链管理有限公司,招标人为核电运行研究(上海)有限公司。<br/><br/>4. 招标投标系统检测 :根据第九条,实验室应按照《招标投标系统检测技术规范》等进行检测,检测内容包括数据项、业务规则、功能、接口、性能、安全性、可靠性、易用性、运行环境等,并对相关文档进行审核。<br/><br/>5. 招标项目目标 :项目的目标是突破微波干燥处理核电厂放射性废物的关键技术,研制微波干燥成套装备,解决核电厂放射性废物处理难题。<br/><br/>6. 投标文件提交方式 :电子投标文件应通过中核集团电子采购平台提交,纸质版投标文件提交地点为中核(上海)供应链管理有限公司。<br/><br/>以上内容涉及核能相关的法律法规、招标流程、技术规范等方面,希望能对您。 ',
      },
      {
        role: 'user',
        content: '核能',
      },
    ],
    classify: '',
  }).catch(() => {
    return new Error('请求失败')
  })

  if (!(response instanceof ReadableStream)) {
    return new Error('请求失败')
  }

  const reader = response.getReader() as any
  const decoder = new TextDecoder('utf-8')
  const encoder = new TextEncoder()
  let jsonBuffer = ''

  const readableStream = new ReadableStream({
    async start(controller) {
      function push() {
        reader
          .read()
          .then(({ done, value }: any) => {
            if (done) {
              controller.close()
              return
            }
            // 1、流返回的块数据
            const chunk = decoder.decode(value, { stream: true })
            // 2、更新到缓存区
            jsonBuffer += chunk
            // 3、尝试分片解析json
            let boundaryIndex = 0
            // 当前片内容
            let result = ''
            while ((boundaryIndex = jsonBuffer.indexOf('\n')) >= 0) {
              // 3.1 数据块切片
              const jsonString = jsonBuffer.slice(0, boundaryIndex)
              // 3.2 更新缓存区
              jsonBuffer = jsonBuffer.slice(boundaryIndex + 2)
              try {
                const jsonStr = jsonString.replace('data:', '')
                const jsonObject = JSON.parse(jsonStr) // 解析 JSON
                // 处理可识别内容 - 伪代码,根据实际对象处理
                const content = jsonObject?.data?.content
                controller.enqueue(encoder.encode(content))
                // 解析结束 - 我们业务是根据此字段标识,根据实际情况调整
                if (jsonObject?.data?.isEnd === true) {
                  // 清空缓存区
                  jsonBuffer = ''
                  break
                }
              } catch (error) {
                console.log('json解析出错', error)
              }
            }

            if (jsonBuffer) {
              try {
                const jsonObject = JSON.parse(jsonBuffer)
              } catch (error) {
                console.log(error)
              }
            }
            push()
          })
          .catch((err: any) => {
            controller.error(err)
          })
      }
      push()
    },
  })

  return new Response(readableStream)
}

 三、解析之后的结果

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

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

相关文章

期权懂|个股期权的流动性如何?

锦鲤三三每日分享期权知识&#xff0c;帮助期权新手及时有效地掌握即市趋势与新资讯&#xff01; 个股期权的流动性如何&#xff1f; 个股期权作为场外交易工具&#xff0c;具有较高的灵活性。场外交易意味着交易双方可以直接协商交易条款&#xff0c;这有助于满足不同投资者的…

国产低代码框架zdppy开发笔记002 标准的接口响应

前言 通过前面的学习, 我们已经知道了zdppy_api和zdppy_req的基本用法, 接下来我们会在学习中多次用到这两个框架. 我们已经知道了该如何响应一个字符串,但是我们该如何响应json数据呢? 在zdppy_api中,我们定义了一组规范的API响应, 我们慢慢来看看. 规范的响应 首先来看…

Linux | 零基础Ubuntu解压RaR等压缩包文件

目录 介绍 案例分析 安装工具 解压实践 介绍 RAR是一种专利文件格式&#xff0c;用于数据压缩与归档打包&#xff0c;开发者为尤金罗谢尔&#xff08;俄语&#xff1a;Евгений Лазаревич Рошал&#xff0c;拉丁转写&#xff1a;Yevgeny Lazarevich R…

Python基于卷积神经网络的车牌识别系统开发与实现

1. 简介 车牌识别是人工智能在交通领域的重要应用&#xff0c;广泛用于高速违章检测、停车场管理和智能交通系统等场景。本系统通过基于卷积神经网络&#xff08;CNN&#xff09;的深度学习算法&#xff0c;结合 Python 和 MySQL 实现车牌的快速识别与管理。 系统特点&#x…

stm32内部flash在线读写操作

stm32内部flash在线读写操作 &#x1f4cd;相关开源库文章介绍《STM32 利用FlashDB库实现在线扇区数据管理不丢失》 ✨不同系列&#xff0c;内部flash编程有所区别。例如stm32f1是按照页擦除&#xff0c;半字&#xff08;16bit&#xff09;或全字(32bit)数据写入&#xff1b;st…

IDEA | SpringBoot 项目中使用 Apifox 上传接口

目录 1 安装 Apifox Helper 插件2 获取 Apifox 的 API 访问令牌3 IDEA 中设置 API 访问令牌4 IDEA 中上传接口5 常见问题5.1 如何自动设置目录名5.2 如何自动设置接口名5.3 如何更改上传位置 Apifox 官方指南&#xff1a; https://apifox.com/help/applications-and-p…

Leetcode 10-正则表达式匹配/ 剑指 Offer 19. 正则表达式匹配

给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符 ‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s 的&#xff0c;而不是部分字符串。 题解 字符串匹配多…

学习vue3的笔记

一、vue和react的对比 1、基础介绍 vue&#xff1a;https://cn.vuejs.org/ vue3是2020年创建的 react&#xff1a;https://react.dev/ react是一个2013年开源的JavaScript库&#xff0c;严格意义上来说不是一个框架 2、diff算法 两个框架采用的都是同级对比策略 两节点对…

基于STM32的智能家居环境监控系统设计

目录 引言系统设计 硬件设计软件设计系统功能模块 环境监控模块控制模块显示模块系统实现 硬件实现软件实现系统调试与优化结论与展望 1. 引言 随着智能家居技术的发展&#xff0c;环境监控系统已经成为家居管理的重要组成部分。智能家居环境监控系统通过实时监测室内温度、湿…

【MySQL】搞懂mvcc、read view:MySQL事务原理深度剖析

前言&#xff1a;本节内容是事务里面最难的一部分&#xff0c; 就是理解mvcc快照读和read view。这两个部分需要了解隔离性里面的四种隔离级别。 博主之前讲过&#xff0c;但是担心友友们不了解&#xff0c; 所以这里开头进行了复习。 下面开始我们的学习吧&#xff01; ps&…

jmeter设置tps、响应时间监测时间间隔

jmeter设置tps、响应时间监测时间间隔 思路&#xff1a; 1、设置tps和响应时间插件的采集时间间隔&#xff0c;然后运行jmeter脚本&#xff1b; 2、先按默认配置跑出jtl文件保存下来&#xff0c;再添加tps和响应时间插件&#xff0c;设置采集时间间隔后&#xff0c;导入jtl文件…

Qt 12.30 day5

day5_testppp.proQT core gui texttospeech widget.h#ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent>//定时器事件类 #include <QTimer>//时间事件类 #include <QTime>//时间类 #include <QTextToSpeech>//…

玩转OCR | 腾讯云智能结构化OCR初体验

随着数字化进程的加速&#xff0c;光学字符识别&#xff08;OCR&#xff09;技术已逐渐成为提高企业生产力、优化工作流的重要工具。腾讯云智能结构化OCR凭借其领先的技术、广泛的应用场景和灵活的定制化能力&#xff0c;正在帮助各行业客户更高效地进行文档处理与数据提取。本…

Spring Boot教程之三十九: 使用 Maven 将 Spring Boot 应用程序 Docker 化

如何使用 Maven 将 Spring Boot 应用程序 Docker 化&#xff1f; Docker是一个开源容器化工具&#xff0c;用于在隔离环境中构建、运行和管理应用程序。它方便开发人员捆绑其软件、库和配置文件。Docker 有助于将一个容器与另一个容器隔离。在本文中&#xff0c;为了将Spring B…

模仿微信小程序wx.showModal自定义弹窗,内容可以修改

实现以下弹框样式功能 1.在components新建一个文件showModel.wpy作为组件&#xff0c;复制下面代码 <style lang"less" scoped> .bg_model {display: flex;justify-content: center;align-items: center;// 弹框背景.bg_hui {width: 100%;height: 100%;posi…

缓存管理自动化:JuiceFS 企业版 Cache Group Operator 新特性发布

近期&#xff0c;JuiceFS 企业版推出了 Cache Group Operator&#xff0c;用于自动化创建和管理缓存组集群。Operator 是一种简化 Kubernetes 应用管理的工具&#xff0c;它能够自动化应用程序的生命周期管理任务&#xff0c;使部署、扩展和运维更加高效。 在推出 Operator 之前…

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…

GPU 进阶笔记(二):华为昇腾 910B GPU

大家读完觉得有意义记得关注和点赞&#xff01;&#xff01;&#xff01; 1 术语 1.1 与 NVIDIA 术语对应关系1.2 缩写2 产品与机器 2.1 GPU 产品2.2 训练机器 底座 CPU功耗操作系统2.3 性能3 实探&#xff1a;鲲鹏底座 8*910B GPU 主机 3.1 CPU3.2 网卡和网络3.3 GPU 信息 3.3…

微服务SpringCloud分布式事务之Seata

视频教程&#xff1a;https://www.bilibili.com/video/BV16P63Y3ESq 效果演示 准备的微服务项目调用的链路如下&#xff1a; 文字描述&#xff1a; gateway模块接收到请求&#xff0c;并发送到order订单模块order订单模块接收到请求&#xff0c;新增一个订单数据后发送一个…

HTML——13.超链接

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>超链接</title></head><body><!--超链接:从一个网页链接到另一个网页--><!--语法&#xff1a;<a href"淘宝网链接的地址"> 淘宝…