← Promise Chaining & Error Handling Async & Await (Under the Hood) →

Custom Promise Implementation

⚠️ Understanding Promises Internals

Building a custom promise helps understand how promises work under the hood. This is crucial for JavaScript interviews and deep understanding of async programming.

Promise States Diagram

PENDING

Initial state

FULFILLED

Operation successful

REJECTED

Operation failed

Transitions: PENDING → FULFILLED or PENDING → REJECTED

Example 1: Basic Promise Implementation

JavaScript Editor

// Basic Promise Implementation
class MyPromise {
  constructor(executor) {
    this.state = 'pending'; // 'pending', 'fulfilled', 'rejected'
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn(value));
      }
    };

const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn => fn(reason));
      }
    };

try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const handleFulfilled = () => {
        try {
          if (typeof onFulfilled === 'function') {
            const result = onFulfilled(this.value);
            resolve(result);
          } else {
            resolve(this.value);
          }
        } catch (error) {
          reject(error);
        }
      };

if (this.state === 'fulfilled') {
        setTimeout(handleFulfilled, 0);
      } else if (this.state === 'rejected') {
        setTimeout(handleRejected, 0);
      } else {
        this.onFulfilledCallbacks.push(() => {
          setTimeout(handleFulfilled, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(handleRejected, 0);
        });
      }
    });
  }

catch(onRejected) {
    return this.then(null, onRejected);
  }

finally(onFinally) {
    return this.then(
      value => MyPromise.resolve(onFinally()).then(() => value),
      reason => MyPromise.resolve(onFinally()).then(() => { throw reason; })
    );
  }

static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    }
    return new MyPromise(resolve => resolve(value));
  }

static reject(reason) {
    return new MyPromise((_, reject) => reject(reason));
  }
}

// Test our custom promise
const promise = new MyPromise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 1000);
});

promise
  .then(result => {
    console.log('Result:', result);
    return result + ' 🎉';
  })
  .then(result => console.log('Chained:', result))
  .catch(error => console.error('Error:', error));

🔧 Promise Internals

Core Components

State Machine: pending → fulfilled/rejected
Value Storage: Stores result or error
Callback Queues: For then/catch callbacks
Executor Function: User-provided function

Key Challenges

Handling async callbacks
Chaining promises
Microtask queue scheduling
Error propagation
Circular references

Example 2: Static Methods Implementation

JavaScript Editor

// Promise Static Methods Implementation
class MyPromise {
  // ... previous code ...

static all(promises) {
    return new MyPromise((resolve, reject) => {
      const results = [];
      let completed = 0;
      
      if (promises.length === 0) {
        resolve(results);
        return;
      }

promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          value => {
            results[index] = value;
            completed++;
            
            if (completed === promises.length) {
              resolve(results);
            }
          },
          error => {
            reject(error);
          }
        );
      });
    });
  }

static race(promises) {
    return new MyPromise((resolve, reject) => {
      if (promises.length === 0) {
        return;
      }

promises.forEach(promise => {
        MyPromise.resolve(promise).then(
          value => resolve(value),
          error => reject(error)
        );
      });
    });
  }

static allSettled(promises) {
    return new MyPromise((resolve) => {
      const results = [];
      let completed = 0;
      
      if (promises.length === 0) {
        resolve(results);
        return;
      }

promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          value => processResult(index, 'fulfilled', value),
          reason => processResult(index, 'rejected', reason)
        );
      });
    });
  }

static any(promises) {
    return new MyPromise((resolve, reject) => {
      const errors = [];
      let rejected = 0;
      
      if (promises.length === 0) {
        reject(new AggregateError([], 'All promises were rejected'));
        return;
      }

promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(
          value => resolve(value),
          reason => {
            errors[index] = reason;
            rejected++;
            
            if (rejected === promises.length) {
              reject(new AggregateError(errors, 'All promises were rejected'));
            }
          }
        );
      });
    });
  }
}

// Test static methods
const p1 = MyPromise.resolve('One');
const p2 = new MyPromise(resolve => 
  setTimeout(() => resolve('Two'), 100)
);
const p3 = MyPromise.reject('Three failed');

MyPromise.all([p1, p2])
  .then(results => console.log('All:', results));

MyPromise.race([p2, p1])
  .then(result => console.log('Race:', result));

MyPromise.allSettled([p1, p2, p3])
  .then(results => console.log('AllSettled:', results));

📊 Promise Static Methods Comparison

Method	Implementation Logic	Complexity	Use Case
`Promise.all()`	Wait for all, reject if any fails	Medium	Dependent parallel operations
`Promise.race()`	First to settle wins	Simple	Timeouts, fastest response
`Promise.allSettled()`	Wait for all, never rejects	Medium	Need all results regardless
`Promise.any()`	First to succeed wins	Complex	Multiple fallback sources

Example 3: Microtask Queue Implementation

JavaScript Editor

// Advanced: Promise with Microtask Queue
class MicrotaskPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

try {
      executor(resolve, reject);
    } catch (error) {
      reject(error);
    }
  }

then(onFulfilled, onRejected) {
    // Return a new promise for chaining
    return new MicrotaskPromise((resolve, reject) => {
      const handleCallback = (callback, value, isFulfilled) => {
        try {
          if (typeof callback === 'function') {
            const result = callback(value);
            
            // Handle promise returns
            if (result instanceof MicrotaskPromise) {
              result.then(resolve, reject);
            } else {
              resolve(result);
            }
          } else {
            // If no callback, pass through
            isFulfilled ? resolve(value) : reject(value);
          }
        } catch (error) {
          reject(error);
        }
      };

const wrappedOnFulfilled = (value) => 
        handleCallback(onFulfilled, value, true);
      const wrappedOnRejected = (reason) => 
        handleCallback(onRejected, reason, false);

if (this.state === 'fulfilled') {
        // Microtask scheduling
        if (typeof queueMicrotask === 'function') {
          queueMicrotask(() => wrappedOnFulfilled(this.value));
        } else {
          Promise.resolve().then(() => wrappedOnFulfilled(this.value));
        }
      } else if (this.state === 'rejected') {
        if (typeof queueMicrotask === 'function') {
          queueMicrotask(() => wrappedOnRejected(this.reason));
        } else {
          Promise.resolve().then(() => wrappedOnRejected(this.reason));
        }
      } else {
        this.onFulfilledCallbacks.push(wrappedOnFulfilled);
        this.onRejectedCallbacks.push(wrappedOnRejected);
      }
    });
  }

catch(onRejected) {
    return this.then(null, onRejected);
  }
}

// Test microtask behavior
console.log('Script start');

const mp = new MicrotaskPromise(resolve => {
  console.log('Executor running');
  resolve('Microtask Promise resolved');
});

mp.then(value => {
  console.log('Then 1:', value);
  return 'Chained value';
}).then(value => {
  console.log('Then 2:', value);
});

console.log('Script end');

🎯 Why Microtasks Matter

Real promises use microtask queue (not setTimeout) for scheduling callbacks. This ensures:

Higher priority than macrotasks (setTimeout, setInterval)
Better performance
Predictable execution order
Compliance with Promise/A+ specification

Example 4: Promise Utility Functions

JavaScript Editor

// Promise Utility Functions

// 1. Promise Retry
function promiseRetry(fn, retries = 3, delay = 1000) {
  return new Promise((resolve, reject) => {
    const attempt = (attemptNumber) => {
      fn()
        .then(resolve)
        .catch(error => {
          if (attemptNumber >= retries) {
            reject(error);
          } else {
            console.log(`Attempt ${attemptNumber} failed. Retrying...`);
            setTimeout(() => attempt(attemptNumber + 1), delay);
          }
        });
    };
    
    attempt(1);
  });
}

// 2. Promise Timeout
function promiseWithTimeout(promise, timeout = 5000) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('Promise timeout'));
    }, timeout);
    
    promise
      .then(result => {
        clearTimeout(timer);
        resolve(result);
      })
      .catch(error => {
        clearTimeout(timer);
        reject(error);
      });
  });
}

// 3. Sequential Promise Execution
function sequentialPromises(promiseFactories) {
  return promiseFactories.reduce((chain, factory) => {
    return chain.then(previousResults => {
      return factory().then(currentResult => {
        return [...previousResults, currentResult];
      });
    });
  }, Promise.resolve([]));
}

// 4. Promise Pool (concurrency control)
function promisePool(tasks, concurrency = 5) {
  return new Promise((resolve) => {
    const results = [];
    let index = 0;
    let running = 0;
    let completed = 0;
    
    function runNext() {
      while (running < concurrency && index < tasks.length) {
        const taskIndex = index++;
        running++;
        
        tasks[taskIndex]()
          .then(result => {
            results[taskIndex] = { status: 'fulfilled', value: result };
          })
          .catch(error => {
            results[taskIndex] = { status: 'rejected', reason: error };
          })
          .finally(() => {
            running--;
            completed++;
            
            if (completed === tasks.length) {
              resolve(results);
            } else {
              runNext();
            }
          });
      }
    }
    
    runNext();
  });
}

// Test utility functions
const mockApiCall = (name, shouldFail = false) => () => 
  new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldFail) {
        reject(new Error(`${name} failed`));
      } else {
        resolve(`${name} succeeded`);
      }
    }, Math.random() * 1000);
  });

// Test promisePool
const tasks = Array.from({ length: 10 }, (_, i) => 
  mockApiCall(`Task ${i + 1}`)
);

promisePool(tasks, 3)
  .then(results => console.log('Pool results:', results));

Exercise: Implement Promise Methods

JavaScript Editor

// Implement these promise utility methods

class CustomPromise {
  constructor(executor) {
    // Your implementation here
  }

then(onFulfilled, onRejected) {
    // Your implementation here
  }

catch(onRejected) {
    // Your implementation here
  }

finally(onFinally) {
    // Your implementation here
  }

// TODO: Implement these static methods
  static resolve(value) {
    // Should return a resolved promise
  }

static reject(reason) {
    // Should return a rejected promise
  }

static all(promises) {
    // Should resolve when all promises resolve
    // Should reject if any promise rejects
  }

static race(promises) {
    // Should resolve/reject with first promise to settle
  }

// Bonus: Implement these
  static allSettled(promises) {
    // Should wait for all promises to settle
  }

static any(promises) {
    // Should resolve with first promise that resolves
    // Should reject if all promises reject
  }
}

// Test your implementation
const testPromise = new CustomPromise((resolve, reject) => {
  setTimeout(() => resolve('Test passed'), 100);
});

testPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

// Test static methods
const p1 = CustomPromise.resolve('P1');
const p2 = new CustomPromise(r => setTimeout(() => r('P2'), 50));
const p3 = CustomPromise.reject('P3 failed');

CustomPromise.all([p1, p2])
  .then(results => console.log('All:', results));

CustomPromise.race([p2, p1])
  .then(result => console.log('Race:', result));

💡 Interview Questions on Promises

How does promise chaining work internally?
What's the difference between microtasks and macrotasks?
How would you implement Promise.all()?
What happens if you don't handle promise rejections?
How do async/await work with promises?
What's the Promise/A+ specification?
How would you handle memory leaks in promises?
What's the difference between Promise.race() and Promise.any()?

← Promise Chaining & Error Handling Async & Await (Under the Hood) →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

Custom Promise Implementation

⚠️ Understanding Promises Internals

Promise States Diagram

Example 1: Basic Promise Implementation

🔧 Promise Internals

Core Components

Key Challenges

Example 2: Static Methods Implementation

📊 Promise Static Methods Comparison

Example 3: Microtask Queue Implementation

🎯 Why Microtasks Matter

Example 4: Promise Utility Functions

Exercise: Implement Promise Methods

💡 Interview Questions on Promises

Follow Us

Our Tools

Our Company

Special Tools