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 returns 一个仅在 axios.post().then() 完成后才解析的 Promise，这取决于首先解析 dispatch('upload_file', ...)

upload_file 也一样，取决于 axios.put().then() 取决于 commit(types.UPDATE_LICENSE_IMG_URLS, awsImageUrl)

Promise.all() 立即解析

Promise.all() resolves immediately

javascript

promise

bluebird

vue.js