Modern JavaScript (ES2024)

Promise.withResolvers

Create promises with exposed resolve/reject functions!

Find videos you like?

Save to resource drawer for future reference!

What is Promise.withResolvers?

Promise.withResolvers() creates a promise with exposed resolve and reject functions! No more wrapping logic in the Promise constructor - you get the promise, resolve, and reject all separately!

Much More Flexible!

Perfect for cases where you need to resolve/reject a promise from outside the executor function!

Example 1: Basic Usage

Old vs new way of creating controllable promises

javascript

code

DarkEditable

Console Output

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

Example 2: Real-World Use Cases

Practical scenarios for Promise.withResolvers

javascript

code

DarkEditable

// 1. Event-based promise resolution
class EventWaiter {
  constructor() {
    this.eventPromises = new Map();
  }
  
  waitForEvent(eventName) {
    if (!this.eventPromises.has(eventName)) {
      const { promise, resolve } = Promise.withResolvers();
      this.eventPromises.set(eventName, { promise, resolve });
    }
    return this.eventPromises.get(eventName).promise;
  }
  
  emitEvent(eventName, data) {
    const entry = this.eventPromises.get(eventName);
    if (entry) {
      entry.resolve(data);
      this.eventPromises.delete(eventName);
    }
  }
}

const waiter = new EventWaiter();

// Wait for event
waiter.waitForEvent('dataLoaded').then(data => {
  console.log('Data received:', data);
});

// Later, emit the event
setTimeout(() => {
  waiter.emitEvent('dataLoaded', { id: 1, value: 'test' });
}, 1000);

// 2. Request queue with cancellation
class RequestQueue {
  constructor() {
    this.queue = [];
  }
  
  enqueue(task) {
    const { promise, resolve, reject } = Promise.withResolvers();
    
    this.queue.push({
      task,
      resolve,
      reject,
      cancel: () => reject(new Error('Cancelled'))
    });
    
    return promise;
  }
  
  async processNext() {
    if (this.queue.length === 0) return;
    
    const { task, resolve, reject } = this.queue.shift();
    
    try {
      const result = await task();
      resolve(result);
    } catch (error) {
      reject(error);
    }
  }
}

const queue = new RequestQueue();

const promise1 = queue.enqueue(() => 
  fetch('/api/data').then(r => r.json())
);

promise1.then(data => console.log('Got data:', data));

// 3. Timeout wrapper
function withTimeout(promise, ms) {
  const { promise: timeoutPromise, reject } = Promise.withResolvers();
  
  const timeout = setTimeout(() => {
    reject(new Error(`Timeout after ${ms}ms`));
  }, ms);
  
  promise
    .then(result => {
      clearTimeout(timeout);
      return result;
    })
    .catch(err => {
      clearTimeout(timeout);
      throw err;
    });
  
  return Promise.race([promise, timeoutPromise]);
}

// Usage
withTimeout(
  fetch('/api/slow'),
  3000
).catch(err => console.error(err.message));

// 4. Manual promise control in class
class DataLoader {
  constructor() {
    const { promise, resolve, reject } = Promise.withResolvers();
    this.loadPromise = promise;
    this.resolve = resolve;
    this.reject = reject;
    this.loaded = false;
  }
  
  async load(url) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      this.loaded = true;
      this.resolve(data);
      return data;
    } catch (error) {
      this.reject(error);
      throw error;
    }
  }
  
  waitForLoad() {
    return this.loadPromise;
  }
}

const loader = new DataLoader();
loader.load('/api/config');

// Somewhere else in code
loader.waitForLoad().then(config => {
  console.log('Config loaded:', config);
});

Console Output

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

Old Way vs New Way

❌ Old Way

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// Use promise, resolve, reject

Awkward variable hoisting pattern

✅ New Way

const { promise, resolve, reject } = 
  Promise.withResolvers();

// Use promise, resolve, reject

Clean, explicit destructuring

Key Takeaways

📦

Three Returns

Returns promise, resolve, and reject

🎯

External Control

Resolve/reject from outside executor

✨

Cleaner Code

No more variable hoisting tricks

💡

ES2024

Flexible promise creation

Previous Topic

Array Grouping

Object.groupBy() and Map.groupBy() for grouping arrays (ES2024).

Next Topic

RegExp v Flag

Enhanced regex with set notation and properties (ES2024).

Ask a Question

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

Modern JavaScript (ES2024)

Promise.withResolvers

Create promises with exposed resolve/reject functions!

Find videos you like?

Save to resource drawer for future reference!

What is Promise.withResolvers?

Promise.withResolvers() creates a promise with exposed resolve and reject functions! No more wrapping logic in the Promise constructor - you get the promise, resolve, and reject all separately!

Much More Flexible!

Perfect for cases where you need to resolve/reject a promise from outside the executor function!

Example 1: Basic Usage

Old vs new way of creating controllable promises

javascript

code

DarkEditable

Console Output

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

Example 2: Real-World Use Cases

Practical scenarios for Promise.withResolvers

javascript

code

DarkEditable

const waiter = new EventWaiter();

// Wait for event
waiter.waitForEvent('dataLoaded').then(data => {
  console.log('Data received:', data);
});

// Later, emit the event
setTimeout(() => {
  waiter.emitEvent('dataLoaded', { id: 1, value: 'test' });
}, 1000);

const queue = new RequestQueue();

const promise1 = queue.enqueue(() => 
  fetch('/api/data').then(r => r.json())
);

promise1.then(data => console.log('Got data:', data));

// Usage
withTimeout(
  fetch('/api/slow'),
  3000
).catch(err => console.error(err.message));

const loader = new DataLoader();
loader.load('/api/config');

// Somewhere else in code
loader.waitForLoad().then(config => {
  console.log('Config loaded:', config);
});

Console Output

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

Old Way vs New Way

❌ Old Way

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// Use promise, resolve, reject

Awkward variable hoisting pattern

✅ New Way

const { promise, resolve, reject } = 
  Promise.withResolvers();

// Use promise, resolve, reject

Clean, explicit destructuring

Key Takeaways

📦

Three Returns

Returns promise, resolve, and reject

🎯

External Control

Resolve/reject from outside executor

✨

Cleaner Code

No more variable hoisting tricks

💡

ES2024

Flexible promise creation

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

Array Grouping

RegExp v Flag

JavaScript Code Editor

Building Your Learning Module...

Promise.withResolvers

What is Promise.withResolvers?

Much More Flexible!

Example 1: Basic Usage

Example 2: Real-World Use Cases

❌ Old Way

✅ New Way

Key Takeaways

Three Returns

External Control

Cleaner Code

ES2024

Array Grouping

RegExp v Flag

JavaScript Code Editor

Promise.withResolvers

What is Promise.withResolvers?

Much More Flexible!

Example 1: Basic Usage

Example 2: Real-World Use Cases

❌ Old Way

✅ New Way

Key Takeaways

Three Returns

External Control

Cleaner Code

ES2024