Learning to use Async Await

If you’re familiar with javascript promises, this is the next iteration of that — more succinct and flexible. Async Await is really just…

Learning to use JavaScript’s Async Await

Having worked across sites raking in over 50 billion website visits annually with Higglo Digital I write about tech topics and teach engineers to have solid foundations that will help them get ahead in their career. I also build awesome products for digital nomads — check it out!

JavaScript eBook

I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. Check out the ebook now!

If you’re familiar with javascript promises, this is the next iteration of that — more succinct and flexible. Async Await is really just syntactical sugar built on top of promises. So why on earth are they that much better if it’s really the same implementation underneath the hood? Well there are quite a few reasons. But first let’s take a look at how to use it.

How We Async/Await

Below we’re going to call a function that makes an API request and returns some data using promises.

const requestData = () => {
try {
return apiGetData()
.then(data => {
return data
}
)
 
.catch(err => {
 
}
)
} catch (err) {
 
}
 
return await apiGetData()
} catch (err) {
 
}
 
``` }
 
As you see, we prepend the function with `async` , then we use the keyword `await` before we call a promisified function. In this case, our program will wait for the promisified function to return a value until it proceeds. 
### Why Async/await is better than using promises
 
#### 1. Concise
 
Using the async/await pattern will help to condense the amount of boilerplate code, nesting and chaining you’ve had to do previously. Below is an example of using promises.
 
.then(data => data)
 

requestData()`

requestData()`

2. Error Handling

With async/await, error handling becomes much more readable.

const requestData = () => {
try {
apiGetData()
.then(data => {
return data
}
)
.catch(err => {
console.log(err)
})
} catch (err) {
console.log(err)
}
 
return await apiGetData()
} catch (err) {
console.log(err)
}
}
 

4. Conditionals

Imagine something like the code below which fetches some data and decides whether it should return that or get more details based on some value in the data.

const requestData = () => {
return apiGetData()
.then(data => {
if (data.needsMoreData) {
return makeAnotherRequest(data)
.then(extraData => {
return extraData
})
}
 else {
```javascript
return data
}
})
 }

This is messy, and sadly this is something you’ll see in your day to day job. But don’t be the person that leaves behind code like this for your colleagues. It’s easy to get lost in nesting, conditionals, braces, and return statements that propagate up the final result.

Now let’s try this again with async/await!

const requestData = async () => {
const data = await apiGetData()
if (data.needsMoreData) {
const extraData = await makeAnotherRequest(data);
return extraData
}
 else {
return data 
}
}

Conclusion

There you have it. Async/await should be your go-to over promises or callbacks. As projects grow, readability and cleanliness are one of the most important factors that will help you to reduce tech debt over time.

JavaScript eBook

I’ve written an eBook on JavaScript that will take you from beginner to professional. Having been in your shoes moving to making over $200,000 per year in just a few years as a software engineer, I know exactly what it takes to get there. Check out the ebook now!

I founded Higglo Digital and we can help your business crush the web game with an award-winning website and cutting-edge digital strategy. If you want to see a beautifully designed website, check us out.

I also created Wanderlust Extension to discover the most beautiful places across the world with highly curated content. Check it out!