JavaScript异步函数如何等待forEach循环完成后再resolve返回

• Array.prototype.forEach 本身是同步遍历实现，不会等待传入的async回调内部的await逻辑完成，回调返回的Promise会被直接丢弃，外层函数无法感知循环内的异步进度，会直接执行后续的return语句。
• 代码存在未初始化变量的bug：urls仅通过let声明，没有赋值为空数组[]，即使异步循环执行完成，调用urls.push时也会抛出类型错误。

不需要在函数内部额外嵌套异步函数，根据实际执行需求选择对应遍历写法即可，两种常见实现如下：

方案1：串行执行（适合图片数量少、需要严格按处理顺序的场景） #

用for...of替代forEach，for...of是可迭代遍历，会正常等待每次await完成后再执行下一轮循环，完全匹配“全部流程跑完再返回”的预期：

const uploadImages = async ({ imageChanges, questions }) => {
    if (!imageChanges.length) return null;

    const storage = firebase.storage();
    // 初始化urls为空数组，避免push时报错
    let urls = []; 

    try {
        // 替换forEach为for...of遍历
        for (const image of imageChanges) {
            const questionId = questions.findIndex(q => q.id === image.questionId);
            const imagePath = `${questionId}.jpg`;
            const storageRef = storage.ref(imagePath);

            const data = await fetch(image.src);
            const blob = await data.blob();

            const uploadTaskSnapshot = await storageRef.put(blob);
            const downloadURL = await uploadTaskSnapshot.ref.getDownloadURL();
            urls.push(downloadURL)
        }
        // 所有循环逻辑执行完成后才会走到这里返回
        return urls;
    } catch (error) {
        console.log(error.message);
    }
};

方案2：并发执行（适合图片数量多、对处理顺序无要求的场景） #

如果希望所有图片的获取、上传操作并行执行提升效率，可以搭配Promise.all和map使用：map会把每个异步操作返回的Promise收集成数组，await Promise.all()会等待所有Promise完成后，把返回值组装成数组直接得到urls：

const uploadImages = async ({ imageChanges, questions }) => {
    if (!imageChanges.length) return null;

    const storage = firebase.storage();

    try {
        // map收集每个图片处理的Promise，await Promise.all等待全部完成
        const urls = await Promise.all(imageChanges.map(async image => {
            const questionId = questions.findIndex(q => q.id === image.questionId);
            const imagePath = `${questionId}.jpg`;
            const storageRef = storage.ref(imagePath);

            const data = await fetch(image.src);
            const blob = await data.blob();

            const uploadTaskSnapshot = await storageRef.put(blob);
            const downloadURL = await uploadTaskSnapshot.ref.getDownloadURL();
            // 直接返回当前图片的下载链接，无需手动push
            return downloadURL;
        }));

        return urls;
    } catch (error) {
        console.log(error.message);
    }
};

内容的提问来源于stack exchange，提问作者Er.Se