axios / fetch 实现 stream 流式请求

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

一、node端

代码演示：

1. const axios = require('axios');
3. axios({
4.   method: 'get',
5.   url: 'http://tiven.cn/static/img/axios-stream-01-kcUzNdZO.jpg',
6.   responseType: 'stream'
7. })
8. .then(response => {
9.   
10.   response.data.on('data', (chunk) => {
11.     // 处理流数据的逻辑
12.   });
14.   response.data.on('end', () => {
15.     // 数据接收完成的逻辑
16.   });
18. });

复制代码

二、欣赏器端

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

1. async function getStream() {
2.   try {
3.     let response = await fetch('/api/admin/common/testStream');
4.     console.log(response);
5.    
6.     if (!response.ok) {
7.       throw new Error('Network response was not ok');
8.     }
10.     const reader = response.body.getReader();
11.     const textDecoder = new TextDecoder();
12.     let result = true;
13.     let output = ''
15.     while (result) {
16.       const { done, value } = await reader.read();
18.       if (done) {
19.         console.log('Stream ended');
20.         result = false;
21.         break;
22.       }
24.       const chunkText = textDecoder.decode(value);
25.       output += chunkText;
26.       console.log('Received chunk:', chunkText);
27.     }
28.   } catch (e) {
29.     console.log(e);
30.   }
31. }

复制代码

---

欢迎访问：天问博客

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