How to Use Async and Await in JavaScript

JavaScript's async and await keywords, introduced in ECMAScript 2017, revolutionized how developers handle asynchronous operations. They provide a more readable and convenient way to work with Promises, making asynchronous code appear more like synchronous code.

What are async and await?

• async: The async keyword is used to declare an asynchronous function. An asynchronous function returns a Promise, implicitly making it a Promise-returning function.

• await: The await keyword can only be used inside an async function. It pauses the execution of the async function, waiting for the Promise to resolve or reject. Once resolved, it returns the result. If the Promise is rejected, it throws an error, which can be caught using try...catch.

Basic Usage

Here's a simple example to illustrate the use of async and await:

// Simulate an asynchronous operation with a Promise
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched successfully');
    }, 2000);
  });
}

// Declare an async function
async function getData() {
  try {
    // Use await to wait for the Promise to resolve
    const data = await fetchData();
    console.log(data); // Output: Data fetched successfully
  } catch (error) {
    console.error('Error:', error);
  }
}

// Call the async function
getData();

In this example:

• The fetchData function simulates an asynchronous operation using a Promise that resolves after 2 seconds.

• The getData function is declared as async, allowing the use of await inside it to pause execution until fetchData resolves.

• If fetchData throws an error, it will be caught by the catch block in getData.

Handling Multiple Promises

When dealing with multiple asynchronous operations, async and await can make the code much cleaner and easier to follow compared to chaining .then() and .catch().

function fetchUser() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: 1, name: 'John Doe' });
    }, 1000);
  });
}

function fetchPosts(userId) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['Post 1', 'Post 2', 'Post 3']);
    }, 1000);
  });
}

async function getUserData() {
  try {
    const user = await fetchUser();
    const posts = await fetchPosts(user.id);
    console.log('User:', user);
    console.log('Posts:', posts);
  } catch (error) {
    console.error('Error:', error);
  }
}

getUserData();

In this example:

• fetchUser and fetchPosts are asynchronous functions that return Promises.

• The getUserData function uses await to wait for both Promises to resolve sequentially, making the code easy to read and understand.

Parallel Execution with Promise.all

Sometimes, you want to run asynchronous operations in parallel to improve performance. You can achieve this with Promise.all combined with async and await.

function fetchData1() {
  return new Promise(resolve => setTimeout(() => resolve('Data 1'), 1000));
}

function fetchData2() {
  return new Promise(resolve => setTimeout(() => resolve('Data 2'), 1000));
}

async function getAllData() {
  try {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
  } catch (error) {
    console.error('Error:', error);
  }
}

getAllData();

In this example:

• fetchData1 and fetchData2 are called concurrently.

• Promise.all waits for all Promises to resolve and returns an array of results, which is then destructured into data1 and data2.

Error Handling

Error handling in async/await is straightforward with try...catch.

function fetchDataWithError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('Something went wrong'));
    }, 1000);
  });
}

async function getDataWithErrorHandling() {
  try {
    const data = await fetchDataWithError();
    console.log('Data:', data);
  } catch (error) {
    console.error('Caught an error:', error);
  }
}

getDataWithErrorHandling();

In this example:

• If fetchDataWithError rejects, the error is caught in the catch block, and the error message is logged.