如何在不使代碼掛起的情況下刪除以下承諾捕獲？

Question

以下代碼循環訪問某些表單字段。 如果該字段是必須上載的文件，則它將運行api.uploadPhoto函數（在上載照片后設置有效負載）。 如果直接設置有效載荷時該字段是普通輸入，則：

formFields.forEach(field => {
  if (hasUploadFiles(field)) {
    uploadPhotoPromise = new Promise((resolve, reject) => {
      uploads.queued.push(file)
      api.uploadPhoto(file, field).then(uploadedPhoto => {
        uploads.finished.push(field)
        if (uploads.queued.length === uploads.finished.length) {
          payload[field.name] = uploadedPhoto
          resolve()
        } else {
          reject()
        }
      }).catch(error => {
        console.log('error:', error)
        reject()
      })
    }).catch(error => {
      console.log('error:', error)
    })
  } else {
    payload[field.name] = field.value
  }
})

Promise.all([uploadPhotoPromise]).then(values => {
  // update action
}

該代碼有效。 但是，所有這些catch使它看起來有點混亂。

我嘗試刪除它們，但是如果刪除它們中的任何一個，代碼就會掛起（ Promise.all的代碼永遠不會運行）。 為什么是這樣？ 以及如何在不使所有catch語句掛起的情況下重構此代碼？

原始代碼（加上Bergi建議的修改）：

const buildingFormPromise = utils.mapDeep(this.buildingForm.schema, field => {
  if (!field.name) return // fields not in the database
  else if (utils.hasUploadFiles(field)) {
    utils.eachCall(field.value, (file, index) => {
      field.userId = this.user.id
      this.uploads.queued.push(file)
      this.$set(this.uploads.queued, index, { progress: 30 })
      return api.uploadPhoto(file, field).then(uploadedPhoto => {
        this.$set(this.uploads.queued, index, { progress: 100 })
        return loadImage(uploadedPhoto, () => {
          this.uploads.finished.push(field)
          if (this.uploads.queued.length === this.uploads.finished.length) {
            console.log('This runs after the code inside Promise.all')
            buildingPayload[field.name] = uploadedPhoto
          }
        })
      })
    })
  } else {
    return Promise.resolve(buildingPayload[field.name] = field.value)
  }
})

Promise.all([buildingFormPromise]).then(values => {
  console.log('This runs before the files are uploaded')
})

Answer 1

您需要將所有promise的數組傳遞到Promise.all ，並且應該避免Promise構造函數antipattern 。 如果您不想處理個別的上傳失敗，則可以將.catch移至末尾。

var fieldValuePromises = formFields.map(field => {
  if (hasUploadFiles(field)) {
    return api.uploadPhoto(file, field).then(uploadedPhoto => {
      return payload[field.name] = uploadedPhoto;
    });
  } else {
    return Promise.resolve(payload[field.name] = field.value);
  }
});

Promise.all(fieldValuePromises).then(values => {
  // update action
}).catch(error => {
  // at least one upload failed
  console.log('error:', error)
});