时间戳

首页 > 解决方案 > 为什么 fetch() 使用 ReadableStream 作为响应的主体？

javascript - 为什么 fetch() 使用 ReadableStream 作为响应的主体？

问题描述

我正在学习 fetch() 并发现响应的主体使用了一种叫做 readableStream 的东西。根据我的研究，可读流允许我们在从服务器下载数据后开始使用数据（我希望我是正确的:)）。就 fetch() 而言，可读流如何与 fetch() 一起使用，也就是说，我们无论如何都需要下载所有数据然后开始使用它。总的来说，我只是无法理解 fetch() 中可读流的意义，因此我需要你的帮助:)。

标签： javascriptfetch

解决方案

这是一个场景：一个原始的 ASCII 艺术“视频播放器”。

为简单起见，假设此演示中的“视频”帧是 80 x 50 = 4000 个字符。您的视频“解码器”读取 4000 个字符，在 80 x 50 网格中显示字符，再读取 4000 个字符，依此类推，直到数据完成。

一种方法是使用 发送一个 GET 请求fetch，将整个正文作为一个非常长的字符串，然后开始显示。因此，对于一个 100 帧的“视频”，它会在向用户显示第一帧之前接收 400,000 个字符。

但是，为什么用户必须等待最后一帧发送，才能查看第一帧？相反，仍然使用fetch，一次从ReadableStream响应内容中读取 4000 个字符。您甚至可以在剩余数据到达客户端之前读取这些字符。

潜在地，您可以在客户端中的流开始处处理数据，甚至在服务器开始处理流结束处的数据之前。

潜在地，流甚至可能没有定义的结束（例如，考虑流广播电台）。

在很多情况下，使用流数据比吞下整个响应更好。一个简单的例子是对来自某个数据源的一长串数字求和。你不需要一次在内存中的所有数字来实现这一点——你只需要一次读取一个，将它添加到总数中，然后丢弃它。

推荐阅读