axios / fetch 实现 stream 流式请求

axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求,注意这里需要区分 node 环境和浏览器环境。

axios stream

一、node端

代码演示:

const axios = require('axios');axios({method: 'get',url: 'http://tiven.cn/static/img/axios-stream-01-kcUzNdZO.jpg',responseType: 'stream'
})
.then(response => {response.data.on('data', (chunk) => {// 处理流数据的逻辑});response.data.on('end', () => {// 数据接收完成的逻辑});}); 

二、浏览器端

在浏览器端,axios 是使用 XMLHttpRequest 对象来实现请求,设置 responseType: 'stream' 后会出现以下警告⚠️:
The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.
所以,在浏览器端,我们需要使用浏览器内置API fetch 来实现 stream 流式请求。

代码演示:

async function getStream() {try {let response = await fetch('/api/admin/common/testStream');console.log(response);if (!response.ok) {throw new Error('Network response was not ok');}const reader = response.body.getReader();const textDecoder = new TextDecoder();let result = true;let output = ''while (result) {const { done, value } = await reader.read();if (done) {console.log('Stream ended');result = false;break;}const chunkText = textDecoder.decode(value);output += chunkText;console.log('Received chunk:', chunkText);}} catch (e) {console.log(e);}
}

欢迎访问:天问博客

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

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

相关文章

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用

软考高级系统架构设计师系列论文八十三:论软件设计模式的应用 一、软件设计模式相关知识点二、摘要三、正文四、总结一、软件设计模式相关知识点 软考高级系统架构设计师系列之:面向构件的软件设计,构件平台与典型架构

Spring Boot 整合MyBatis-Plus

😀前言 本篇博文是关于Spring Boot 整合MyBatis-Plus的,希望你能够喜欢😊 🏠个人主页:晨犀主页 🧑个人简介:大家好,我是晨犀,希望我的文章可以帮助到大家,您的…

SD BAPI--SD_SALESDOCUMENT_CREATE 销售订单退/换货

SD BAPI–SD_SALESDOCUMENT_CREATE 销售订单退/换货 FUNCTION zsdfu004. *“---------------------------------------------------------------------- "“本地接口: *” IMPORTING *” VALUE(I_CGSQD) TYPE CHAR20 OPTIONAL *" VALUE(I_ZNAME) TYPE CH…

储能运行约束的Matlab建模方法

最近一段时间有很多人问我最优潮流计算中储能系统的建模方法。部分朋友的问题我回复了,有些没有回消息的,我就不再一一回复了,在这里我写一篇博客统一介绍一下。 1.储能系统介绍 首先,让【GPT】简单介绍一下储能系统:…

Maven解析

目录 Maven的概念 Pom 项目坐标 仓库 Maven环境搭建 安装jdk 配置maven 配置本地仓库地址 配置阿里云 maven 镜像仓库,下载速度更快 在idea中配置maven ​编辑 pom中名词解释 Maven命令 Maven的概念 Maven 是 Apache 软件基金会的一个开源项目,是一个…

PhantomJS+java 后端生成echart图表的图片

PhantomJSjava 后端生成echart图表的图片 前言源码效果实现echarts-convertPhantomJS实现echarts截图得到图片java延时读取base64数据 参考 前言 该项目仅用作个人学习使用 源码 地址 docker镜像: registry.cn-chengdu.aliyuncs.com/qinjie/java-phantomjs:1.0 …

航空电子设备中的TSN通讯架构—直升机

前言 以太网正在迅速取代传统网络,成为航空电子设备和任务系统的核心高速网络。本文提出了以太网时间敏感网络(TSN)在航空电子设备上应用的技术优势问题。在实际应用中,TSN已成为一个具有丰富的机制和协议的工具箱,可满足与时间和可靠性相关…

vue2 computed计算属性,watch侦听器

一、今日学习目标 1.指令补充 指令修饰符v-bind对样式增强的操作v-model应用于其他表单元素 2.computed计算属性 基础语法计算属性vs方法计算属性的完整写法成绩案例 3.watch侦听器 基础写法完整写法 二、指令修饰符 1.什么是指令修饰符? 所谓指令修饰符就是…

windows下cmd快速生成大文件命令

fsutil file createnew [文件名] [文件大小]

卷轴模式解析:如何实现用户留存、引流拓客

随着现代技术的不断发展和数字货币市场的日益成熟,越来越多的数字货币项目被推向市场。而消费者需求日益复杂,单一的玩法模式已经不能满足消费者追求更好购物体验的需求。电商平台需要尊重消费者的意愿,满足消费者的多样化需求,这…

天眼查接口 查询企业信息API 企查查接口

item_get-获得tyc详情 tyc.item_get 公共参数 请求地址: https://api-gw.cn/tyc/item_get 名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中&#xff0…

BLFS学习系列 第26章. 显示管理器 —— 总述

显示管理器(Display Manager)是用于启动图形显示(当前为X服务器)并为窗口管理器或桌面环境提供登录功能的图形程序。 有许多显示管理器可用。一些较为知名的包括:GDM、KDM(已弃用)、LightDM、L…

vue项目权限管理

1.权限分类 权限管理主要分为后端权限和前端权限。后端权限是关键,主要控制对数据库的操作;前端权限为辅,主要表现在对界面显示、路由导航、按钮显示操作与否、无效请求前端拦截和响应拦截提升用户体验等。 2.前端权限主要思路 菜单的控制&…

SpringBoot中Mapper.xml的入参方式

在SpringBoot开发过程中,我们使用 ***Mapper.xml***Mapper.java 来封装对数据库表的 CURD 操作,正常每张表会有一组对应的文件。 一、Mapper常见用法 下面例举一个查询操作: 数据表t_sap_customer,表中有字段id、code、name、c…

2023河南萌新联赛第(六)场:河南理工大学 C - 旅游

2023河南萌新联赛第(六)场:河南理工大学 C - 旅游 时间限制:C/C 1秒,其他语言2秒 空间限制:C/C 262144K,其他语言524288K Special Judge, 64bit IO Format: %lld 题目描述 小C喜欢旅游&#xf…

江西武功山旅游攻略(周末两日游)

一、 往返路线 1: 出发路线 周五晚上上海出发坐火车🚄到江西萍乡(11.5小时,卧铺550左右) 打车到江西武功山景区,120-150元左右,人均30元,1小时10分左右到达 或者 🚗到达萍乡北之后 出站后步行200米到长途汽车站,乘旅游巴士直达武功山游…

HCIP STP协议

STP协议 STP协议概念生成树为什么要用STP STP名词解释根网桥根端口指定端口非指定端口 STP的版本802.1DPVSTPVST 快速生成树 STP协议概念 IEEE 802.1d STP(生成树协议,Spanning-Tree Protocol)协议: ①使冗余端口置于“阻塞状态”…

设计模式(7)模板方法模式

一、定义: 定义一个操作中的算法骨架,而将算法的一些步骤延迟到子类中,使得子类可以不改变该算法结构的情况下重定义该算法的某些特定步骤。它是一种类行为型模式。 //模板方法抽象类 public abstract class AbstractClass {//模板方法publ…

keepalived双机热备,keepalived+lvs(DR)

本节主要学习了keepalivedlvs的作用和配置方法主要配置调度器和web节点,还有keepalived的双击热备,主要内容有概述,安装,功能模块,配置双击热备,验证方法,双击热备的脑裂现象和VIP无法通信。 目…

17.HPA和rancher

文章目录 HPA部署 metrics-server部署HPA Rancher部署Rancherrancher添加集群仪表盘创建 namespace仪表盘创建 Deployments仪表盘创建 service 总结 HPA HPA(Horizontal Pod Autoscaling)Pod 水平自动伸缩,Kubernetes 有一个 HPA 的资源&…