JavaScript Fundamentals

Promise Methods

Combine multiple promises with Promise.all(), race(), allSettled(), and any()

Find videos you like?

Save to resource drawer for future reference!

Promise Combinator Methods

Promise methods let you work with multiple promises at once. Run them in parallel, race them, or handle all results together!

Combine Promises

Instead of handling promises one by one, use these methods to coordinate multiple async operations efficiently!

Promise.all() - Wait for All

All must succeed, or it fails

All or Nothing

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

✓ All Succeed

Returns array of all results in same order

✗ Any Fails

Rejects immediately with the first error

Promise.all() Examples

Run multiple promises in parallel

javascript

code

DarkEditable

// Basic example - all succeed
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]
    console.log('Sum:', results.reduce((a, b) => a + b));  // 60
  });

// Real-world: Load multiple resources
const fetchUser = fetch('/api/user').then(r => r.json());
const fetchPosts = fetch('/api/posts').then(r => r.json());
const fetchComments = fetch('/api/comments').then(r => r.json());

Promise.all([fetchUser, fetchPosts, fetchComments])
  .then(([user, posts, comments]) => {
    console.log('All data loaded!');
    console.log('User:', user.name);
    console.log('Posts:', posts.length);
    console.log('Comments:', comments.length);
  })
  .catch(error => {
    console.log('One of the requests failed:', error);
  });

// Example with timing
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...');
const start = Date.now();

Promise.all([task1, task2, task3])
  .then(results => {
    const elapsed = Date.now() - start;
    console.log('All done in', elapsed + 'ms');  // ~2000ms (longest task)
    console.log('Results:', results);
  });

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

Promise.all([p1, p2, p3])
  .then(results => {
    console.log('All succeeded:', results);  // Never runs
  })
  .catch(error => {
    console.log('Failed at:', error);  // 'Failed!'
  });

Console Output

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

Promise.race() - First to Finish Wins

Returns as soon as first promise settles

Speed Race

Promise.race() resolves or rejects as soon as the FIRST promise settles (success or failure).

const slow = delay(3000, 'Slow');
const fast = delay(1000, 'Fast');

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

Promise.race() Examples

First to complete wins

javascript

code

DarkEditable

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

// Basic race
const slow = delay(3000, 'Slow task');
const fast = delay(1000, 'Fast task');

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

// Real-world: Timeout for API calls
function fetchWithTimeout(url, timeout) {
  const fetchPromise = fetch(url);
  const timeoutPromise = new Promise((_, reject) => 
    setTimeout(() => reject(new Error('Request timeout')), timeout)
  );
  
  return Promise.race([fetchPromise, timeoutPromise]);
}

fetchWithTimeout('/api/data', 5000)
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => {
    if (error.message === 'Request timeout') {
      console.log('Request took too long!');
    } else {
      console.log('Request failed:', error);
    }
  });

// Race between multiple servers
const server1 = fetch('https://api1.example.com/data');
const server2 = fetch('https://api2.example.com/data');
const server3 = fetch('https://api3.example.com/data');

Promise.race([server1, server2, server3])
  .then(response => response.json())
  .then(data => {
    console.log('Got data from fastest server:', data);
  })
  .catch(error => {
    console.log('Fastest server failed:', error);
  });

// If fastest one fails, race fails
const failFast = Promise.reject('Error!');
const succeedSlow = delay(2000, 'Success');

Promise.race([failFast, succeedSlow])
  .catch(error => {
    console.log('Race rejected:', error);  // 'Error!' immediately
  });

Console Output

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

Promise.allSettled() - Wait for All, No Failures

Returns all results, success or failure

Never Fails

Promise.allSettled() waits for ALL promises to complete, whether they succeed or fail. Always resolves!

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

Promise.allSettled() Examples

Get all results regardless of success/failure

javascript

code

DarkEditable

// Basic example
const p1 = Promise.resolve('Success 1');
const p2 = Promise.reject('Error!');
const p3 = Promise.resolve('Success 3');

Promise.allSettled([p1, p2, p3])
  .then(results => {
    console.log(results);
    // [
    //   { status: 'fulfilled', value: 'Success 1' },
    //   { status: 'rejected', reason: 'Error!' },
    //   { status: 'fulfilled', value: 'Success 3' }
    // ]
    
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        console.log(`Promise ${index + 1} succeeded:`, result.value);
      } else {
        console.log(`Promise ${index + 1} failed:`, result.reason);
      }
    });
  });

// Real-world: Uploading multiple files
async function uploadFiles(files) {
  const uploadPromises = files.map(file => 
    fetch('/api/upload', {
      method: 'POST',
      body: file
    }).then(r => r.json())
  );
  
  const results = await Promise.allSettled(uploadPromises);
  
  const succeeded = results.filter(r => r.status === 'fulfilled');
  const failed = results.filter(r => r.status === 'rejected');
  
  console.log(`Uploaded ${succeeded.length} files`);
  console.log(`Failed ${failed.length} files`);
  
  return { succeeded, failed };
}

// Process partial results
const apis = [
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/invalid')  // This might fail
];

Promise.allSettled(apis)
  .then(async results => {
    for (let i = 0; i < results.length; i++) {
      if (results[i].status === 'fulfilled') {
        const data = await results[i].value.json();
        console.log(`API ${i + 1} data:`, data);
      } else {
        console.log(`API ${i + 1} failed:`, results[i].reason);
      }
    }
  });

// Filter successes
const tasks = [
  Promise.resolve(1),
  Promise.reject('error'),
  Promise.resolve(3),
  Promise.reject('error'),
  Promise.resolve(5)
];

Promise.allSettled(tasks)
  .then(results => {
    const values = results
      .filter(r => r.status === 'fulfilled')
      .map(r => r.value);
    
    console.log('Successful values:', values);  // [1, 3, 5]
  });

Console Output

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

Promise.any() - First Success Wins

Returns when first promise succeeds

First Success

Promise.any() resolves as soon as ANY promise succeeds. Ignores failures unless ALL fail.

const fail1 = Promise.reject('Error 1');
const fail2 = Promise.reject('Error 2');
const success = Promise.resolve('Success!');

Promise.any([fail1, fail2, success])
  .then(result => {
    console.log(result);  // 'Success!'
  });

Promise.any() Examples

First to succeed wins

javascript

code

DarkEditable

// Basic example
const fail1 = delay(1000, 'Task 1', true);
const fail2 = delay(500, 'Task 2', true);
const success = delay(1500, 'Task 3', false);

Promise.any([fail1, fail2, success])
  .then(result => {
    console.log('First success:', result);  // 'Task 3' after 1.5 seconds
  })
  .catch(error => {
    console.log('All failed:', error);
  });

// Real-world: Try multiple CDNs
const cdn1 = fetch('https://cdn1.example.com/library.js');
const cdn2 = fetch('https://cdn2.example.com/library.js');
const cdn3 = fetch('https://cdn3.example.com/library.js');

Promise.any([cdn1, cdn2, cdn3])
  .then(response => {
    console.log('Got library from a CDN!');
    return response.text();
  })
  .then(code => {
    eval(code);  // Load the library
  })
  .catch(error => {
    console.log('All CDNs failed:', error);
  });

// First success wins, ignores later ones
const tasks = [
  delay(3000, 'Slow success'),
  delay(1000, 'Fast fail', true),
  delay(2000, 'Medium success')
];

Promise.any(tasks)
  .then(result => {
    console.log('Winner:', result);  // 'Medium success' after 2 seconds
  });

// Only fails if ALL fail
const allFail = [
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
];

Promise.any(allFail)
  .catch(error => {
    console.log('All promises failed');
    console.log(error);  // AggregateError: All promises were rejected
  });

// Real-world: Fallback data sources
async function getUserData(userId) {
  const sources = [
    fetch(`/api/cache/user/${userId}`),      // Try cache first
    fetch(`/api/database/user/${userId}`),   // Then database
    fetch(`/api/backup/user/${userId}`)      // Finally backup
  ];
  
  try {
    const response = await Promise.any(sources);
    return await response.json();
  } catch (error) {
    throw new Error('Could not load user from any source');
  }
}

Console Output

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

Quick Comparison

Which method to use when?

Choose the Right Method

Promise.all()

Need ALL results, fail if ANY fails

Promise.race()

Need FIRST to finish (success or failure)

Promise.allSettled()

Need ALL results (never fails)

Promise.any()

Need FIRST success (ignore failures)

Key Takeaways

Do This ✅

• Use all() when you need all results
• Use race() for timeouts
• Use allSettled() for partial failures
• Use any() for fallbacks
• Always handle errors

Avoid This ❌

• Don't use all() if one can fail
• Don't confuse race() with any()
• Don't forget error handling
• Don't await in loops (use methods instead)
• Don't nest unnecessarily

Quick Reference

all() - All succeed or fail fast

race() - First to finish (any status)

allSettled() - All finish (never fails)

any() - First to succeed (ignore failures)

Pro Tip

Combine with async/await for even cleaner code: const results = await Promise.all([...])

Previous Topic

Promises

Modern async handling with Promise objects: then, catch, finally.

Next Topic

Async/Await

Clean asynchronous code with async functions and await keyword.

Ask a Question

Have a question about Promise Methods? 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

Promise Methods

Combine multiple promises with Promise.all(), race(), allSettled(), and any()

Find videos you like?

Save to resource drawer for future reference!

Promise Combinator Methods

Promise methods let you work with multiple promises at once. Run them in parallel, race them, or handle all results together!

Combine Promises

Instead of handling promises one by one, use these methods to coordinate multiple async operations efficiently!

Promise.all() - Wait for All

All must succeed, or it fails

All or Nothing

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

✓ All Succeed

Returns array of all results in same order

✗ Any Fails

Rejects immediately with the first error

Promise.all() Examples

Run multiple promises in parallel

javascript

code

DarkEditable

// Basic example - all succeed
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]
    console.log('Sum:', results.reduce((a, b) => a + b));  // 60
  });

// Example with timing
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...');
const start = Date.now();

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

Promise.all([p1, p2, p3])
  .then(results => {
    console.log('All succeeded:', results);  // Never runs
  })
  .catch(error => {
    console.log('Failed at:', error);  // 'Failed!'
  });

Console Output

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

Promise.race() - First to Finish Wins

Returns as soon as first promise settles

Speed Race

Promise.race() resolves or rejects as soon as the FIRST promise settles (success or failure).

const slow = delay(3000, 'Slow');
const fast = delay(1000, 'Fast');

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

Promise.race() Examples

First to complete wins

javascript

code

DarkEditable

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

// Basic race
const slow = delay(3000, 'Slow task');
const fast = delay(1000, 'Fast task');

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

// If fastest one fails, race fails
const failFast = Promise.reject('Error!');
const succeedSlow = delay(2000, 'Success');

Promise.race([failFast, succeedSlow])
  .catch(error => {
    console.log('Race rejected:', error);  // 'Error!' immediately
  });

Console Output

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

Promise.allSettled() - Wait for All, No Failures

Returns all results, success or failure

Never Fails

Promise.allSettled() waits for ALL promises to complete, whether they succeed or fail. Always resolves!

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

Promise.allSettled() Examples

Get all results regardless of success/failure

javascript

code

DarkEditable

// Basic example
const p1 = Promise.resolve('Success 1');
const p2 = Promise.reject('Error!');
const p3 = Promise.resolve('Success 3');

// Process partial results
const apis = [
  fetch('/api/users'),
  fetch('/api/posts'),
  fetch('/api/invalid')  // This might fail
];

// Filter successes
const tasks = [
  Promise.resolve(1),
  Promise.reject('error'),
  Promise.resolve(3),
  Promise.reject('error'),
  Promise.resolve(5)
];

Console Output

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

Promise.any() - First Success Wins

Returns when first promise succeeds

First Success

Promise.any() resolves as soon as ANY promise succeeds. Ignores failures unless ALL fail.

const fail1 = Promise.reject('Error 1');
const fail2 = Promise.reject('Error 2');
const success = Promise.resolve('Success!');

Promise.any([fail1, fail2, success])
  .then(result => {
    console.log(result);  // 'Success!'
  });

Promise.any() Examples

First to succeed wins

javascript

code

DarkEditable

// Basic example
const fail1 = delay(1000, 'Task 1', true);
const fail2 = delay(500, 'Task 2', true);
const success = delay(1500, 'Task 3', false);

// First success wins, ignores later ones
const tasks = [
  delay(3000, 'Slow success'),
  delay(1000, 'Fast fail', true),
  delay(2000, 'Medium success')
];

Promise.any(tasks)
  .then(result => {
    console.log('Winner:', result);  // 'Medium success' after 2 seconds
  });

// Only fails if ALL fail
const allFail = [
  Promise.reject('Error 1'),
  Promise.reject('Error 2'),
  Promise.reject('Error 3')
];

Promise.any(allFail)
  .catch(error => {
    console.log('All promises failed');
    console.log(error);  // AggregateError: All promises were rejected
  });

Console Output

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

Quick Comparison

Which method to use when?

Choose the Right Method

Promise.all()

Need ALL results, fail if ANY fails

Promise.race()

Need FIRST to finish (success or failure)

Promise.allSettled()

Need ALL results (never fails)

Promise.any()

Need FIRST success (ignore failures)

Key Takeaways

Do This ✅

• Use all() when you need all results
• Use race() for timeouts
• Use allSettled() for partial failures
• Use any() for fallbacks
• Always handle errors

Avoid This ❌

• Don't use all() if one can fail
• Don't confuse race() with any()
• Don't forget error handling
• Don't await in loops (use methods instead)
• Don't nest unnecessarily

Quick Reference

all() - All succeed or fail fast

race() - First to finish (any status)

allSettled() - All finish (never fails)

any() - First to succeed (ignore failures)

Pro Tip

Combine with async/await for even cleaner code: const results = await Promise.all([...])

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

Promises

Async/Await

JavaScript Code Editor

Building Your Learning Module...

Promise Methods

Promise Combinator Methods

Combine Promises

All or Nothing

✓ All Succeed

✗ Any Fails

Promise.all() Examples

Speed Race

Promise.race() Examples

Never Fails

Promise.allSettled() Examples

First Success

Promise.any() Examples

Choose the Right Method

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Key Takeaways

Do This ✅

Avoid This ❌

Quick Reference

Pro Tip

Promises

Async/Await

JavaScript Code Editor

Promise Methods

Promise Combinator Methods

Combine Promises

All or Nothing

✓ All Succeed

✗ Any Fails

Promise.all() Examples

Speed Race

Promise.race() Examples

Never Fails

Promise.allSettled() Examples

First Success

Promise.any() Examples

Choose the Right Method

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Key Takeaways

Do This ✅

Avoid This ❌

Quick Reference

Pro Tip