Chrome ERR_INSUFFICIENT_RESOURCES 解决方法

Question

赏金将在 2 天后到期。 此问题的答案有资格获得+500声望奖励。 雅各布想引起更多人对这个问题的关注。

我有一个 JS 库，负责为客户端执行 JPEG 图像的下载。 所有这些都是异步完成的。 在某些情况下，图像数量非常大……大约 5000 个图像。 在这种情况下，Chrome 浏览器会针对 ajax 请求发出“ERR_INSUFFICIENT_RESOURCES”错误。

每个请求都必须单独完成，没有选项可以在服务器端打包图像。

我在这里有哪些选择？ 如何找到解决此问题的方法？ 下载在 Firefox 中运行良好...

附上实际下载的代码：

function loadFileAndDecrypt(fileId, key, type, length, callback, obj) {     

 var step = 100 / length;

 eventBus.$emit('updateProgressText', "downloadingFiles");


  var req = new dh.crypto.HttpRequest();
    req.setAesKey(key);
    let dataUrl;
    
    if (type == "study")  {
         dataUrl = "/v1/images/";
    }else {
         dataUrl = "/v1/dicoms/";
    }    

    var url = axios.defaults.baseURL + dataUrl + fileId;
    req.open("GET", url, true);
    req.setRequestHeader("Authorization", authHeader().Authorization+"")
    req.setRequestHeader("Accept", "application/octet-stream, application/json, text/plain, */*");
    req.responseType = "arraybuffer";

    req.onload = function() {
        console.log(downloadStep);    
        downloadStep +=  step;
        eventBus.$emit('updatePb', Math.ceil(downloadStep));

        var data = req.response;
        obj.push(data);
        counter ++;        
        //last one
        if (counter == length) {        
            callback(obj);        
        }
    };

    req.send();
}

Answer 1

该错误意味着您的代码使您的内存过载（很可能）。 不是从后端发送所有数据，而是向前端请求 5000 个单独的图像并控制请求流。 不管怎样，下载 5000 张图片是不好的。 您应该将它们打包以供下载。 如果您的意思是获取图像，那么通过静态或动态链接从前端加载图像更合乎逻辑；)

Answer 2

创建一个类：

• 它接受文件 ID（需要下载的图像）作为参数
• 哪个可以执行 HTTP API 请求
• 哪个可以存储请求的结果

使用需要下载的文件 ID 数量从此类创建对象数组。

将数组存储在可以启动和管理下载的 RequestManager 中：

• 可以批量下载，假设它从数组中触发 5 个请求并在开始下一批之前等待它们完成
• 可以在多次失败时停止下载
• 根据可用带宽操作批量大小
• 在身份验证到期时停止下载并在身份验证刷新时恢复
• 提供重试先前失败的下载