如何让下面的代码等待和api调用在恢复之前做好准备？

Question

以下代码循环遍历formFields数组。有两种类型的字段：那些有上传文件和没有文件的字段。我保持“排队”字段和“已完成”的人的数量，所以我知道什么时候更新的形式

const payload = {} 
const fields = { 
    queued: [], 
    finished: [] 
} 

formFields.forEach(field => { 
    fields.queued.push(field) 
    if (hasUploadFiles(field)) { // FOR FILE INPUTS 
    utils.mapCallPromise(field.value, file => { 
     api.uploadPhoto(file, field).then(uploadedPhoto => { 
     payload[field.name] = uploadedPhoto 
     fields.finished.push(field) 
     }) 
    }) 
    } else { // FOR NORMAL INPUTS 
    payload[field.name] = field.value 
    fields.finished.push(field) 
    } 
}) 

if (fields.queued.length === fields.finished.length) { 
    console.log('use the payload to update the form') 
} 

问题是api.uploadPhoto之后if (fields.queued.length === fields.finished.length)触发。如何修改代码 api.uploadPhoto完成后触发？

UPDATE：

这是api.uploadPhoto和utils.mapCallPromise：

api.uploadPhoto = async (file = {}, field = {}) => { 
    if (utils.includes(api.usServers, api.env)) { 
    return await usImageUpload.toFirebase(file, field) 
    } else { 
    return await cnImageUpload.toQCloud(file, field.userId, field.sizes) 
    } 
} 

utils.mapCallPromise = (object, callback) => { 
    return new Promise((resolve, reject) => { 
    return Array.prototype.slice.call(object).map(value => { 
     return resolve(callback(value)) 
    }) 
    }) 
}, 

Answer 1

使用Promise.all和阵图的方法，你可以做以下

Promise.all(formFields.map(field => { 
    if (hasUploadFiles(field)) { // FOR FILE INPUTS 
     return api.uploadPhoto(file, field).then(uploadedPhoto => { 
      return {field, uploadedPhoto}; 
     }); 
    } else { // FOR NORMAL INPUTS 
     return {field}; 
    } 
})).then(results => { 
    //results is an array of objects that are either {field, uploadedPhoto} or just {field} 
});