Topic 10630 min readStructured Tutorial

Async and Await in Asynchronous JavaScript

Quick Answer

Async and await are modern JavaScript features that simplify working with asynchronous code by allowing you to write promise-based code in a synchronous style. Async functions return promises, and await pauses execution until the promise resolves, improving readability and error handling.

Learning Objectives

Explain the purpose of Async and Await in a practical learning context.
Identify the main ideas, terms, and decisions involved in Async and Await.
Apply Async and Await in a simple real-world scenario or practice task.

Introduction to Async and Await

Asynchronous programming is essential in JavaScript to handle operations like network requests or file reading without blocking the main thread.

Async and await are language features introduced in ES2017 that make asynchronous code easier to write and understand compared to traditional callbacks or promises.

Writing asynchronous code should be as easy as synchronous code.

Understanding Promises

Promises represent the eventual completion or failure of an asynchronous operation and its resulting value.

They have three states: pending, fulfilled, and rejected.

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: Operation completed successfully.
Rejected: Operation failed with an error.

What is Async Function?

An async function is a function declared with the async keyword that always returns a promise.

Inside an async function, you can use the await keyword to pause execution until a promise resolves.

Async functions simplify chaining promises.
They improve code readability by avoiding nested callbacks.

Using Await

The await keyword can only be used inside async functions.

It pauses the function execution until the awaited promise settles and returns the resolved value.

Makes asynchronous code look synchronous.
Helps handle asynchronous results directly without .then() chaining.

Error Handling with Async/Await

Errors in async functions can be caught using try...catch blocks.

This approach is cleaner and more intuitive than handling errors with promise .catch() methods.

Wrap await calls in try...catch to handle rejections.
Allows synchronous style error handling for asynchronous code.

Practical Example

Let's see how async and await simplify fetching data from an API.

Practical Example

This example defines an async function that fetches user data from an API. It uses await to pause until the fetch and JSON parsing complete. Errors are caught with try...catch.

Examples

Fetching Data with Async/Await

async function fetchUser() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Error fetching user:', error);
  }
}

fetchUser();

This example defines an async function that fetches user data from an API. It uses await to pause until the fetch and JSON parsing complete. Errors are caught with try...catch.

Best Practices

Always use try...catch blocks to handle errors in async functions.
Avoid using await in loops; use Promise.all for concurrent operations.
Keep async functions focused and avoid mixing synchronous and asynchronous logic unnecessarily.
Name async functions clearly to indicate their asynchronous nature.

Common Mistakes

Using await outside of async functions, which causes syntax errors.
Not handling promise rejections leading to unhandled promise errors.
Blocking the main thread by awaiting long-running operations unnecessarily.
Ignoring concurrency by awaiting promises sequentially when parallel execution is possible.

Hands-on Exercise

Convert Promise to Async/Await

Rewrite a function that uses .then() and .catch() to use async and await syntax instead.

Expected output: Function rewritten using async/await with equivalent behavior.

Hint: Declare the function as async and replace .then() with await. Use try...catch for error handling.

Handle Multiple Async Calls

Write an async function that fetches data from two APIs concurrently and logs both results.

Expected output: Both API results logged without sequential delays.

Hint: Use Promise.all with await to run promises in parallel.

Interview Questions

What does the async keyword do in JavaScript?

Interview

The async keyword declares a function that always returns a promise and allows the use of await inside it to pause execution until promises resolve.

Can you use await outside of an async function?

Interview

No, await can only be used inside async functions. Using it outside results in a syntax error.

How does error handling differ when using async/await compared to promises?

Interview

With async/await, errors can be handled using try...catch blocks, making error handling more straightforward compared to chaining .catch() on promises.