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()完成后解析的 Promise，這取決於首先解析dispatch('upload_file', ...)

和upload_file相同，取決​​於解析axios.put().then()取決於commit(types.UPDATE_LICENSE_IMG_URLS, awsImageUrl)