axios / fetch 实现 stream 流式请求

最新推荐文章于 2025-03-20 17:38:21 发布

天問_

最新推荐文章于 2025-03-20 17:38:21 发布

阅读量1.3w

点赞数 8

分类专栏：大前端文章标签： Axios HTTP fetch

本文链接：https://blog.csdn.net/tiven_/article/details/132367904

版权

大前端专栏收录该内容

67 篇文章

订阅专栏

本文介绍了如何在axios中实现node环境下的流式请求，并指出在浏览器端需使用fetchAPI，因为axios不支持直接设置responseType为stream。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios 是一个支持node端和浏览器端的易用、简洁且高效的http库。本文主要介绍 axios 如何实现 stream 流式请求，注意这里需要区分 node 环境和浏览器环境。

axios stream

一、node端

代码演示：

const axios = require('axios');

axios({
  method: 'get',
  url: 'http://tiven.cn/static/img/axios-stream-01-kcUzNdZO.jpg',
  responseType: 'stream'
})
.then(response => {
  
  response.data.on('data', (chunk) => {
    // 处理流数据的逻辑
  });

  response.data.on('end', () => {
    // 数据接收完成的逻辑
  });

});

二、浏览器端

在浏览器端，axios 是使用 XMLHttpRequest 对象来实现请求，设置 responseType: 'stream' 后会出现以下警告⚠️：
The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.
所以，在浏览器端，我们需要使用浏览器内置API fetch 来实现 stream 流式请求。

代码演示：

async function getStream() {
  try {
    let response = await fetch('/api/admin/common/testStream');
    console.log(response);
    
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    const reader = response.body.getReader();
    const textDecoder = new TextDecoder();
    let result = true;
    let output = ''

    while (result) {
      const { done, value } = await reader.read();

      if (done) {
        console.log('Stream ended');
        result = false;
        break;
      }

      const chunkText = textDecoder.decode(value);
      output += chunkText;
      console.log('Received chunk:', chunkText);
    }
  } catch (e) {
    console.log(e);
  }
}

欢迎访问：天问博客