VueJS 和 Axios 流式传输 REST API 响应的终极指南

2024-03-09 18:24:55

从 REST API 响应中流式传输内容的 VUEJS 和 AXIOS 指南

引言

在现代 Web 开发中，流式传输响应是优化数据处理和提高用户体验的关键。通过流式传输，可以增量地从服务器接收数据，从而避免加载延迟和内存开销。在这篇博客文章中，我们将深入探讨如何在 VueJS 应用程序中使用 Axios 库从 REST API 响应中流式传输内容。

问题：res.data.getReader() 未定义

在使用 Axios 从 REST API 流式传输响应时，开发人员可能会遇到 res.data.getReader() 未定义的错误。这是因为默认情况下，Axios 不支持流式传输响应。

解决方案：启用流式传输响应

要启用流式传输响应，需要在请求配置中显式指定 responseType 选项，如下所示：

const res = await axios.get(path, { responseType: 'stream' });

通过设置 responseType 为 stream，Axios 会将响应解析为流，而不是完整的缓冲数据。

解码流式响应

获得流式响应后，下一步是使用 TextDecoder 将其解码为文本。可以在如下所示的循环中分块读取流：

while (true) {
  const { done, value } = await reader.read();
  if (done) break;

  const chunk = decodedStream.decode(value, { stream: true });
  // 处理流式块
}

完整修复代码

async sendMsg() {
  // ...省略其他代码

  const res = await axios.get(path, { responseType: 'stream' });
  const reader = res.data.getReader();
  const decodedStream = new TextDecoder("utf-8");

  // ...流式传输和处理块的代码

  reader.releaseLock();
}