时间戳

首页 > 解决方案 > 使用 fetch 下载大文件但使用过多缓存

javascript - 使用 fetch 下载大文件但使用过多缓存

问题描述

tl;dr：有什么办法可以优化这个功能以更好地处理超大文件的下载？

我正在使用 javascript 构建这个简单的网络应用程序，用户可以在其中下载多种类型的文件。通常这些文件是 .cpio 存档、.mov 或只是包含 xyz 其他文件的文件夹。

我正在使用的用于下载文件的 api (Synology) 关于它在标题中返回的内容 (application/zip、mov、zip 等) 是准确的，因此每种类型的文件都得到了很好的处理，甚至文件夹也会自动压缩为 zip .

我的问题是，有时这些文件的重量会超过 1GB，而现在发生的情况是，在下载之前，所有文件都先加载到 RAM 中。对于非常大的文件（> 2-3 GB），这将成为真正的系统猪。

我需要找到一种绕过缓存的方法，而现在，我在请求标头中包含的所有内容都无济于事。

这是我的下载功能：

fetch(downloadURL, {
        method: "GET",
        mode: "cors",
        cache: 'no-store',
        headers: {
            'pragma': 'no-cache',
            'cache-control': 'no-store'
        },
    })
    .then(response => {
        return response.blob();
    })
    .then(blob => {
        console.log(blob);

        var url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = filename;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    })
    .catch(error => {
        console.log(error)
    });

以下是 API 在响应标头中返回的内容：

Accept-Ranges: none
Connexion: Keep-alive
Content-Type: application/zip
Date: Mon, 21 Oct 2019 09:00:00 GMT
Keep-Alive: timeout=5, max=100
Server: ngix
Transfer-Encoding: chunked

标签： javascriptapidownloadblobfetch

解决方案

这就是解决我的问题的方法。最后，我认为我过于关注使用 fetch。我意识到我可以使用 API 查询 url 使用与 Google Chrome 兼容的下载属性来启动下载。

    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    delete link;

更简单，没有缓存。

推荐阅读