Promises vs async/await in JavaScript

Introduction

In this tutorial, you will learn about JavaScript promises vs async/await.

JavaScript provides Promises and async/await to handle asynchronous operations like API calls, database queries, etc.

What is a Promise?

Promise is used to handle asynchronous operations. It has three states.

  1. Pending
  2. Fulfilled
  3. Rejected

Note: We use Promises, when you need parallel execution,

Example 1:


const data = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data received");
  }, 2000);
});

Example 2:


fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

What is async/await?

async/await is used to handle asynchronous operations. It makes async code look like synchronous code.

Example:


async function fetchData() {
  const data = await fetch(url);
  return data;
}

Difference between Promises vs async/await

Promises async/await
In the syntax, it has .then() In the syntax, It has await
It is more complex to read It is very Cleaner & readable
Debugging is very hard. Debugging is very easy.
Prmises has chaining. There is no need chaining in async/await

What is the common mistake in async/await

A developer can make a mistake when using async/await.

1. Using await without async.

2. Using forEach with async/await.

3. Forgetting error handling.

Real-Life Example: Fetching User Data from an API

Suppose you need to fetch user information from a server API. This is an asynchronous task because the data comes from a remote server.

Example Using Promises


function getUser() {
  return fetch("https://api.example.com/user")
    .then(response => response.json())
    .then(data => {
      console.log("User Data:", data);
    })
    .catch(error => {
      console.error("Error:", error);
    });
}
getUser();

Example Using async/await


async function getUser() {
  try {
    const response = await fetch("https://api.example.com/user");
    const data = await response.json();
    console.log("User Data:", data);
  } catch (error) {
    console.error("Error:", error);
  }
}
getUser();

Explanation:

Both examples perform the same task: fetching user data from an API.

  1. Promises use .then() and .catch() to handle results and errors.
  2. async/await allows you to write asynchronous code in a synchronous looking style.
  3. await pauses the execution of the function until the promise resolves.
  4. Error handling becomes cleaner with try…catch.

Note: In Modern JavaScript, async/await is usually preferred because it improves readability and code easier to manage.

Interview Questions

Q 1: What is the difference between Promises and async/await in JavaScript?
Ans: Promises use .then() and .catch() to handle asynchronous operations, while async/await work with Promises to handle asynchronous operations.
Q 2: Does async/await replace Promises in JavaScript?
Ans: No. async/await is built on top of Promises.
Q 3: When should you use Promises instead of async/await?
Ans: Promises can be useful when chaining multiple asynchronous operations or when working with functions that already return promises.
Q 4: Can we use await without async?
Ans: No. The await keyword can only be used inside an async function (except in modern environments that support top-level await).

Conclusion

Both Promises and async/await are used to handle asynchronous operations in JavaScript.

In most modern applications, developers prefer async/await because it simplifies complex asynchronous logic and makes the code easier to maintain. However, understanding Promises is still important, since async/await is built on top of them and many libraries still use promise-based patterns.

Compare Async Approaches