Syntax sugar: async and await — Javascript Promises: part III

Our series is hitting its third part, now it’s time to talk about async and await. But, if you arrived to this article, I recommend check the first two articles. On the first one we talk about what is a Promise, on the second one we create our own Promises.

Now, let’s make things more “beautiful” and get a code more comprehensive. The keywords async and await were introduced in the ECMAScript 2017 release. Before that, those keywords didn’t exist.

But, what does it do?

The syntax sugar for Promises

Syntax sugar is basically a way “to sweeten” your code, making its syntax easier to understand. Here is an important information: async and await do not introduce any new behavior, it just make things easier to write.

So, everything we learned about Promises is still valid.

Let’s be honest, Promises are really powerful, however it is not the more prettiest thing to work with.

const axios = require('axios')
const promise = axios.get('https://api.github.com/user/diegohq')
promise.then(res => console.log(res))

This example isn’t so bad, but assume we have another Promise to run after (and only when) the first Promise is resolved:

const axios = require('axios')
const result = axios.get('https://wizard-world-api.herokuapp.com/Houses')
result.then(res => {
    console.log(res)
    return axios.get('https://wizard-world-api.herokuapp.com/Spells')
}).then(res => console.log(res))

Here, we create a Promise, and after it is resolved another Promise is created and resolved.

It starts to get a little confusing. And imagine several levels of Promises and then methods.

async and await to rescue us

And if is there a way to wait the Promise be resolved and then continue the execution?

let result = await axios.get('https://wizard-world-api.herokuapp.com/Houses')
console.log(result)
result = await axios.get('https://wizard-world-api.herokuapp.com/Spells')
console.log(result)

That’s exactly what await does. It waits the Promise be resolved and then continue the execution.

But, to do so, you must create an async function:

const axios = require('axios')
async function api() {
    let result = await axios.get('https://wizard-world-api.herokuapp.com/Houses')
    console.log(result)
    result = await axios.get('https://wizard-world-api.herokuapp.com/Spells')
    console.log(result)
}
api()

The async keyword indicates the function is asynchronous, while the await indicates the execution must wait until the Promise is resolved.

You can only use await inside an async function. Otherwise you will get a syntax error:

await is only valid in async functions and the top level bodies of modules

If the Promise you are awaiting is rejected, it will throw an error. And you can use a regular try-catch block to threat it.

try {
    const result = await axios.get('https://wizard-world-api.herokuapp.com/House') // This URL does not exist
    console.log(result)
} catch(err) {
    console.error(err)
}

In this case, err will receive the reject information.

All I see are Promises

As I said, async and await are just sugar syntax; under the hood we are dealing with Promises.

When we create an async function, it turns this function into a Promise and we can use the Promise methods to deal with it.

const axios = require('axios')
async function api() {
    const result = await axios.get('https://wizard-world-api.herokuapp.com/Houses')
    return result.data[0]
}
api().then(res => console.log(res))

The api() returns a Promise! And we can use then and catch methods. Or we could use await .

const axios = require('axios')
async function api() {
    const result = await axios.get('https://wizard-world-api.herokuapp.com/Houses')
    return result.data[0]
}
const res = await api()
console.log(res)

Now, when to use each? It’s up to you, both are the same thing. Whenever I can, I use async and await because I think is more easy to understand.

Our next is step is to learn more about some special Promise methods. See you on our next article.

Cheers!