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

  • 7
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: axios是一个基于Promise的HTTP客户端库,支持在浏览器和Node.js中发送HTTP请求。当使用axios下载文件时,如果需要指定响应的数据类型为blob,则可以使用responseType配置选项。 在使用responseType为blob时,如果后端出现错误,可以通过catch捕获错误信息并处理。例如: ```javascript axios({ method: 'get', url: '/download/file', responseType: 'blob' }).then((response) => { // 处理下载的文件 }).catch((error) => { // 处理捕获到的错误信息 }); ``` 在上述代码中,当后端出现错误时,会触发catch块中的代码,可以在这里处理错误信息,例如提示用户下载失败或重新尝试下载等操作。 ### 回答2: 在使用axios进行文件下载请求时,我们可以通过设置responseType为blob来获取文件的二进制数据。然而,当后端返回的数据不是预期的文件类型时,可能会出现错误。为了捕获后端错误问题,我们可以使用try-catch语句来处理异常。 首先,我们需要设置axios的响应拦截器,用于在请求返回时捕获错误。在拦截器中,我们将判断返回数据的类型,如果不是预期的blob类型,则抛出一个自定义的错误。 ```javascript axios.interceptors.response.use( response => { if (response.config.responseType === 'blob' && response.data.type !== 'application/octet-stream') { throw new Error('后端返回数据异常') } return response }, error => { return Promise.reject(error) } ) ``` 接下来,在发起文件下载请求时,我们可以使用try-catch语句来包裹axios请求,并处理可能抛出的错误。 ```javascript try { const response = await axios.get('/download', { responseType: 'blob' }) // 文件下载成功的逻辑处理 } catch (error) { // 捕获并处理后端错误 console.error(error.message) } ``` 这样,当后端返回的数据不是预期的blob类型时,我们就可以捕获到错误,并进行相应的处理,例如输出错误信息到控制台。 注意,由于axios是基于Promise的异步请求库,我们使用了async/await来进行异步处理。当然,你也可以使用.then()来处理异步请求。以上代码只是一个简单示例,你可以根据自己的需求进行进一步的优化和处理。 ### 回答3: 在使用axios进行文件下载请求时,可以设置responseType为blob来获取二进制数据作为响应。但是在这种情况下,由于后端错误的情况下,返回的响应数据类型可能依然是blob,而不是正常的json数据。因此,需要在前端代码中进行相应的处理来捕获后端错误。 首先,在axios请求中设置responseType为blob: ```javascript axios.get(url, { responseType: 'blob' }) ``` 之后,在返回的响应中,可以通过判断响应的Content-Type来确定响应数据类型。如果是对应的错误类型,则可以通过读取blob数据并进行相应的处理。 ```javascript axios.get(url, { responseType: 'blob' }).then(response => { const contentType = response.headers['content-type']; if (contentType === 'application/json') { // 正常情况 // 处理响应数据 } else { // 错误情况 response.blob().then(blobData => { // 处理错误数据 }); } }).catch(error => { // 请求错误 console.error(error); }); ``` 在错误情况下,使用response.blob()将blob数据转换为对应的Blob对象,并可以进行进一步的操作。比如,可以读取该Blob对象中的错误信息,并根据具体情况进行相应的处理,比如提示错误信息给用户或者进行其他的业务操作。 需要注意的是,设置responseType为blob时,后端返回的响应必须包含相应的Content-Type头部信息,以便前端能正确判断响应数据类型。否则,需要与后端进行沟通,确保正确返回对应的Content-Type信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值