JS Async/Await

Think of following a recipe step by step, wait for the water to boil, then add the pasta, then wait again before draining it, each step reads naturally in order, even though some steps genuinely take time to finish. async and await let asynchronous JavaScript code read that same natural, top-to-bottom way, instead of chaining .then() calls, you write await before a promise and the code pauses right there until it's ready, without freezing the rest of the page. This makes asynchronous logic, like fetching a tutorial's data on cookiescursor.com, dramatically easier to read and reason about.

In this page:

The async Keyword
The await Keyword
Error Handling With try/catch
async/await vs Promises
A Practical Example

Syntax

javascript

async function functionName() {
  try {
    const result = await promise;
  } catch (error) {
    // handle error
  }
}

The async Keyword

Placing async before a function declaration marks it as asynchronous, allowing the use of await inside it, and automatically making the function itself return a promise, even if it looks like it returns a plain value.

Note: Any function that needs to use await, anywhere inside it, must itself be declared with the async keyword.

Warning: An async function always returns a promise, even a simple return text; inside it actually returns a promise that resolves to that text.

उदाहरण: The async Keyword

javascript

async function getValue() {
  return 42;
}
getValue().then(v => console.log(v)); // async function returns a promise

The await Keyword

await pauses an async function's execution at that exact line until the promise it's waiting on settles, then resumes with the resolved value, letting asynchronous code read in a natural, sequential order.

Note: await only pauses the async function it's inside, the rest of the page and any other code continues running normally in the meantime.

Warning: Using await on a value that isn't a promise still works, but it simply resolves immediately, it's not an error, just unnecessary in that case.

उदाहरण: The await Keyword

javascript

// Define the asynchronous function `run` with no parameters
// Define the asynchronous function `run` with no parameters
async function run() {
  // Declare the constant `value`, set to `await Promise.resolve(10)`
  // Declare the constant `value`, set to `await Promise.resolve(10)`
  const value = await Promise.resolve(10);
  // Print `value` to the console
  // Print `value` to the console
  console.log(value);
}
// Call `run()`
// Call `run()`
run();

Error Handling With try/catch

Wrapping await statements in a try block lets you catch a rejected promise's error in the matching catch block, providing a clean, familiar way to handle asynchronous errors without chaining .catch().

Note: try/catch around await reads very similarly to handling errors in regular synchronous code, which is one of async/await's biggest readability advantages.

Warning: An await inside a try block that isn't actually followed by a matching catch still throws normally, uncaught errors in async functions can silently fail elsewhere.

उदाहरण: Error Handling With try/catch

javascript

// Define the asynchronous function `run` with no parameters
// Define the asynchronous function `run` with no parameters
async function run() {
  // Try running this block; jump to `catch` if it throws
  // Try running this block; jump to `catch` if it throws
  try {
    // Wait for `Promise.reject("failed")` to resolve before continuing
    // Wait for `Promise.reject("failed")` to resolve before continuing
    await Promise.reject("failed");
  // Catch any error, bound to `err`
  // Catch any error, bound to `err`
  } catch (err) {
    // Print `"Caught:", err` to the console
    // Print `"Caught:", err` to the console
    console.log("Caught:", err);
  }
}
// Call `run()`
// Call `run()`
run();

async/await vs Promises

async/await is built directly on top of promises, it's essentially a more readable syntax for the same underlying mechanism, which is why the two approaches can be mixed freely, and why understanding promises first makes async/await easier to grasp.

Note: For simple, single-step asynchronous code, either style works well, async/await tends to shine most clearly once you have several sequential steps.

Warning: Since async/await is built on promises, any function you await must still actually return a promise, awaiting a non-promise function doesn't make it asynchronous.

उदाहरण: async/await vs Promises

javascript

// Same result, two styles:
Promise.resolve(5).then(v => console.log(v));

async function run() {
  const v = await Promise.resolve(5);
  console.log(v);
}
run();

A Practical Example

Combining async/await with try/catch and multiple sequential steps shows the real strength of this pattern, complex asynchronous logic reads almost like straightforward, synchronous code.

Note: When several async steps genuinely don't depend on each other, use Promise.all with await together rather than awaiting them one at a time unnecessarily.

Warning: Awaiting independent operations sequentially, one after another, when they could run simultaneously, unnecessarily slows down your code.

उदाहरण: A Practical Example

javascript

// Define the asynchronous function `getUser` with no parameters
// Define the asynchronous function `getUser` with no parameters
async function getUser() {
  // Try running this block; jump to `catch` if it throws
  // Try running this block; jump to `catch` if it throws
  try {
    // Declare the constant `id`, set to `await Promise.resolve(1)`
    // Declare the constant `id`, set to `await Promise.resolve(1)`
    const id = await Promise.resolve(1);
    // Declare the constant `name`, set to `await Promise.resolve("Sam")`
    // Declare the constant `name`, set to `await Promise.resolve("Sam")`
    const name = await Promise.resolve("Sam");
    // Print `id, name` to the console
    // Print `id, name` to the console
    console.log(id, name);
  // Catch any error, bound to `err`
  // Catch any error, bound to `err`
  } catch (err) {
    // Print `"Error:", err` to the console
    // Print `"Error:", err` to the console
    console.log("Error:", err);
  }
}
// Call `getUser()`
// Call `getUser()`
getUser();

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS Promises Next Lesson → JS Async Callbacks

JS Async/Await

The async Keyword

The await Keyword

Error Handling With try/catch

async/await vs Promises

A Practical Example

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code