learn2kode.in

Menu

JavaScript Tutorial

Menu

Introduction to Async / Await in JavaScript

Async / Await is a modern JavaScript feature that makes working with asynchronous code simpler, cleaner, and more readable. It is built on top of Promises and helps you write asynchronous logic that looks and behaves like synchronous code.

Before async/await, developers relied heavily on callbacks and Promise chains, which could become hard to read and maintain. Async/await solves this problem.

Why Use Async / Await?
  • Makes async code easy to understand
  • Avoids deeply nested .then() chains
  • Improves error handling
  • Cleaner and more maintainable code
  • Widely used in modern JavaScript, frameworks, and APIs

What Is async?

The async keyword is used to declare a function that always returns a Promise.

Example

Copy Text 
async function greet() {
  return "Hello World";
}

greet().then(message => console.log(message));
Even though we return a string, JavaScript automatically wraps it inside a Promise.

What Is await?

The await keyword is used inside an async function to pause execution until a Promise is resolved.

Copy Text 
async function fetchData() {
  let response = await fetch("https://api.example.com/data");
  let data = await response.json();
  console.log(data);
}
  • await waits for the Promise to complete
  • Code runs line by line, just like synchronous code
Async / Await with Promises
Without Async / Await
Copy Text 
fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));
With Async / Await
Copy Text 
async function getData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}
  • Easier to read
  • Better error handling
  • Cleaner structure
Error Handling with Try…Catch
Async/await uses try…catch blocks to handle errors.
Copy Text 
async function loadUser() {
  try {
    const response = await fetch("/user");
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error("Error loading user:", error);
  }
}
  • This works just like error handling in synchronous code.

Async / Await vs Promises

Feature Promises Async / Await
Syntax .then() chaining Looks synchronous
Readability Medium High
Error Handling .catch() try...catch
Modern Usage Supported Preferred

Common Use Cases of Async / Await

  • Fetching API data
  • Handling database requests
  • Reading files
  • Working with timers
  • Form submissions
  • Authentication flows

Important Rules to Remember

  • await must be inside an async function
  • Async functions always return Promises
  • Use try...catch for error handling
  • Avoid mixing .then() with await unnecessarily

Best Practices

  • Use async/await for readability
  • Keep async functions small and focused
  • Handle errors properly
  • Avoid blocking long loops inside async functions
JavaScript Promises
JavaScript Web APIs