How to wait for a response from a function before doing something else in vuejs

Question

I have an image upload function and this upload returns a data when finished, and I have a line below that function to do another task. the problem is vuejs/js does not wait until the first function completes the task. So, this is what my code looks like:

methods : {

    uploadImage (file) {

        this.uploadModule.upload(file); 

        if(this.uploadModule.isSuccess) {
             this.images.push(this.uploadModule.response)
        }

      // someFunction()
  }
}

So, in the above example since the upload() methods takes some time, then someFunction() part gets run before the this.images.push() part.

Is there away to just wait until the upload is finished before running another function?

Answer 1

You can return a Promise from your upload method and execute the next portion of code as a callback in the "next" method of the Promise.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

It should look like this:

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      if(this.uploadModule.isSuccess) {
        this.images.push(this.uploadModule.response)
      }

      // someFunction()
    })
  }
}

You can also handle your error using the Promise reject callback if the upload does not complete and handle the error with the catch method:

methods : {

  uploadImage (file) {

    this.uploadModule.upload(file).then(function () {
      this.images.push(this.uploadModule.response)
    }).catch(function (error) {
      console.log(error)
    })
  }
}