javascript - 处理具有大数据的 XMLHttpRequest 响应

Question

使用 Chrome，我设置了一个 XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open(method, url, true);
...
xhr.onreadystatechange = () => {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (isStatusCodeSuccess(xhr.status)) {
        // handle response;
      } else {
        // handle error
      }
    }
};
xhr.addEventListener('progress', event => {
    console.log(event.loaded, event.target.response.length);
});
xhr.send(data);

有时我请求一些 JSON 数据，总大小约为 295MB 未压缩/5.8MB 压缩。不幸的是，当成功调用以下代码时，响应是一个空字符串。

使用进度事件监听器，我可以看到响应是逐 block 正确处理的，直到某个点。这是它生成的控制台日志的摘录:

32768 32768
4639135 4639135
7376739 7376739
11525403 11525403
...
261489180 261489180
264684030 264684030
267880247 267880247
271037819 0
274232442 0
277428774 0
...
304018210 0
309230213 0
310445469 0

Chrome 似乎存在字符串/分配限制，但我没有收到任何错误。

在 firefox 上我收到以下错误:InternalError: allocation size overflow。

我尝试存储结果，但我无法“清空”Xml Http Request 对象，因为属性是只读的。

浏览器中变量的官方限制是什么？ 我找不到官方答案，只有一些实验性的答案 Javascript string size limit: 256 MB for me - is it the same for all browsers?

除了使用 WebSocket 之外，是否有任何方法可以解决此问题并处理大型 POST 结果？。

我在想:

• 用于流式传输数据的特定内容类型，如 application/octet-stream
• 按 block 处理数据的特定参数，如range标题虽然我正在获取的内容不是静态的(它会随着时间而变化)
• 减少 JSON 响应长度的已知算法，我可以在其中逐 block 解压缩数据以避免达到上述限制

Answer 1

您可以尝试使用 Fetch API ，一个改进版本的 XMLHttpRequest 直接使用 promise 。它具有流式传输响应主体的功能，而不是将整个主体响应缓冲为文本。

基本上，使用 progress 事件，您会在每个 block 上被调用，但 xhr 响应不断累积响应作为文本，从而达到内存限制。

使用 Fetch API，您可以在接收到的字节到达时读取它们:

const consume = responseReader => {
    return responseReader.read().then(result => {
        if (result.done) { return; }

        // do something with the current chunk
        const chunk = result.value;

        return consume(responseReader);
    });
}

// Perform the request and consume response stream
fetch(url).then(response => {
    return consume(response.body.getReader());
})
.catch(console.log.bind(console));

有关详细信息，请参阅本文:Fetch (or the undeniable limitations of XHR)

在撰写本文时，只有 Chrome 43 和 Edge 14 才支持通过 Fetch API 流式传输响应正文。参见compatibility table .