axios / fetch 实现 stream 流式请求

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

一、node端

代码演示:

js 复制代码
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 流式请求。

代码演示:

js 复制代码
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);
  }
}

欢迎访问:天问博客

相关推荐
ZHOU_WUYI1 天前
React 中使用 Axios 进行 HTTP 请求
javascript·react.js·http
可涵不会debug2 天前
【Linux|计算机网络】HTTPS工作原理与安全机制详解
linux·网络协议·http·网络安全·https
lu云之东2 天前
Harbor2.11.1生成自签证和配置HTTPS访问
网络协议·http·docker·https·harbor
helloWorldZMY2 天前
超文本传输协议(HTTP)与超文本传输安全协议(HTTPS)
网络协议·计算机网络·http·https
江河湖海2 天前
使用Go语言实现一个简单的HTTP服务器,提供静态文件服务。
服务器·http·golang
道法自然04022 天前
Ethernet 系列(9)-- 基础学习::ICMP
网络·学习·http
დ旧言~2 天前
【网络】数据链路层协议——以太网,ARP协议
开发语言·网络·网络协议·http·https·php
风霜不见闲沉月3 天前
http.FileServer静态文件服务处理器和模板引擎使用
http·ios·golang
渔舟唱晚&3 天前
HTTP keep-alive和TCP keepalive详解
网络协议·tcp/ip·http
YD12183 天前
HTTP 1.0、HTTP 1.1 和 HTTP 2.0 区别
网络·网络协议·http