如何限制來自 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中收集數據。