JavaScript Fundamentals

Promises

Handle asynchronous operations with promises - a better way than callbacks

Find videos you like?

Save to resource drawer for future reference!

What are Promises?

A Promise is an object representing the eventual completion or failure of an async operation. It's like a receipt - you get it immediately, but the result comes later!

Restaurant Order Analogy

When you order food, you get a receipt (Promise). The food isn't ready yet, but you have a promise it will come. When ready, you either get your food (resolved) or get told it's out of stock (rejected)!

Three Promise States

Promises can be pending, fulfilled, or rejected

Promise Lifecycle

Pending

Initial state - operation hasn't completed yet

Fulfilled (Resolved)

Operation completed successfully with a result

Rejected

Operation failed with an error

Creating a Promise

Use new Promise() with resolve and reject

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Handling Promises: then() & catch()

React to success or failure

Promise Methods

.then() - Handle Success

promise.then(result => /* use result */)

Runs when promise is fulfilled

.catch() - Handle Error

promise.catch(error => /* handle error */)

Runs when promise is rejected

.finally() - Always Runs

promise.finally(() => /* cleanup */)

Runs regardless of success/failure

then(), catch(), finally()

Complete promise handling

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Promise Chaining

Chain multiple async operations

Sequential Operations

Return a value or promise from then() to chain operations

fetchUser()
  .then(user => {
    console.log('Got user:', user);
    return fetchPosts(user.id);  // Return new promise
  })
  .then(posts => {
    console.log('Got posts:', posts);
    return fetchComments(posts[0].id);
  })
  .then(comments => {
    console.log('Got comments:', comments);
  })
  .catch(error => {
    console.log('Any error:', error);
  });

Promise Chaining Examples

Sequential async operations

javascript

code

DarkEditable

// Example 1: Data processing pipeline
function getUserId() {
  return Promise.resolve(123);
}

function getUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: id, name: 'Alice', role: 'admin' });
    }, 1000);
  });
}

function getUserPermissions(user) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['read', 'write', 'delete']);
    }, 1000);
  });
}

// Chain them together
getUserId()
  .then(id => {
    console.log('Step 1: Got ID:', id);
    return getUser(id);
  })
  .then(user => {
    console.log('Step 2: Got user:', user.name);
    return getUserPermissions(user);
  })
  .then(permissions => {
    console.log('Step 3: Got permissions:', permissions);
  })
  .catch(error => {
    console.log('Error at any step:', error);
  });

// Example 2: API chain
fetch('/api/user/1')
  .then(response => response.json())
  .then(user => {
    console.log('User:', user.name);
    // Fetch user's posts
    return fetch(`/api/user/${user.id}/posts`);
  })
  .then(response => response.json())
  .then(posts => {
    console.log('Posts count:', posts.length);
    // Process first post
    return posts[0];
  })
  .then(firstPost => {
    console.log('First post:', firstPost.title);
  })
  .catch(error => {
    console.log('Failed:', error);
  });

Console Output

Click "Run Code" to see output here...

Promise.all() - Run in Parallel

Wait for multiple promises to complete

All or Nothing

Promise.all() waits for ALL promises to succeed. If ANY fails, the whole thing fails.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);
const promise3 = Promise.resolve(30);

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);  // [10, 20, 30]
  });

// If any fails, all fails
const p1 = Promise.resolve('Success 1');
const p2 = Promise.reject('Failed!');
const p3 = Promise.resolve('Success 3');

Promise.all([p1, p2, p3])
  .catch(error => {
    console.log(error);  // 'Failed!'
  });

Promise.all() Examples

Parallel operations

javascript

code

DarkEditable

// Fetch multiple users at once
const user1 = fetch('/api/user/1').then(r => r.json());
const user2 = fetch('/api/user/2').then(r => r.json());
const user3 = fetch('/api/user/3').then(r => r.json());

Promise.all([user1, user2, user3])
  .then(users => {
    console.log('All users loaded:', users);
    // users is an array: [user1Data, user2Data, user3Data]
  })
  .catch(error => {
    console.log('One of the requests failed:', error);
  });

// Real-world: Load multiple resources
function loadDashboard() {
  const userPromise = fetch('/api/user');
  const statsPromise = fetch('/api/stats');
  const notificationsPromise = fetch('/api/notifications');
  
  Promise.all([userPromise, statsPromise, notificationsPromise])
    .then(async ([userRes, statsRes, notifsRes]) => {
      const user = await userRes.json();
      const stats = await statsRes.json();
      const notifs = await notifsRes.json();
      
      console.log('Dashboard loaded:', { user, stats, notifs });
    })
    .catch(error => {
      console.log('Failed to load dashboard:', error);
    });
}

// Simulated parallel operations
function delay(ms, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

const task1 = delay(1000, 'Task 1 done');
const task2 = delay(2000, 'Task 2 done');
const task3 = delay(1500, 'Task 3 done');

console.log('Starting all tasks...');
Promise.all([task1, task2, task3])
  .then(results => {
    console.log('All done!', results);
    // Completes after 2000ms (longest task)
  });

Console Output

Click "Run Code" to see output here...

Other Promise Methods

race(), allSettled(), any()

Additional Methods

Promise.race()

Returns as soon as first promise settles (success or fail)

Promise.allSettled()

Waits for ALL, returns results even if some failed

Promise.any()

Returns when first promise succeeds, ignores failures

Other Promise Methods

race(), allSettled(), any()

javascript

code

DarkEditable

// Promise.race() - First to finish wins
const slow = new Promise(resolve => setTimeout(() => resolve('Slow'), 3000));
const fast = new Promise(resolve => setTimeout(() => resolve('Fast'), 1000));

Promise.race([slow, fast])
  .then(result => {
    console.log(result);  // 'Fast' (after 1 second)
  });

// Use case: Timeout
function fetchWithTimeout(url, timeout) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject('Timeout!'), timeout)
  );
  
  return Promise.race([fetchPromise, timeoutPromise]);
}

// Promise.allSettled() - Get all results
const p1 = Promise.resolve('Success');
const p2 = Promise.reject('Failed');
const p3 = Promise.resolve('Another success');

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
    // [
    //   { status: 'fulfilled', value: 'Success' },
    //   { status: 'rejected', reason: 'Failed' },
    //   { status: 'fulfilled', value: 'Another success' }
    // ]
  });

// Promise.any() - First success wins
const fail1 = Promise.reject('Error 1');
const fail2 = Promise.reject('Error 2');
const success = new Promise(resolve => 
  setTimeout(() => resolve('Finally succeeded!'), 1000)
);

Promise.any([fail1, fail2, success])
  .then(result => {
    console.log(result);  // 'Finally succeeded!'
  })
  .catch(error => {
    console.log('All failed:', error);
  });

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Always use .catch() for errors
• Chain promises for sequential operations
• Use Promise.all() for parallel
• Return promises from .then() for chaining
• Use .finally() for cleanup

Avoid This ❌

• Don't forget .catch() (unhandled rejections!)
• Don't nest promises (use chaining)
• Don't mix callbacks and promises
• Don't forget to return in chains
• Don't create unnecessary promises

Promise Cheat Sheet

.then() - Handle success

.catch() - Handle error

.finally() - Always runs

Promise.all() - Wait for all (fail if any fails)

Promise.race() - First to finish

Promise.allSettled() - Wait for all (never fails)

Promise.any() - First to succeed

Modern Alternative

While promises are powerful, async/await provides even cleaner syntax for the same functionality. Learn that next!

Previous Topic

Callbacks

Handling asynchronous operations with callback functions.

Next Topic

Promise Methods

Promise.all, Promise.race, Promise.allSettled, Promise.any for parallel operations.

Ask a Question

Have a question about Promises? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Promises

Handle asynchronous operations with promises - a better way than callbacks

Find videos you like?

Save to resource drawer for future reference!

What are Promises?

A Promise is an object representing the eventual completion or failure of an async operation. It's like a receipt - you get it immediately, but the result comes later!

Restaurant Order Analogy

Three Promise States

Promises can be pending, fulfilled, or rejected

Promise Lifecycle

Pending

Initial state - operation hasn't completed yet

Fulfilled (Resolved)

Operation completed successfully with a result

Rejected

Operation failed with an error

Creating a Promise

Use new Promise() with resolve and reject

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Handling Promises: then() & catch()

React to success or failure

Promise Methods

.then() - Handle Success

promise.then(result => /* use result */)

Runs when promise is fulfilled

.catch() - Handle Error

promise.catch(error => /* handle error */)

Runs when promise is rejected

.finally() - Always Runs

promise.finally(() => /* cleanup */)

Runs regardless of success/failure

then(), catch(), finally()

Complete promise handling

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Promise Chaining

Chain multiple async operations

Sequential Operations

Return a value or promise from then() to chain operations

fetchUser()
  .then(user => {
    console.log('Got user:', user);
    return fetchPosts(user.id);  // Return new promise
  })
  .then(posts => {
    console.log('Got posts:', posts);
    return fetchComments(posts[0].id);
  })
  .then(comments => {
    console.log('Got comments:', comments);
  })
  .catch(error => {
    console.log('Any error:', error);
  });

Promise Chaining Examples

Sequential async operations

javascript

code

DarkEditable

// Example 1: Data processing pipeline
function getUserId() {
  return Promise.resolve(123);
}

function getUser(id) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ id: id, name: 'Alice', role: 'admin' });
    }, 1000);
  });
}

function getUserPermissions(user) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(['read', 'write', 'delete']);
    }, 1000);
  });
}

Console Output

Click "Run Code" to see output here...

Promise.all() - Run in Parallel

Wait for multiple promises to complete

All or Nothing

Promise.all() waits for ALL promises to succeed. If ANY fails, the whole thing fails.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);
const promise3 = Promise.resolve(30);

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log(results);  // [10, 20, 30]
  });

// If any fails, all fails
const p1 = Promise.resolve('Success 1');
const p2 = Promise.reject('Failed!');
const p3 = Promise.resolve('Success 3');

Promise.all([p1, p2, p3])
  .catch(error => {
    console.log(error);  // 'Failed!'
  });

Promise.all() Examples

Parallel operations

javascript

code

DarkEditable

// Fetch multiple users at once
const user1 = fetch('/api/user/1').then(r => r.json());
const user2 = fetch('/api/user/2').then(r => r.json());
const user3 = fetch('/api/user/3').then(r => r.json());

// Simulated parallel operations
function delay(ms, value) {
  return new Promise(resolve => setTimeout(() => resolve(value), ms));
}

const task1 = delay(1000, 'Task 1 done');
const task2 = delay(2000, 'Task 2 done');
const task3 = delay(1500, 'Task 3 done');

console.log('Starting all tasks...');
Promise.all([task1, task2, task3])
  .then(results => {
    console.log('All done!', results);
    // Completes after 2000ms (longest task)
  });

Console Output

Click "Run Code" to see output here...

Other Promise Methods

race(), allSettled(), any()

Additional Methods

Promise.race()

Returns as soon as first promise settles (success or fail)

Promise.allSettled()

Waits for ALL, returns results even if some failed

Promise.any()

Returns when first promise succeeds, ignores failures

Other Promise Methods

race(), allSettled(), any()

javascript

code

DarkEditable

// Promise.race() - First to finish wins
const slow = new Promise(resolve => setTimeout(() => resolve('Slow'), 3000));
const fast = new Promise(resolve => setTimeout(() => resolve('Fast'), 1000));

Promise.race([slow, fast])
  .then(result => {
    console.log(result);  // 'Fast' (after 1 second)
  });

// Promise.allSettled() - Get all results
const p1 = Promise.resolve('Success');
const p2 = Promise.reject('Failed');
const p3 = Promise.resolve('Another success');

Promise.any([fail1, fail2, success])
  .then(result => {
    console.log(result);  // 'Finally succeeded!'
  })
  .catch(error => {
    console.log('All failed:', error);
  });

Console Output

Click "Run Code" to see output here...

Key Takeaways

Do This ✅

• Always use .catch() for errors
• Chain promises for sequential operations
• Use Promise.all() for parallel
• Return promises from .then() for chaining
• Use .finally() for cleanup

Avoid This ❌

• Don't forget .catch() (unhandled rejections!)
• Don't nest promises (use chaining)
• Don't mix callbacks and promises
• Don't forget to return in chains
• Don't create unnecessary promises

Promise Cheat Sheet

.then() - Handle success

.catch() - Handle error

.finally() - Always runs

Promise.all() - Wait for all (fail if any fails)

Promise.race() - First to finish

Promise.allSettled() - Wait for all (never fails)

Promise.any() - First to succeed

Modern Alternative

While promises are powerful, async/await provides even cleaner syntax for the same functionality. Learn that next!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Callbacks

Promise Methods

JavaScript Code Editor

Building Your Learning Module...

Promises

What are Promises?

Restaurant Order Analogy

Promise Lifecycle

Pending

Fulfilled (Resolved)

Rejected

Creating a Promise

Promise Methods

.then() - Handle Success

.catch() - Handle Error

.finally() - Always Runs

then(), catch(), finally()

Sequential Operations

Promise Chaining Examples

All or Nothing

Promise.all() Examples

Additional Methods

Promise.race()

Promise.allSettled()

Promise.any()

Other Promise Methods

Key Takeaways

Do This ✅

Avoid This ❌

Promise Cheat Sheet

Modern Alternative

Callbacks

Promise Methods

JavaScript Code Editor

Promises

What are Promises?

Restaurant Order Analogy

Promise Lifecycle

Pending

Fulfilled (Resolved)

Rejected

Creating a Promise

Promise Methods

.then() - Handle Success

.catch() - Handle Error

.finally() - Always Runs

then(), catch(), finally()

Sequential Operations

Promise Chaining Examples

All or Nothing

Promise.all() Examples

Additional Methods

Promise.race()

Promise.allSettled()

Promise.any()

Other Promise Methods

Key Takeaways

Do This ✅

Avoid This ❌

Promise Cheat Sheet

Modern Alternative