javascript - 如何让以下代码等待 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) 之后触发。

如何修改代码，以便 if (fields.queued.length === fields.finished.length) 在 api.uploadPhoto 完成后触发？

更新:

这是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} 
});