コードをハングさせずに次の約束を取り除くには？

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.allにすべての約束の配列を渡す必要がある、とあなたがPromise constructor 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) 
});