Execute method after all promises inside of a given method resolved

Question

In a Vue.js component, I have some methods that use axios to call an API.

In different cases, I need to execute some code once the call in this method has resolved, but I don't want to add a bunch of if statements in the .then() chained to the axios call.

methods: {
  callApi() {
    axios.get('/api')
     .then(() => {
       // call has resolved, request is done
     })
  },
  firstMethod() {
    this.callApi()
    // Need to wait for the call to resolve
    // Do something
  },
  secondMethod() {
    this.callApi()
    // Need to wait for the call to resolve
    // Do something else
  }
}

As you can see, firstMethod and secondMethod both rely on callApi but are supposed to do a different thing once the request is done. I prefer to split this logic in different functions instead of using conditions in the callApi method. Is there a way to do this without having to add this logic inside of the callApi ?

Does the execution condition for both the methods, rely on the response of `callApi`? — Prerak Sola, May 29 '19 at 15:14
return the `axios.get()` call from within `callApi()`, so you can continue the `.then()` chain inside `firstMethod()` and `secondMethod()` seperately. — Shilly, May 29 '19 at 15:14

score 3 · Accepted Answer · answered May 29 '19 at 15:14

Have callApi return the promise chain, then use and return that in firstMethod and secondMethod.

methods: {
  callApi() {
    return axios.get('/api')
     .then(() => {
       // call has resolved, request is done
     })
  },
  firstMethod() {
    return this.callApi()
    .then(() => {
      // Need to wait for the call to resolve
      // Do something
    })
  },
  secondMethod() {
    return this.callApi()
    .then(() => {
      // Need to wait for the call to resolve
      // Do something else
    })
  }
}

Whatever calls callApi, firstMethod, or secondMethod should check for failure and handle/report it.

Your original code was breaking one of the rules of promises: The function should always either return the chain, or handle rejection. (And yes, that's or [99.9% of the time], not and.)

Thanks a lot for your answer, very helpful! Where can I find the *rules* of promises ? — Graham Slick, Jun 02 '19 at 14:33
@GrahamSlick - Any good book discussion JavaScript promises should cover them. (Sadly, mine isn't out until September. :-) ) The main ones are the one above and [not creating promises unnecessarily](https://stackoverflow.com/questions/23803743/what-is-the-explicit-promise-construction-antipattern-and-how-do-i-avoid-it). — T.J. Crowder, Jun 02 '19 at 15:09

Soviut · Answer 2 · 2019-05-29T15:35:25.957

Promises chain, so you need to take the promise that Axios returns, perform any handling you might need to do, then return it from your callApi method. In your other methods where you're calling callApi you handle the returned promise and put any code that has to run after the API has responded in the handler function.

callApi() {
  return axios.get('/api')
   .then(() => {
     // this gets handled first
   })
},
firstMethod() {
  this.callApi()
  .then(() => {
    // this gets handled second
  })
},
secondMethod() {
  this.callApi()
  .then(() => {
    // or this gets handled second
  })
}

Execute method after all promises inside of a given method resolved

2 Answers2