Ajax Stream API 怎么读取 Response Body?

文章导读
上一个 测验 下一个 在 Stream API 中,body 是 Response 接口的一个属性。它用于获取 ReadableStream 的主体内容。这是一个只读属性。响应体不是以单个主体发送,而是以小块数据发送,客户端在接收到数据后立即开始处理。它无需等待完整的响应。
📋 目录
  1. A 语法
  2. B 示例
  3. C 结论
A A

Stream API - 响应体



上一个
测验
下一个

在 Stream API 中,body 是 Response 接口的一个属性。它用于获取 ReadableStream 的主体内容。这是一个只读属性。响应体不是以单个主体发送,而是以小块数据发送,客户端在接收到数据后立即开始处理。它无需等待完整的响应。

语法

Response.body

该属性对于任何使用 null body 属性创建的 Response 对象,会返回 ReadableStream 或 null。

示例

在下面的程序中,我们将看到如何在 Stream API 中使用 Response Body。为此,我们使用 fetch() 发送 GET 请求到指定的 URL。如果响应成功,则通过 response.body.getReader() 获取响应体作为 "ReadableStream"。然后我们定义一个 readMyStream() 函数来读取从流中接收到的数据块。如果发生任何错误,则由 catch() 函数成功处理。

<script>
   // fetch() 函数用于发送 GET 请求 
   fetch('http://example.com/')
   .then(response => {
      if (response.ok) {
      // 使用 body 属性获取 ReadableStream 
      const myReader = response.body.getReader();
   
      // 使用此函数读取数据块 
      function readMyStream() {
         return myReader.read().then(({ done, value }) => {
            if (done) {
               // 流已完成
               return;
            }
            // 处理数据块中的数据 
            const receivedData = new TextDecoder().decode(value);
            console.log(receivedData);
   
            // 继续读取 
            return readMyStream();
         });
      }
      return readMyStream();
      } 
   })
   .catch(error => {
      // 处理错误
      console.log('发现错误:', error);
   });
</script>

结论

这就是 Response Body 的工作方式。在使用 Response body 之前,始终要检查指定的 API 是否支持流式响应。因为并非所有 API 都支持流式响应。在下一篇文章中,我们将学习 Stream API 中的 byte readers。