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?

Solution

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)
    })
  }
}

Comments

[hidar]

I'm already using axios with then/catch methods inside the module ... so, I'm not sure if how this can be done further

[JJPandari]

@hidar Simply return the promise axios generates, like return axios(...).then().catch(), the function around this statement will return the promise, you can upload().then() outside the upload function, and the whole code will act as if you wrote axios(...).then().catch().then(/*code in uploadImage*/)

[Sergio Gutiérrez]

You're the HackerMaster !!