Javascript 等待所有文件更新，然后下载它们

我正在使用库JSZip创建.png文件，并将它们添加到要下载的zip存档中。当我添加太多大文件时，问题就出现了

我使用一组for循环将文件添加到zip，然后激活自动下载。问题似乎是下载在文件更新之前就开始了，因此最终没有数据

for (var row = 0; row < 3; row++) { // Loop for rows
  for (var col = 0; col < 3; col++) { // Loop for cols
    if (cropSrc[row][col]) { // If data for cropped img exists
      var fileName = row + "" + col + ".png";
      zip.file(fileName, cropSrc[row][col].src, {
        base64: true
      }); // Add file to zip

      zip.file(fileName).async("uint8array").then(function(u8) { // Once file is complete... I think
        console.log("done");
      });

    }
  }
}

// Download zip file
zip.generateAsync({
  type: "base64"
}).then(function(base64) {
  window.location = "data:application/zip;base64," + base64;
});

for（var row=0；row<3；row++）{//Loop for rows
对于（var col=0；col<3；col++）{//cols循环
if（cropSrc[row][col]）{//if裁剪的img数据存在
var fileName=row+“”+col+“.png”；
zip.file（文件名，cropSrc[row][col].src{
base64：对
})；//将文件添加到zip
zip.file（fileName.async（“uint8array”）。然后（函数（u8）{//一旦文件完成……我想
控制台日志（“完成”）；
});
}
}
}
//下载zip文件
zip.generateAsync({
类型：“base64”
}).then（函数（base64）{
window.location=“数据：应用程序/zip；base64，”+base64；
});

我必须确保在下载之前等待所有文件都已更新，我将如何使用异步函数实现这一点

这是

---

不确定这是否有帮助，但下面是完整代码的更完整视图，我正在使用SAPUI5并在SAP Web IDE中开发：

var cropSrc = {
    0: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    },
    1: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    },
    2: {
        0:{src:"base64 data placeholder"},
        1:{src:"base64 data placeholder"},
        2:{src:"base64 data placeholder"}
    }
};

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "SAP_SARAH_ML_Project/libs/jszip", // Enables the jszip library (imports)
], function(Controller, jszipjs) { // Second part of importing
    "use strict";
    return Controller.extend("SAP_SARAH_ML_Project.controller.View1", {

        zipImg: function() {
            for (var row = 0; row < 3; row++) { // Loop for rows
                for (var col = 0; col < 3; col++) { // Loop for cols
                    if (cropSrc[row][col]) { // If data for cropped img exists
                        var fileName = row + "" + col + ".png";
                        zip.file(fileName, cropSrc[row][col].src, {
                            base64: true
                        }); // Add file to zip

                        zip.file(fileName).async("uint8array").then(function(u8) { // Once file is complete... I think
                            console.log("done");
                        });

                    }
                }
            }

            // Download zip file
            zip.generateAsync({
                type: "base64"
            }).then(function(base64) {
                window.location = "data:application/zip;base64," + base64;
            });
        }
    });
});

var cropSrc={
0: {
0:{src:“base64数据占位符”}，
1:{src:“base64数据占位符”}，
2:{src:“base64数据占位符”}
},
1: {
0:{src:“base64数据占位符”}，
1:{src:“base64数据占位符”}，
2:{src:“base64数据占位符”}
},
2: {
0:{src:“base64数据占位符”}，
1:{src:“base64数据占位符”}，
2:{src:“base64数据占位符”}
}
};
sap.ui.define([
“sap/ui/core/mvc/Controller”，
“SAP_SARAH_ML_Project/libs/jszip”//启用jszip库（导入）
]，函数（Controller，jszipjs）{//导入的第二部分
“严格使用”；
返回Controller.extend（“SAP\u SARAH\u ML\u Project.Controller.View1”{
zipImg:function（）{
对于（var row=0；row<3；row++）{//行循环
对于（var col=0；col<3；col++）{//cols循环
if（cropSrc[row][col]）{//if裁剪的img数据存在
var fileName=row+“”+col+“.png”；
zip.file（文件名，cropSrc[row][col].src{
base64：对
})；//将文件添加到zip
zip.file（fileName.async（“uint8array”）。然后（函数（u8）{//一旦文件完成……我想
控制台日志（“完成”）；
});
}
}
}
//下载zip文件
zip.generateAsync({
类型：“base64”
}).then（函数（base64）{
window.location=“数据：应用程序/zip；base64，”+base64；
});
}
});
});

您可以使用Promise.all来实现此目的：

let arr = [addFilePromise('file1'),addFilePromise('file2'),addFilePromise('file3')]
Promise.all(arr).then(zip.generateAsync({type:"base64"}))

编辑：

让fileAddActions=[]；
让addFilePromise=函数（文件名）{
zip.file（文件名，cropSrc[row][col].src{
base64：对
}); 
返回zip.file（fileName.async（“uint8array”）
}
对于（var row=0；row<3；row++）{//行循环
对于（var col=0；col<3；col++）{//cols循环
if（cropSrc[row][col]）{//if裁剪的img数据存在
var fileName=row+“”+col+“.png”；
fileAddActions.push（addFilePromise（文件名））
}
}
}
Promise.all（fileAddActions）.then（zip.generateAsync（{type:“base64”}））.then（base64=>{
indow.location=“数据：应用程序/zip；base64，”+base64；
})

类似这样的东西应该会起作用，我也推荐这篇文章：

---

由于async返回一个承诺，因此可以将执行for循环的函数设置为async/await函数

async functionName() {
   for loop...
      let res = await zip.file(fileName).async("uint8array");
}

参考这个

---

它使用了一种称为parallelimit的东西，作为一个信号量，以有限的数量异步处理文件，然后将其压缩。

感谢您的快速响应。我是异步新手，addFilePromise是什么？你能不能把它格式化成我的函数的格式？我真的很感激谢谢你@void先生我试过几次，但我不知道它是否真的在等待承诺的完成。我尝试在chrome中调试，但一旦调用了promise.all，我就无法访问阵列以检查承诺是否真的完整或zip是否正确。（顺便说一句，你漏掉了一个“w”）我真的很感谢你的帮助。当我运行它时，它仍然会使浏览器进入“about:blank”，并且不会下载任何内容。不确定问题是什么。您使用的是哪个库？我将尝试制作一个更完整的示例我正在使用我也在使用SAP Web IDE在SAPUI5中开发我更新了这个问题，以更全面地查看我的代码。谢谢你的帮助！我在问题中添加了更完整的代码版本。SAPUI5似乎具有作为对象一部分的功能，所以我不知道如何在其中实现这一点。也许你可以解释一下。非常感谢。

async functionName() {
   for loop...
      let res = await zip.file(fileName).async("uint8array");
}