⚡ JavaScript Async / Await

Last Updated: 27th October 2025

async and await were introduced in ES2017 (ES8) to simplify working with Promises.
They make asynchronous code look and behave like synchronous code, reducing complexity and avoiding “callback hell” or too many .then() chains.

Hinglish Tip 🗣: async/await ko samjho “Promises ka shortcut version” — likhne me simple, samajhne me easy!

async ?

You define an async function using the async keyword before it.
An async function always returns a Promise, even if you don’t explicitly return one.

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

greet().then((msg) => console.log(msg)); // Output: Hello Async!

🗣 Hinglish: Agar function ke aage async lagao, to wo automatically Promise ban jaata hai.

await?

You can use await only inside an async function.
It pauses the function execution until the Promise resolves (or rejects).
It makes async code look linear, just like synchronous code.

async function getData() {
  console.log("Fetching data...");
  let data = await new Promise((resolve) =>
    setTimeout(() => resolve("✅ Data received!"), 2000)
  );
  console.log(data);
}

getData();

Hinglish Tip 🗣: await bole to — “thoda ruk jao, jab tak Promise complete nahi hota.”

⚙️ Error Handling with try...catch

You can wrap await calls in a try...catch block to handle errors just like normal synchronous code.

async function getUser() {
  try {
    let res = await fetch("https://api.invalid-url.com/user");
    let data = await res.json();
    console.log("User:", data);
  } catch (error) {
    console.error("❌ Failed to fetch user:", error.message);
  } finally {
    console.log("🎯 Operation finished");
  }
}

getUser();

Hinglish Tip 🗣: try...catch async code me bhi waise hi kaam karta hai jaise normal code me — bus await lagana na bhoolna!

Fetching Multiple Data Points

You can fetch multiple data points in parallel using Promise.all().

async function getUsersAndPosts() {
  try {
    let [users, posts] = await Promise.all([
      fetch("https://jsonplaceholder.typicode.com/users").then((res) =>
        res.json()
      ),
      fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
        res.json()
      ),
    ]);

    console.log("👥 Users:", users.length);
    console.log("📝 Posts:", posts.length);
  } catch (error) {
    console.error("❌ API Error:", error);
  }
}

getUsersAndPosts();

Hinglish Tip 🗣: Agar multiple fetch requests hoti hai, to Promise.all() perfect hai.

Loading JSON Files Asynchronously

async function loadJSON() {
  try {
    const response = await fetch("/data/products.json");
    const products = await response.json();
    console.log("✅ Products:", products);
  } catch (err) {
    console.error("❌ Failed to load JSON:", err);
  }
}

loadJSON();

Key Points To Remember

✅ Always wrap await calls in try...catch.
✅ Use .finally() to close loaders or cleanup tasks.
✅ Don’t mix callbacks and promises unnecessarily.
✅ Prefer async/await for cleaner, modern code.
✅ Always handle rejected Promises to avoid app crash.

|| राम नाम सत्य है ||

← Previous Next →