解决给定方法内的所有承诺后执行方法

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 ?

Answer 1

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

Answer 2

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