客户端 zip 多次获取答案

【问题标题】：Client zip multiple fetch客户端 zip 多次获取
【发布时间】：2021-10-20 08:33:22
【问题描述】：

我正在开发一个小型应用程序，它允许用户在前端选择一些文档，当他们点击“下载”时，会生成一个包含所有文档的 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 个不同的文档。

【问题讨论】：

我知道我应该在快速入门中更清楚地说明，但不要忘记撤销 Blob URL（即您的函数可能应该以 URL.revokeObjectURL(link.href) 结尾）。

标签： javascript zip

【解决方案1】：

你必须创建一个 Promises 数组，然后等待它们：

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?)

【讨论】：

【解决方案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 将能够在第一个 fetch Response 准备好后立即开始处理数据（而不是全部 200 个）。

这有什么帮助？

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

【讨论】：