axios设置 responseType为 “stream“流式获取后端数据

使用前景:

工作过程中遇到了后端接口响应过慢,前端界面一致loading的情况,这个时候可以尝试采用将Axios的responseType参数被设置为'stream'类型实现。

stream介绍:

stream类型意味着你希望服务器响应的数据以Node.js流(stream)的形式返回,而不是作为JSON、文本或其他类型的响应体。使用它的好处是可以避免一次性加载整个响应体,避免页面一直无响应,同时stream在处理大文件、实时数据传输或需要直接操作数据流的场景中非常有用。

使用:

axios+stream

const axios = require('axios');  axios({  method: 'post',  url: 'YOUR_STREAM_ENDPOINT_URL', // 替换为你的流式接口URL  responseType: 'stream',data: {}
})  
.then(response => {  // 这里的response.data是一个Node.js的流(Stream)对象  response.data.on("data", (chunk) => {console.log(chunk, "data");// 处理每个数据块,例如写入文件或进行其他操作});response.data.on("end", (end) => {console.log(end, "end");// 数据接收完毕的处理逻辑});response.data.on("error", (error) => {// 流处理过程中发生错误的处理逻辑});  
});

这个方法和网上搜索出来的大多数流式接口方法一致,但是在axios中设置responseType为 "stream"后,控制台会警告:

The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.

因为axios基于XMLHttpRequest原生,而XMLHttpRequest原生不直接支持responseType: 'stream'这个值。

fetch+stream

曲线救国的方法可以使用fetch来发送请求:

try{// 发送请求let response = await fetch("",{method: "post",responseType: "stream",headers: {Authorization: "Bearer " + 'token',"Content-Type": "application/json",},body: {},});// ok字段判断是否成功获取到数据流if (!response.ok) {throw new Error("Network response was not ok");}// 用来获取一个可读的流的读取器(Reader)以流的方式处理响应体数据const reader = response.body.getReader();// 将流中的字节数据解码为文本字符串const textDecoder = new TextDecoder();let result = true;let sqlValue = ''while (result) {// done表示流是否已经完成读取  value包含读取到的数据块const { done, value } = await reader.read();if (done) {result = false;break;}// 拿到的value就是后端分段返回的数据,大多是以data:开头的字符串// 需要通过decode方法处理数据块,例如转换为文本或进行其他操作const chunkText = textDecoder.decode(value).split("\n").forEach((val) => {if (!val) return;try {let text = val.data.result;console.log(val, text, "输出分段返回的数据");sqlValue += text;} catch (err) {}});}console.log(sqlValue,'输出所有返回数据')
} catch(err) {}

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

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

相关文章

Vue-App桌面程序列表

Vue-App桌面程序列表 文章说明讲解视频核心代码效果展示项目链接 文章说明 采用Vue实现PC端的桌面程序列表,采用HBuilderX将程序转化为5App,实现移动端的适配;支持桌面打开新应用,底部导航展示当前应用列表,可切换或关…

php质量工具系列之PHPCPD

PHPCPD 用于检测重复代码,直观的说就是复制粘贴再稍微改改 该工具作者已经 停止维护 安装 composer global require --dev sebastian/phpcpd执行 phpcpd --log-pmd phpcpd_result.xml ./app参数介绍 --log-pmd 将结果保存在phpcpd_result.xml 中 ./app 是phpcpd扫…

spring cloud openFegin 如何通过配置指定访问本地服务

需求 本地联调的时候,不想把本服务注册到开发环境的nacos中,但是又想用到开发环境的其他服务,又不想影响到开发环境的使用(因为服务注册上去,默认就自动负载均衡)。 解决方案 利用配置的方式指定具体的ip spring:cloud:loadbalan…

Linux系统之部署Blog-Index导航页

Linux系统之部署Blog-Index导航页 一、Blog-Index介绍1.1 Blog-Index简介1.2 Blog-Index特点1.3 Blog-Index使用场景 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍2.3 Yarn介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统是否安装yarn 四…

VS-qt中运行程序时报错:fatal error RC1015:cannot open include file ‘afxres.h‘

开发环境:VS2015 qt5.12.10 点击运行时报错如下: 搜索了下afxres.h文件,发现位置如下: 看样子是VS中少安装了部分模块导致的,,看了同事的电脑,该文件应该是在以下目录中的: 所…

如何在Python中向Word文档添加段落

如何在Python中向Word文档添加段落 添加段落代码解析添加前与添加后 在这篇博客文章中,我们使用Python向Word文档添加段落。 添加段落 from docx import Document# 打开一个现有的Word文档 doc Document(rC:\Users\Administrator\Desktop\Word文档\example.docx)…

生成式人工智能如何运作?

一、简述 生成式人工智能是一种可用于创建内容(包括对话、故事、图像、视频和音乐)的人工智能。人工智能技术试图在图像识别、自然语言处理(NLP)和翻译等非传统计算任务中模仿人类智能。生成式人工智能是人工智能的发展方向。您可…

Ubuntu22.04下源码编译安装pythonocc-7.8

Ubuntu22.04下源码编译安装pythonocc-7.8 本文介绍Ubuntu下手动编译安装pythonocc,及安装过程遇到的各种坑 基本依赖安装 sudo apt-get update sudo apt-get install -y wget libglu1-mesa-dev libgl1-mesa-dev libxmu-dev libxi-dev build-essential cmake libf…

如何提高网站收录?

GSI服务就是专门干这个的,这个服务用的是光算科技自己研发的GPC爬虫池系统。这个系统通过建立一个庞大的站群和复杂的链接结构,来吸引谷歌的爬虫。这样一来,你的网站就能更频繁地被谷歌的爬虫访问,从而提高被收录的机会。 说到效…

【机器学习】【深度学习】优化器(Optimizer)

一、概述 什么是优化器? 优化器(Optimizer)是深度学习中的一个核心的概念,用于更新神经网络的权重,以减少或最小化损失函数(loss function)的值。损失函数衡量了模型的预测值与真实值之间的差异,而优化器的目标是通过调整网络参…

CPU内部结构窥探·「3」

加法器的工作原理:从简单的逻辑到现代计算 我们在cpu内部结构窥探「1」中提到CPU内部ALU的核心部件就是运算器,今天就以加法器为例,来讲解我们ALU中算数逻辑运算的过程。 1.认识数字电路中的各种门电路 2. 什么是加法器? 加法器…

Web UI自动化测试_Selenium+Python

一、概述: 1.1 Selenium是什么 Selenium 是一个基于浏览器的自动化工具,可以跨平台、跨浏览器使用。 Selenium 主要包括三部分: 1、Selenium IDE: Firefox 浏览器的一个插件(扩展),它可以进行…

如何检测UV胶的均匀性?

如何检测UV胶的均匀性? 检测UV胶的均匀性可以通过以下几种方法来实现: 肉眼目视检查: 这是最简单直接的方法。将UV胶涂在表面上,使用裸眼观察胶层的表面。特别注意是否存在气泡、颜色不均匀、裂纹或其他明显的不均匀性。如凹凸不…

【C#】C#读写Excel文件

1.工具库选择 使用EPPlus读取Excel文件,在visual studio2022中安装最新NuGet。 2.读文件测试 using OfficeOpenXml; using OfficeOpenXml.Packaging.Ionic.Zip; using OfficeOpenXml.Style; using System; using System.Collections.Generic; using System.IO; u…

异步复位和同步释放

文章目录 前言一、为什么需要复位呢?二、同步复位1. 同步复位定义2. 同步复位的实现3. 同步复位的优点和缺点同步复位优点同步复位缺点 三、异步复位1. 异步复位定义2. 异步复位的实现3. 异步复位的优点和缺点异步复位优点异步复位缺点 四、异步复位同步释放1. reco…

Html/HTML5常用标签的学习

课程目标 项目实战,肯定就需要静态网页。朝着做项目方式去学习静态网页。 01、编写第一个html工程结构化 cssjsimages/imgindex.html 归档存储和结构清晰就可以。 02、HTML标签分类 认知:标签为什么要分类,原因因为:分门别类…

关于怎么用Cubemx生成的USBHID设备实现读取一体的鼠标键盘设备(改进版)

主要最近做了一个要用STM32实现读取鼠标键盘一体的那种USB设备,STM32的界面上要和电脑一样的能通过这个USB接口实现鼠标移动,键盘的按键。然后我就很自然的去参考了正点原子的例程,可是找了一圈,发现正点原子好像用的库函数&#…

【计算机网络】对应用层协议中HTTPS协议的总结

˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好,我是xiaoxie.希望你看完之后,有不足之处请多多谅解,让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN 如…

SHELL脚本学习(五)用户输入

获取用户输入 1、基本的读取 read命令从标准或其他文件描述符读取数据,获取输入后,read命令将值存入变量中。 命令格式: read variable 选项-p:提示信息 #!/usr/bin/bash read -p "Enter your name:" name echo hello …

Oracle的优化器

sql优化第一步:搞懂Oracle中的SQL的执行过程 从图中我们可以看出SQL语句在Oracle中经历了以下的几个步骤: 语法检查:检查SQL拼写是否正确,如果不正确,Oracle会报语法错误。 语义检查:检查SQL中的访问对象…