JavaScript Async & Await

JavaScript is now one of the most popular languages in this century with flexibility for writing apps for web and multiple other platforms which were previously dominated by many other enterprise technologies. As we already know the language is evolving per day as we make it more flexible for the developers using it.

Today we will look into async and await , one of the useful features provided by ES6.

How was developing before Async & Await ?

const getUsers = () => {
  return fetch('/users.json')
    .then(response => response.json()) // parse JSON
    .then(users => users[0]) // pick first user
    .then(user => fetch(`/users/${user.id}`)) // get user data
    .then(userResponse => userResponse.json()) // parse JSON
}

getUsers()

Here is an example which fetches the users from user.json file and then fetch the first user's details from another endpoint with the user id. This is written using promises and we are chaining the promises together to make these actions synchronous.

After Async & Await ?

const getUsers = async () => {
  const response = await fetch('/users.json') // get users list
  const users = await response.json() // parse JSON
  const user = users[0] // pick first user
  const userResponse = await fetch(`/users/${user.id}`) // get user data
  const userData = await userResponse.json() // parse JSON
  return userData
}

getUsers()

In the above example we have removed the promise chaining and used ES6 Async/Await to accomplish the same task. Here as you can see the the code is more readable and much easier to understand and debug when compared to previous one. One thing to understand is that we can only use await inside and async function and the awaited function should return a promise. If the awaited function is not explicitly returning a promise. The JavaScript engine will wrap the return value to a promise object.