fast-api后端 + fetch 前端流式文字响应

fast-api后端 + fetch 前端流式文字响应

  • fast-api后台接口
    • 流式响应
  • 前端
    • fetch 流式文本数据处理

fast-api后台接口

流式响应

from fastapi.responses import StreamingResponse
from tqdm import tqdm
from pydantic import BaseModelclass ItemDataSingle(BaseModel):data: strasync def responce_text_streammer(data):   _data = data.data# 假设你发送过来的data = json.loads(_data)for dat in tqdm(data):dat = your_worker_function(dat)# 给每条数据一个分割标识yield json.dumps(dat,ensure_ascii=False) + "@@+" @app.post("/batchtext2furniture")
async def batchtext2furniture(data: ItemDataSingle,):""":arg"""# mongodbreturn StreamingResponse(responce_text_streammer(data))

前端

fetch 流式文本数据处理

var req_data = {data: JSON.stringify({}),//youdata};
let charsReceived = 0;
const startTime = Date.now();
let result = "";
let num_results = 0;
const decoder = new TextDecoder("utf-8");
fetch("/batchtext2furniture", {method: "POST",headers: { "Content-Type": "application/json" },body: req_data,stream: true,}).then((response) => {const reader = response.body.getReader();return new ReadableStream({async start(controller) {let resev_s = true;while (resev_s) {const { done, value } = await reader.read();if (done) {controller.close();resev_s = false;break;}charsReceived += value.length;const chunk = value;result += decoder.decode(chunk);console.log("Received " + charsReceived + " characters");const responseTime = (Date.now() - startTime) / 1000;num_results += 1;if (result.endsWith("@@+")) {console.log("接收到分割符号");let parts = result.split("@@+");let lastPart = parts[parts.length - 2];// 解析 JSONvar json_data = JSON.parse(lastPart);// 前端具体对每段数据的处理// ......} else {console.log("not endswith @@+");}console.log("数据赋值完成" );controller.enqueue(value);}},});}).then((stream) => {console.log(stream);console.log(stream, "stream");console.log(stream.size);}).catch((error) => {console.error("Error:", error);}).finally(() => {yourfinallyworker();});const endTime = Date.now();console.log(endTime - startTime, "搜索时间");}

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

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

相关文章

元器件封装

元器件封装类型 为什么越来越多用贴片元件,而不是插件元件 为什么越来越多用贴片元件,而不是插件元件 1.体积小、质量小、容易保存和运输; 2.容易焊接和拆卸。抗震效果好。 贴片元件不用过孔,用锡少。直插元件最麻烦的就是拆卸&a…

C++ 的发展

目录 C 的发展总结:​编辑 1. C 的早期发展(1979-1985) 2. C 标准化过程(1985-1998) 3. C 标准演化(2003-2011) 4. C11(2011年) 5. C14(2014年&#xf…

【MySQL】MySQL在Centos环境安装

🔥个人主页: Forcible Bug Maker 🔥专栏: MySQL 目录 🌈前言🔥卸载不要的环境🔥检查系统安装包🔥卸载这些默认安装包🔥获取mysql官方yum源🔥安装mysql yum源…

【算法】动态规划中01背包问题解析

📢博客主页:https://blog.csdn.net/2301_779549673 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! 📢本文由 JohnKi 原创,首发于 CSDN🙉 📢未来很长&#…

Linux开发工具:Vim 与 gcc,打造高效编程的魔法双剑

文章目录 一、初识Vim模式 二、vim基本操作2.1基础操作2.2命令模式/正常模式2.2.1光标定位2.2.2复制粘贴、删除2.2.3撤销2.2.4替换字符2.2.5替换模式 2.3底行模式2.3.1退出vim和**保存文件**2.3.2定位文本字符串2.3.3命令2.3.4实现分屏2.3.5替换指定字符串 2.4补充指令2.4.1视图…

[JAVA]MyBatis框架—如何获取SqlSession对象实现数据交互(基础篇)

假设我们要查询数据库的用户信息,在MyBatis框架中,首先需要通过SqlSessionFactory创建SqlSession,然后才能使用SqlSession获取对应的Mapper接口,进而执行查询操作 在前一章我们学习了如何创建MyBatis的配置文件mybatis.config.xm…

Linux基础开发工具使用

目录 1. 软件包管理器yum 1.1 概念介绍 1.2 更换镜像源(可选) 1.3 工具的搜索/查看/安装/卸载 1.4 优势 2. vim编辑器 2.1 vi和vim 2.2 三种常用模式和操作 2.3 配置vim 3. Linux编译器-gcc/g 4. Linux调试器-gdb 5. make和Makefile 6.…

群控系统服务端开发模式-应用开发-前端图片格式功能开发

一、添加视图 在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下&#xff0c;新建index.vue&#xff0c;代码如下 <template><div class"app-container"><div class"filter-container" style"float:left;"><…

【WPF】Prism库学习(一)

Prism介绍 1. Prism框架概述&#xff1a; Prism是一个用于构建松耦合、可维护和可测试的XAML应用程序的框架。它支持WPF、.NET MAUI、Uno Platform和Xamarin Forms等多个平台。对于每个平台&#xff0c;Prism都有单独的发布版本&#xff0c;并且它们在不同的时间线上独立开发。…

The Planets: Earth -- 练习

环境搭建 该靶场环境来自Vulnhub -------- Difficulty: Easy 靶机与Kali的IP地址只需要在同一局域网即可&#xff08;同一个网段,即两虚拟机处于同一网络模式&#xff09;&#xff0c;所以需要调整KALI和靶场的网络模式&#xff0c;为了方便测试本地采用NAT模式。 注意&…

C/C++语言基础--initializer_list表达式、tuple元组、pair对组简介

本专栏目的 更新C/C的基础语法&#xff0c;包括C的一些新特性 前言 initializer_list表达式、tuple元组、pair对组再C日常还是比较常用的&#xff0c;尤其是对组在刷算法还是挺好用的&#xff0c;这里做一个简介&#xff1b;这三个语法结合C17的结构化绑定会更好用&#xff…

『VUE』27. 透传属性与inheritAttrs(详细图文注释)

目录 什么是透传属性&#xff08;Forwarding Attributes&#xff09;使用条件唯一根节点禁用透传属性继承总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 什么是透传属性&#xff08;Forwarding Attributes&#xff09; 在 V…

演员王子辰—专注革命题材 《前行者》后再出发

2021年10月22日在北京卫视播出的由张鲁一、聂远等人主演的电视剧《前行者》&#xff0c;讲述了在二十世纪三十年代初&#xff0c;因叛徒出卖&#xff0c;我上海地下党组织遭到严重破坏&#xff0c;革命事业陷入一片白色恐怖之中。我党情报员马天目刚从法国归来&#xff0c;临危…

【电脑】解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉”

【电脑】解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉” 零、报错 在使用DiskGenius对磁盘分区进行调整时&#xff0c;DiskGenius检查出磁盘报错&#xff0c;报错信息&#xff1a;文件使用的簇被标记为空闲或与其它文件有交叉&#xff0c;…

远程控制步骤

当远在千里之外的朋友想求助你帮他找到他电脑上的文件、或者是给他安装软件时。但是你给他说了他又找不到&#xff0c;那么这时你就可以通过控制对方的电脑去做一系列的操作。 如何远程控制对方的电脑非常关键。 方法一&#xff08;Windows自带远程桌面功能&#xff09;&#…

蓝桥杯——数组

1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…

【大数据技术基础 | 实验十】Hive实验:部署Hive

文章目录 一、实验目的二、实验要求三、实验原理四、实验环境五、实验内容和步骤&#xff08;一&#xff09;安装部署&#xff08;二&#xff09;配置HDFS&#xff08;三&#xff09;启动Hive 六、实验结果&#xff08;一&#xff09;启动结果&#xff08;二&#xff09;Hive基…

MQTT从入门到精通之MQTT Dashboard

MQTT Dashboard 1 Dashboard简介 EMQX 提供了一个内置的管理控制台&#xff0c;即 EMQX Dashboard。方便用户通过 Web 页面就能轻松管理和监控 EMQX 集群&#xff0c;并配置和使用所需的各项功能。 访问地址&#xff1a;http://ip:18083 首次登录访问账号&#xff1a;admin…

[Codesys]常用功能块应用分享-BMOV功能块功能介绍及其使用实例说明

官方说明 功能说明 参数 类型 功能 pbyDataSrcPOINTER TO BYTE指向源数组指针uiSizeUINT要移动数据的BYTE数pbyDataDesPOINTER TO BYTE指向目标数组指针 实例应用-ST IF SYSTEM_CLOCK.AlwaysTrue THENCASE iAutoState OF0: //读写完成信号在下次读写信号的上升沿或复位信号…

推荐一款流程图和图表绘制工具:WizFlow Flowcharter Pro

WizFlow Flowcharter是一款易于使用、功能丰富的Windows流程图和图表绘制工具。它允许用户使用超过一百种预定义的形状和箭头定义形状“样式”。您可以将自己的样式保存在图表模板中&#xff0c;以建立自己的绘图方法。WizFlow附带了完整的流程图模板&#xff0c;以帮助您入门。…