learn2kode.in

Menu

JavaScript Tutorial

Menu

What Is a JavaScript Promise?

A Promise in JavaScript represents a value that will be available now, later, or never. It is commonly used to handle asynchronous operations like API calls, file loading, or timers without writing deeply nested callbacks.

Promises help write cleaner, more readable, and maintainable asynchronous code.

Why Promises Are Important

Before Promises, developers used callbacks, which often led to callback hell. Promises solve this by providing a structured way to handle async logic.
Benefits of Promises
  • Better readability
  • Cleaner error handling
  • Easier chaining of async tasks
  • Foundation for async/await

Promise States

A JavaScript Promise can be in one of three states:

  • Pending – Initial state, operation not completed
  • Fulfilled – Operation completed successfully
  • Rejected – Operation failed with an error

Once a Promise is fulfilled or rejected, it is settled and cannot change state.

Creating a Promise

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

  if (success) {
    resolve("Operation successful");
  } else {
    reject("Operation failed");
  }
});
  • resolve() → success result
  • reject() → error result
Using .then() and .catch()
Copy Text 
myPromise
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });
  • .then() runs when the promise is fulfilled
  • .catch() runs when the promise is rejected
Promise Chaining
Promises can be chained to perform multiple async tasks in sequence.
Copy Text 
fetchData()
  .then(data => processData(data))
  .then(result => saveResult(result))
  .catch(error => console.error(error));
  • Each .then() returns a new Promise.
Handling Multiple Promises
Runs multiple promises in parallel and waits for all to finish.
Copy Text 
Promise.all([promise1, promise2])
  .then(results => {
    console.log(results);
  })
  .catch(error => console.error(error));
  • Fails if any promise fails.

Promises vs Callbacks (Comparison Table)

Feature Callbacks Promises
Readability Low (nested) High (chained)
Error Handling Complex Simple (.catch)
Modern Usage Less Preferred Widely Used
Promises and Async/Await
Promises are the backbone of async/await.
Copy Text 
async function getData() {
  try {
    const result = await myPromise;
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}
  • This syntax makes async code look synchronous.

Common Use Cases of Promises

  • Fetching data from APIs
  • Reading files
  • Database queries
  • Timers and delays
  • Handling user actions asynchronously

Best Practices

  • Always handle errors using .catch()
  • Avoid unnecessary nesting
  • Prefer async/await for complex flows
  • Use Promise.all() for parallel tasks
Javascript Callback
Async / Await