使用client-zip打包多文件下载时如何根据数组动态发起fetch请求

实现方案 #

你可以通过数组遍历批量生成fetch请求，适配任意长度的allDownloads数组内容，改造后的代码如下：

const allDownloads = [];

async function downloadTestZip() {
  // 批量发起所有文档的下载请求
  const fetchResponses = await Promise.all(
    allDownloads.map(url => 
      fetch(url).catch(err => {
        // 单个文件下载失败时的兼容处理，避免整个打包流程中断
        const fileName = url.split('/').pop() || '未知文件';
        return new Response(`文件《${fileName}》下载失败，错误信息：${err.message}`, {
          headers: {
            'Content-Disposition': `attachment; filename="${fileName}-下载失败说明.txt"`
          }
        });
      })
    )
  );

  // 传入所有响应完成打包
  const blob = await downloadZip(fetchResponses).blob();
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = '批量文档打包.zip';
  link.click();
  link.remove();
  // 释放Blob占用的内存，避免内存泄漏
  URL.revokeObjectURL(link.href);
}

说明 #

• 核心逻辑通过Array.map遍历allDownloads数组的每个URL生成对应的fetch请求，Promise.all等待所有请求完成后统一传入downloadZip，自动适配数组内1~200个不等的文件数量
• 附加的错误捕获逻辑可以避免单个文件下载失败导致整个打包任务终止，失败的文件会自动生成对应的失败说明文本存入压缩包
• 若需要避免200个请求同时发起触发浏览器同域并发限制，可自行添加并发调度逻辑，限制同时发起的请求数为6~8个即可

内容的提问来源于stack exchange，提问作者loliki