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

利用前景：

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

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

axios+stream

1. const axios = require('axios');  
2.   
3. axios({  
4.   method: 'post',  
5.   url: 'YOUR_STREAM_ENDPOINT_URL', // 替换为你的流式接口URL  
6.   responseType: 'stream',
7.   data: {}
8. })  
9. .then(response => {  
10.   // 这里的response.data是一个Node.js的流（Stream）对象  
11.    response.data.on("data", (chunk) => {
12.       console.log(chunk, "data");
13.       // 处理每个数据块，例如写入文件或进行其他操作
14.     });
16.     response.data.on("end", (end) => {
17.       console.log(end, "end");
18.       // 数据接收完毕的处理逻辑
19.     });
21.     response.data.on("error", (error) => {
22.       // 流处理过程中发生错误的处理逻辑
23.     });  
24. });

复制代码

这个方法和网上搜索出来的大多数流式接口方法同等，但是在axios中设置responseType为 "stream"后，控制台会告诫：
The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.
由于axios基于XMLHttpRequest原生，而XMLHttpRequest原生不直接支持responseType: 'stream'这个值。
fetch+stream

曲线救国的方法可以利用fetch来发送哀求：

1. try{
2.     // 发送请求
3.     let response = await fetch("",
4.       {
5.         method: "post",
6.         responseType: "stream",
7.         headers: {
8.           Authorization: "Bearer " + 'token',
9.           "Content-Type": "application/json",
10.         },
11.         body: {},
12.       }
13.     );
14.     // ok字段判断是否成功获取到数据流
15.     if (!response.ok) {
16.       throw new Error("Network response was not ok");
17.     }
18.     // 用来获取一个可读的流的读取器（Reader）以流的方式处理响应体数据
19.     const reader = response.body.getReader();
20.     // 将流中的字节数据解码为文本字符串
21.     const textDecoder = new TextDecoder();
22.     let result = true;
23.     let sqlValue = ''
24.     while (result) {
25.       // done表示流是否已经完成读取  value包含读取到的数据块
26.       const { done, value } = await reader.read();
27.       if (done) {
28.         result = false;
29.         break;
30.       }
31.       // 拿到的value就是后端分段返回的数据，大多是以data:开头的字符串
32.       // 需要通过decode方法处理数据块，例如转换为文本或进行其他操作
33.       const chunkText = textDecoder
34.         .decode(value)
35.         .split("\n")
36.         .forEach((val) => {
37.           if (!val) return;
38.           try {
39.             let text = val.data.result;
40.             console.log(val, text, "输出分段返回的数据");
41.             sqlValue += text;
42.           } catch (err) {}
43.         });
44.     }
45.     console.log(sqlValue,'输出所有返回数据')
46. } catch(err) {}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。