Axios 处理 AIGC 流式传输：从报错到解决方案的深度解析

流式传输的需求与 axios 的配置尝试​

在开发基于 AIGC 的应用时，我们常常需要调用第三方提供的流式接口。这些接口不会等待所有数据生成完毕后一次性返回，而是会分批次、持续地将数据传输给前端。这种传输方式要求前端能够实时接收并处理这些数据流，从而即时更新页面展示。​

作为前端开发中常用的 HTTP 客户端，axios 自然成为了我们的首选工具。根据流式传输的常规配置思路，我们需要将 responseType 设置为'stream'，以告诉 axios 我们期望接收一个流式响应。因此，我们可能会写出这样的代码：

axios.post('/api/stream', { prompt: 'Hello AIGC' }, {
  responseType: 'stream'
})
.then(response => {
  // 处理流式响应
  const reader = response.data.getReader();
  // ...
})
.catch(error => {
  console.error('请求失败:', error);
});

然而，当这段代码运行时，我们并没有如愿接收到流式数据，反而在控制台看到了一个错误提示：

The provided value 'stream' is not a valid enum value of type XMLHttpRequestResponseType.

报错原因的深度剖析​

这个错误提示看似简单，实则涉及到 axios 底层实现的关键知识点。要理解为什么会出现这个错误，我们需要先了解 axios 的两种核心适配器。​

axios 作为一个强大的 HTTP 客户端，支持两种不同的底层实现方式（即适配器）：​

XMLHttpRequest 适配器：这是 axios 默认使用的适配器，基于浏览器原生的 XMLHttpRequest API 实现。​

fetch 适配器：这是一个可选的适配器，基于较新的 fetch API 实现。​

而报错信息中提到的 XMLHttpRequestResponseType，正是 XMLHttpRequest 规范中定义的响应类型枚举。这个枚举中并不包含'stream' 这个值，它支持的响应类型包括：''、'arraybuffer'、'blob'、'document'、'json'、'text'。​

这就解释了为什么会出现上述错误：当我们使用默认的 XMLHttpRequest 适配器时，设置 responseType 为'stream' 是不符合规范的，因为 XMLHttpRequest 本身并不支持流式响应类型。​

而流式传输恰恰是 fetch API 的强项。fetch API 设计之初就考虑到了流式处理的需求，它的 Response 对象可以直接返回一个 ReadableStream，这使得处理流式数据变得非常自然。

解决方案：指定 fetch 适配器​

既然问题的根源在于适配器的选择，那么解决方案就变得清晰了：我们需要在 axios 的配置中明确指定使用 fetch 适配器，而不是默认的 XMLHttpRequest 适配器。​

修改后的代码如下：

axios.post('/api/stream', { prompt: 'Hello AIGC' }, {
  responseType: 'stream',
  adapter: 'fetch' // 指定使用 fetch 适配器
})
.then(response => {
  // 处理流式响应
  const reader = response.data.getReader();
  
  const processStream = async () => {
    const { done, value } = await reader.read();
    if (done) {
      console.log('流式传输结束');
      return;
    }
    // 将接收到的 Uint8Array 转换为字符串并处理
    const chunk = new TextDecoder().decode(value);
    console.log('接收到的数据块:', chunk);
    // 实时更新页面展示
    updateUI(chunk);
    // 继续处理下一个数据块
    processStream();
  };
  
  processStream();
})
.catch(error => {
  console.error('请求失败:', error);
});

仅仅添加 adapter: 'fetch' 这一行配置，就能够解决之前的报错，让 axios 正确处理流式传输。