How to implement Promise's then in async/await?

Question

I have a following async/await method:

async todo() {
    const res = await axios.get('/todo')
}

getTodo() {
    this.todo()
}

Now, in async/await, how do you know that request is completed (200)? In Promises, we simply use then:

// store/todo.js
todo() {
    const res = axios({
        method: 'GET',
        url: '/todo'
    })
    return res
}

// components/Todo.vue
getTodo() {
    this.todo().then(res => {
        console.log('Request Executed Successfully!')
    })
}

This works perfectly but when I try to add async/await in getTodo and execute something like this:

async todo() {
    try {
      const res = await axios.get('/todo')
      return res
    } catch(e) {
      console.log(e)
    }
}

async getTodo() {
  try {
    await this.todo()
    console.log('Request Completed')
  } catch(e) {
    console.log(e)
  }
}

Demo: https://jsfiddle.net/jfn483ae/

It just doesn't work. The log gets executed before the request is completed i.e. after some error has occured. Please help.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Ben Fortune, Mar 08 '19 at 10:10
"The log gets executed before the request is completed. " — No, that won't happen. — Quentin, Mar 08 '19 at 10:10
https://jsbin.com/ropuwejomo/1/edit?html,js,console — I can't reproduce the problem. — Quentin, Mar 08 '19 at 10:13
I added a Vue Demo! Please check. There's error but still logs the result. — Axel, Mar 08 '19 at 10:34
@Quentin You can add a wrong URL in your code too! You still get the log. — Axel, Mar 08 '19 at 10:40
@Sanjay — When you said "how do you know that request is completed?" did you mean to ask "How can you tell the difference between a request completing and an exception being thrown?" — Quentin, Mar 08 '19 at 10:42
@Quentin Yes, exactly! And sorry for the incomplete posting. — Axel, Mar 08 '19 at 10:50
In the main function where the async request is performed, I can catch the error but in other function it doesn't actually work. — Axel, Mar 08 '19 at 10:51
In the code in the question you don't try to catch it, in the code in beyond the link, you catch it in `getTodo`. The exception won't show up in the calling function because you **already** caught it. — Quentin, Mar 08 '19 at 10:53
I don't know if it makes sense to label this as duplicate, but this other answer surely will help you: https://stackoverflow.com/questions/51686223/javascript-promise-then-and-catch-firing-at-the-same-time/51686398#51686398 — Sergeon, Mar 08 '19 at 11:12

score 2 · Accepted Answer · answered Mar 08 '19 at 11:54

The log gets executed […] after some error has occured.

Yes, in your new todo method you catch the error and then return undefined as a normal result. Just don't use try/catch when you cannot handle the error, use the same code as you did orignally and the promise will work the same when you await it:

todo() {
  return axios({
    method: 'GET',
    url: '/todo'
  })
}
async getTodo() {
  try {
    await this.todo()
    console.log('Request Completed')
  } catch(e) {
    console.log(e)
  }
}

Seems a better way to do! Thanks! – Axel Mar 08 '19 at 12:08 — Axel, Mar 08 '19 at 12:08

How to implement Promise's then in async/await?

1 Answers1