ToB企服应用市场:ToB评测及商务社交产业平台

标题: axios设置 responseType为 “stream“流式获取后端数据 [打印本页]
作者: 拉不拉稀肚拉稀    时间: 2024-6-8 19:40
标题: 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企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4