axios设置 responseType为 “stream“流式获取后端数据_axios 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) {}