Promise.all() немедленно разрешает

Question

Я пытаюсь предпринять некоторые действия после завершения загрузки нескольких изображений, используя Promise.all.

Однако код после then выполняется перед отправкой кода.

Что я здесь смущаю?

submit_all_images({ dispatch, rootState }) { 
    const imageFileArray = rootState.imageStore.imageFileArray 
    var promiseArray = [] 

    for (var imageFile of imageFileArray) { 
     promiseArray.push(dispatch('get_signed_request', imageFile)) 
    } 

    Promise.all(promiseArray) 
     .then(results => { 
     console.log("finished with results: " + results) 
     return dispatch('submit_entire_form') 
     }); 
    }, 
    get_signed_request ({ dispatch, commit, state }, imgFile) { 
    const requestObject = {imageName: imgFile.name, imageType: `${imgFile.type}`} 
    axios.post('http://localhost:3000/sign-s3', requestObject) 
    .then(response => { 
     if (response.body.signedRequest && response.body.awsImageUrl) { 
      const signedRequest = response.body.signedRequest 
      const awsImageUrl = response.body.awsImageUrl 
      dispatch('upload_file', { imgFile, signedRequest, awsImageUrl }) 
     } else { 
      alert('Could not get signed URL.'); 
     } 
    }, error => { 
     console.log("ERROR: " + error) 
    }) 
    }, 

    upload_file ({ dispatch, commit, state}, { imgFile, signedRequest, awsImageUrl }) { 
    axios.put(signedRequest, imgFile, { 
     headers: {'Content-Type': imgFile.type} 
    }).then(response => { 
     console.log('finished uploading file: ' + imgFile.name) 
     commit(types.UPDATE_LICENSE_IMG_URLS, awsImageUrl) 
    }, error => { 
     alert("fail") 
     console.log(error) 
    }) 
    }, 

Answer 1

Я не совсем уверен, так как у меня нет опыта работы с vuex, но я предполагаю, что вы пропустили несколько return заявлений.

get_signed_request({ dispatch, commit, state }, imgFile){ 
    const requestObject = {imageName: imgFile.name, imageType: `${imgFile.type}`} 
    //here 
    return axios.post('http://localhost:3000/sign-s3', requestObject) 
     .then(response => { 
      if (response.body.signedRequest && response.body.awsImageUrl) { 
       const signedRequest = response.body.signedRequest 
       const awsImageUrl = response.body.awsImageUrl 
       //here 
       return dispatch('upload_file', { imgFile, signedRequest, awsImageUrl }) 
      } else { 
       alert('Could not get signed URL.'); 
      } 
     }, error => { 
      console.log("ERROR: " + error) 
     }) 
}, 

upload_file({ dispatch, commit, state}, { imgFile, signedRequest, awsImageUrl }){ 
    //here 
    return axios.put(signedRequest, imgFile, { 
     headers: {'Content-Type': imgFile.type} 
    }).then(response => { 
     console.log('finished uploading file: ' + imgFile.name) 
     //and here 
     return commit(types.UPDATE_LICENSE_IMG_URLS, awsImageUrl) 
    }, error => { 
     alert("fail") 
     console.log(error) 
    }) 
}, 

Так что get_signed_request возвращает обещание, которое устраняет только после того, как axios.post().then() делается, которым зависит от первого решения dispatch('upload_file', ...)

И то же самое для upload_file в зависимости от разрешения axios.put().then() в зависимости от commit(types.UPDATE_LICENSE_IMG_URLS, awsImageUrl)