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?

This doesn't has much to do with vue, just a normal how-to-async problem. What you should do really depends on what the async this.uploadModule.upload does, and what it offers to execute code after the async operation finishes. — JJPandari
– JJPandari, Commented Oct 26, 2017 at 9:40

Nicolas Beauvais · Accepted Answer · 2017-10-26 09:41:38Z

7

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

answered Oct 26, 2017 at 9:41

Nicolas Beauvais

1,07214 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hidar Over a year ago

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 Over a year ago

@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 Over a year ago

You're the HackerMaster !!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related