DEV Community

Cover image for Handling JavaScript Promises with Async/Await
Kristen Kinnear-Ohlmann
Kristen Kinnear-Ohlmann

Posted on • Originally published at kristenkinnearohlmann.dev

Handling JavaScript Promises with Async/Await

While working on a Node.js project at work recently, I had the opportunity to expand on a number of concepts I learned during my bootcamp studies. I really got into a zen place where I was jamming out code the way I had during my projects!!

One of the things I delved into was learning async/await. The sample code we were using as a resource was using async/await to ensure data was returning from a call to a remote source. While I understood in theory how it should work, I hadn't had the chance to implement that syntax myself. I recalled one of my Flatiron instructors stating that I would be able to understand async/await when I was ready to study it, so I held onto that thought and dove into the code.

During my bootcamp studies, I learned to resolve promises by chaining callbacks, like this simple GET request.

const getCats = () => {
    return fetch('./cats.json') // get the contents of a file
        .then(response => response.json()) // parse the return data as JSON
        .then(data => {
            console.log(data) // display the data in the console
        })
}
Enter fullscreen mode Exit fullscreen mode

One of the reasons I selected Flatiron School for my studies was their use of spaced repetition to cement a concept. I practiced writing these kinds of promise resolutions at various intervals across several weeks. Both the syntax and the way the code was handling the data and callbacks became very ingrained in my working memory.

Because of this deep-seated knowledge, I was quickly able to comprehend and apply the example provided in the official Node documentation knowledge article "Modern Asynchronous JavaScript with Async and Await" to switch to using async and await. I explained the concepts to my colleagues with a similar alignment to that included in the article; the analogous lines are marked with the same comment.

Resolving promises with callbacks

const getCats = () => {
    return fetch('./cats.json') // get the contents of a file
        .then(response => response.json()) // parse the return data as JSON
        .then(data => {
            console.log(data) // display the data in the console
        })
}
Enter fullscreen mode Exit fullscreen mode

Resolving promises with async/await

const getCats = async () => {
    const response = await fetch('./cats.json') // get the contents of a file
    const data = await response.json() // parse the return data as JSON
    console.log(data) // display the data in the console
}
Enter fullscreen mode Exit fullscreen mode

Using async/await makes the code easier to read and understand. Per the Node.js article, another benefit relates to debugging. Because the compiler sees async/await as similar to synchronous code, it is possible to step into the code and resolve issues.

I enjoyed implementing an elegant solution using async/await and will be looking for more opportunities to practice using this new tool.

Discussion (1)

Collapse
srikanth597 profile image
srikanth597

But also be careful about catching exceptions from n/w calls.
There are 2 types of error handling with Fetch API that should be handled.

  1. Surrounding Try Catch block on Fetch request to handle client side errors.
  2. Handling Server side errors by throwing error if response staus not 2**.

With this 2 steps you will be more than safe in most cases.