⚡ JavaScript Async / Await

? Quick Overview

async and await are modern JavaScript features that simplify working with Promises, making asynchronous code look and behave more like synchronous code. They help you write cleaner, more readable logic for tasks like fetching data from APIs, waiting for timers, or handling long-running operations.

? Key Concepts

• async function always returns a Promise, even if you explicitly return a normal value.
• await pauses the execution of an async function until a Promise settles (resolves or rejects).
• You can handle success with normal code after await and handle errors using try...catch.
• async/await is built on top of Promises – it’s just a nicer syntax, not a separate feature.

? Syntax & Theory

To declare an asynchronous function, use the async keyword before the function definition. Inside that function, you can use await in front of any expression that returns a Promise.

Key rules:

• await can only be used inside an async function (in normal JavaScript files).
• When the awaited Promise resolves, execution continues with the resolved value.
• If the Promise rejects, an error is thrown at the await line and can be caught in a try...catch block.

? Code Examples

? async function returning a Promise

A simple async function that returns a value. JavaScript wraps this value in a Promise.

async function myFunction() {
  return "Hello!";
}

myFunction().then(alert); // Alerts "Hello!"

⏳ Using await with fetch()

Here, await pauses the function until fetch() and then response.json() are completed.

async function fetchData() {
  let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  let data = await response.json();
  console.log(data);
}

⏱️ Waiting for a custom Promise

This example uses a Promise that resolves after 2 seconds using setTimeout(), then awaits it.

function delay() {
  return new Promise(resolve => {
    setTimeout(() => resolve("Done!"), 2000);
  });
}

async function run() {
  console.log("Waiting...");
  let result = await delay();
  console.log(result); // "Done!"
}

run();

⚖️ Handling errors with try...catch

Use try...catch inside an async function to handle rejected Promises.

async function loadData() {
  try {
    let response = await fetch("https://invalid-url.com");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error.message);
  }
}

? Async function still works with then()

An async function returns a Promise, so you can still use .then() on it if you want.

async function getUser() {
  return "John";
}

getUser().then(alert); // Alerts "John"

? Interactive Example

Click the button to run an async function that simulates loading data with a delay.

? Live Output / Explanation

? When to Use Async / Await

• Whenever you have multiple Promise-based operations that should happen in sequence.
• When you want to avoid deeply nested .then() chains (“Promise hell”).
• When you need clear error handling around several async steps in a row.