客户端 zip 多次提取

Question

我正在开发一个小应用程序，允许用户在前端 select 一些文档，当他们单击“下载”时，所有文档都会生成一个 zip。

我正在为此使用 client-zip。 1 个文档（1 个获取）一切正常，但有一个小问题，我无法弄清楚。如何根据数组中元素的数量添加动态提取？

到目前为止我的代码：

    const allDownloads = [];

    async function downloadTestZip() {
      const code = await fetch(allDownloads[0]);
      const blob = await downloadZip([code]).blob();
      const link = document.createElement('a');

      link.href = URL.createObjectURL(blob);
      link.download = 'test.zip';
      link.click();
      link.remove();    
    }

当用户选中文档旁边的复选标记时，allDownloads=[] 被填充。所以最多可以有 200 个不同的文档。

Answer 1

您必须创建一个 Promise 数组，然后等待它们全部：

const promises = allDownloads.map( url => fetch(url) ); // or simply .map(fetch), as a shorthand

const codes = await Promise.all(promises);

// now codes is an array of codes (strings, probably?)

Answer 2

要改善延迟，您可以使用异步迭代器（client-zip 很乐意使用它而不是数组）。

async function *lazyFetch() {
  for (const url of allDownloads) yield await fetch(url)
}

const blob = await downloadZip(lazyFetch()).blob()

在功能上，它与使用 Promise.all 的解决方案做同样的事情（而且它只是更多的代码）。但是，client-zip 将能够在第一个获取响应准备就绪后立即开始处理数据（而不是全部 200 个响应）。

这有什么帮助？

创建 ZIP 文件涉及一些计算和复制。因此，如果您让 client-zip 提前开始，所有 CPU-intensive 的事情都可能在浏览器处理下一个文件的 HTTP 请求时发生。浏览器通常有一个 HTTP 客户端池，它们不会同时启动 200 个请求。

客户端 zip 多次提取

Client zip multiple fetch

javascript

zip

这有什么帮助？