欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 能源 > axios设置 responseType为 “stream“流式获取后端数据

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

2025/4/3 14:52:49 来源:https://blog.csdn.net/SunFlower914/article/details/139459608  浏览:    关键词: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) {}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词