Async/await in JavaScript

In this article we'll understand the async-await keyword of JavaScript. Before understanding what something is, it is always a good idea to know why it exist at all. So to answer that question look at this code which isn't using async-await keyword:

function fetchUser() {
  fetch("https://api.example.com/user")
    .then(response => response.json())
    .then(data => {
      console.log("User:", data);
      return fetch(`https://api.example.com/posts/${data.id}`);
    })
    .then(response => response.json())
    .then(posts => {
      console.log("Posts:", posts);
    })
    .catch(err => {
      console.log("Error:", err);
    });
}

At first glance, this might look fine. But as the logic grows:

Multiple .then() chains make it harder to follow
Error handling becomes less intuitive
Code readability decreases

This is exactly why async/await was introduced

Why Async/Await Was Introduced

Async/await is syntactic sugar over Promises.

It doesn’t replace Promises — it simply provides a cleaner and more readable way to write asynchronous code.

Problems it solves:

Deep .then() chaining
Callback-like nesting
Difficult debugging in complex flows

How Async Functions Work

An async function always returns a Promise.

async function greet() {
  return "Hello";
}

This is equivalent to:

function greet() {
  return Promise.resolve("Hello");
}

Even if you return a normal value, JavaScript wraps it inside a Promise.

Await Keyword Concept

The await keyword can only be used inside an async function.

It pauses execution until a Promise is resolved.

async function fetchUser() {
  let response = await fetch("https://api.example.com/user");
  let data = await response.json();

  console.log("User:", data);

  let postResponse = await     fetch(`https://api.example.com/posts/${data.id}`);
  let posts = await postResponse.json();

  console.log("Posts:", posts);
}

What changed?

No .then() chaining
Step-by-step execution
Much easier to read and understand

It looks like synchronous code, but it’s still asynchronous under the hood.

Error Handling with Async Code

Instead of .catch(), async/await uses try...catch.

async function fetchUser() {
  try {
    let response = await fetch("https://api.example.com/user");
    let data = await response.json();

    let postResponse = await fetch(`https://api.example.com/posts/${data.id}`);
    let posts = await postResponse.json();

    console.log(posts);
  } catch (error) {
    console.log("Error:", error.message);
  }
}

Why this is better:

Cleaner structure
Centralized error handling
Similar to synchronous programming

Comparison with Promises

Using Promises:

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.log(err));

Using Async/Await:

async function getData() {
  try {
    let res = await fetch("https://api.example.com/data");
    let data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

Key Differences:

Feature	Promises	Async/Await
Syntax	`.then()` chains	Clean & linear
Readability	Medium	High
Error Handling	`.catch()`	`try...catch`

Why Async/Await Improves Readability

Code flows top-to-bottom
Less nesting
Easier to debug
More intuitive for beginners

You write async code the same way you think about it.

Final Thoughts

Async/await is one of the most important features in modern JavaScript.

It is built on top of Promises
Makes asynchronous code cleaner
Reduces complexity in real-world applications

Quick Summary

async → makes a function return a Promise
await → pauses execution until Promise resolves
Works only inside async functions
Uses try...catch for error handling
Improves readability significantly

Once you start using async/await, going back to .then() chains will feel unnecessarily complicated

Async/Await in JavaScript: Writing Cleaner Asynchronous Code

Comments

More from this blog

How Instagram Stores Reels, Photos, and Drafts Behind the Scenes

How WhatsApp Works Without Internet: Offline Messaging and Sync Explained

Expo Router vs React Navigation - Which One Should You Use in 2026?

How Instagram, WhatsApp, Uber & Netflix Would Be Built Today Using Expo Router

How React Virtual DOM works under the hood

Why Async/Await Was Introduced

Problems it solves:

How Async Functions Work

Await Keyword Concept

What changed?

Error Handling with Async Code

Why this is better:

Comparison with Promises

Using Promises:

Using Async/Await:

Key Differences:

Why Async/Await Improves Readability

Final Thoughts

Quick Summary

Command Palette

Comments

More from this blog

Why Async/Await Was Introduced

Problems it solves:

How Async Functions Work

Await Keyword Concept

What changed?

Error Handling with Async Code

Why this is better:

Comparison with Promises

Using Promises:

Using Async/Await:

Key Differences:

Why Async/Await Improves Readability

Final Thoughts

Quick Summary