Promises Basics0%

Promises Basics

Beginner12 min read•Updated: Jul 11, 2026

Promises Basics in Modern JavaScript

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation and its resulting value. Introduced in ES6, Promises provide a structured, standardized abstraction over asynchronous programming, replacing error-prone nested callbacks.

1. The Three States of a Promise

A Promise exists in one of three mutually exclusive states:

Output

                ┌───────────────┐
                │    PENDING    │ (Initial state, operation in progress)
                └───────┬───────┘
                        │
        ┌───────────────┴───────────────┐
        │                               │
        ▼                               ▼
┌───────────────┐               ┌───────────────┐
│   FULFILLED   │               │   REJECTED    │
│   (Success)   │               │   (Failure)   │
└───────────────┘               └───────────────┘

1
Pending: Initial state; the asynchronous operation is still running.
2
Fulfilled (Resolved): The operation completed successfully with a resulting value.
3
Rejected: The operation failed with a reason or error object.

Immutability Guarantee: Once a Promise transitions to Fulfilled or Rejected (termed settled), its state and value can never change again.

2. Creating a Promise: The Promise Constructor

The Promise constructor accepts an executor function with two arguments: resolve and reject.

JavaScript

1function fetchServerStatus(isHealthy) {
return new Promise((resolve, reject) => {
  console.log('Initiating server health check...');
4 
  setTimeout(() => {
    if (isHealthy) {
      resolve({ status: 200, uptime: '99.99%', message: 'System Operational' });
    } else {
      reject(new Error('503 Service Unavailable: Database unreachable'));
    }
  }, 1500);
});
13}

3. Consuming Promises: .then(), .catch(), and .finally()

To handle the outcome of a Promise, use handler methods:

JavaScript

1fetchServerStatus(true)
.then((data) => {
  // Executes ONLY if fulfilled
  console.log('Health Check Passed:', data.message);
  return data.status;
})
.catch((error) => {
  // Executes if rejected OR if an error was thrown in .then()
  console.error('Health Check Failed:', error.message);
})
.finally(() => {
  // Executes in ALL cases (settled)
  console.log('Health check cycle completed.');
});

Output

1Promise Lifecycle:
fetchServerStatus()
       │
  [Pending]
       │
  Settled? ────── Fulfilled ──► .then(data => ...)
       │
       └───────── Rejected  ──► .catch(err => ...)
       │
       ▼
  .finally(() => cleanup())

4. Static Helper Methods: Promise.resolve() & Promise.reject()

Quickly instantiate already-settled promises:

JavaScript

1// Returns a Promise fulfilled immediately with 42
2const instantSuccess = Promise.resolve(42);
3 
4// Returns a Promise rejected immediately with an Error
5const instantFailure = Promise.reject(new Error('Unauthorized access'));

Interactive Quiz• Knowledge Check

Practice Quiz

Question 1

Which of the following is NOT a valid state of a JavaScript Promise?

Question 2

What happens once a Promise reaches either the Fulfilled or Rejected state?

Question 3

What method is guaranteed to run when a Promise finishes, regardless of whether it was fulfilled or rejected?

Question 4

How does a Promise handle uncaught exceptions thrown inside its executor function?

Question 5

What does Promise.resolve('Hello') return?

Next Lesson

Promise Chaining

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Callbacks	Promise Chaining

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext