如何限制来自 fetch API 的流以节省带宽？

Question

如何让 fetch API 在几百字节后切断流？ 我只需要页面顶部的元描述，页面的其余部分超过 500k

Answer 1

检查网站是否具有允许您发送标志的功能，告诉他们只发送元描述。

如果没有，那么您的机器无论如何都会接收数据。 如果你想节省阅读整个响应的时间，你可以阅读直到你拥有所有的元信息，然后停止阅读并丢弃其余的。 这只会为您节省一些 I/O 时间，而不是带宽。

Answer 2

您可以使用Response.body流逐位读取接收到的数据，并在收到足够的数据时使用AbortSignal取消请求。

请注意，您无法控制在每个块中将收到多少数据，因此您可能会收到比需要更多的数据，但我假设使用 500 KB，数据将以多个块的形式到达，因此通过取消您将节省一些数据。

以下是一些示例代码，一旦收到至少 10 KB 就会中止：

const LIMIT = 10000;
const abort = new AbortController();
const res = await fetch(url, {
    signal: abort.signal
});

let bodySoFar = '';
const reader = res.body.pipeThrough(new TextDecoderStream()).getReader();
while (true) { // eslint-disable-line no-constant-condition
    const { done, value } = await reader.read();
    if (done) {
        break;
    }
    bodySoFar += value;
    if (bodySoFar.length > LIMIT) {
        abort.abort();
        break;
    }
}

请注意， TextDecoderStream还没有很好的浏览器支持。 作为一种解决方法，您可以改为在Uint8Array中收集数据。