javascript - 缓慢读取时，Javascript fetch ReadableStream 不会减慢网络速度

Question

下面的示例是一个非常简单的提取片段，它启动对一个大对象的提取并从中读取（实际上它正在被转换并传递给一个Response对象，但这并不重要）。

问题是即使流只读取了 2 个块，当在 Network DevTools 中查看时，很明显整个大对象都被下载了：

fetch("http://ipv4.download.thinkbroadband.com/200MB.zip").then(response => {
    const networkreader = response.body.getReader();

    networkreader.read().then(data => {
        console.log("read", data.value.length);
    });

    networkreader.read().then(data => {
        console.log("read", data.value.length);
    });

    // networkreader.cancel(); // can't do that
});

正如预期的那样，读取工作并且只返回 2 块数据，但在 DevTools 中，正在下载完整的 200MB。调用cancel()流将停止下载，但我不能这样做，因为流已移交给Response对象，它会慢慢消耗数据，暂停等，并可能在几分钟不活动后取消它。

当资源是通过分块编码或 HTTP/2 消耗的视频或其他可流式数据时，这会在现实世界中发生。

我能想象的唯一解决方法是使用范围请求，从而限制浏览器（在我的例子中是 Chrome）下载这么多很可能不会使用的数据。

如果我做错了什么或者这是浏览器问题，请让我知道，因为范围请求方法感觉相当混乱。谢谢你。

标签： javascriptfetch-api