Promises and async/await in JavaScript

In JavaScript, some operations don't execute immediately (synchronously), but after some time (asynchronously), for example, getting data from a server or waiting for a response. For such operations, we use Promises and async/await.

In this article, we'll see how Promises work, why async/await is more readable, and how they help you write better, cleaner code.

---

What is a Promise?

A Promise is a commitment: "I'll tell you the result when it's ready. Either successfully or with an error."

A Promise has 3 states:

• Pending - waiting
• Fulfilled - completed successfully
• Rejected - an error occurred

  
const myPromise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Everything went well!");
  } else {
    reject("Something went wrong.");
  }
});

myPromise
  .then(result => console.log("✅", result))
  .catch(error => console.error("❌", error));
  

This says: when the promise succeeds, then() will execute, and if there's an error, catch() will handle it.

---

Practical Promise Example: API Call

When you get data from an API using fetch, it returns a Promise.

  
fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log("📦 Data:", data))
  .catch(error => console.error("⚠️ Error:", error));
  

Notice how we can chain multiple then() calls. But this can sometimes become hard to read. This is where async/await comes in.

---

What is async/await?

async/await is a simpler, newer syntax for Promises. It makes code more readable - it looks synchronous but is actually asynchronous.

  
async function getUsers() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const data = await response.json();
    console.log("👥 Users:", data);
  } catch (error) {
    console.error("🚨 Error fetching users:", error);
  }
}

getUsers();
  

await waits until the operation completes, while the try/catch block allows handling errors.

---

Let's create our own async function

  
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log("⏳ Waiting...");
  await wait(2000);
  console.log("✅ 2 seconds passed");
}

demo();
  

This demonstrates how you can implement anything with await - even a simple waiting mechanism.

---

Promise.all and Promise.race

When you have multiple async operations at once, you can use Promise.all or Promise.race.

  
const promise1 = wait(1000).then(() => "First done");
const promise2 = wait(2000).then(() => "Second done");

Promise.all([promise1, promise2])
  .then(results => console.log("✅ All done:", results));
  

• Promise.all() waits until all complete
• Promise.race() returns the fastest one

---

Conclusion

Promises are the fundamental way to handle async operations in JavaScript. async/await allows writing Promises in a simpler, more readable way.

• Promises have then/catch methods
• async function always returns a Promise
• await can only be used inside async functions
• try/catch helps catch errors

Using all these correctly will make your code cleaner, more predictable, and modern.

---