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) {}