DescriptionSolutionDiscuss

Solution

General structure

const STATE = {
  PENDING: "PENDING",
  FULFILLED: "FULFILLED",
  REJECTED: "REJECTED",
};

class MyPromise {
  constructor(callback) {
    // Initial state of Promise is empty
    this.state = STATE.PENDING;
    this.value = null;
    this.reason = null;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      
    };

    const reject = (reason) => {
      
    };

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

  then(onSuccess, onFail) {
    // ...
  }

  catch(onFail) {
    // ...
  }

  finally(callback) {
    // ...
  }
}

resolve() and reject() methods

class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    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((callback) => callback(this.value));
      }
    };

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

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

then() method

class MyPromise {

  constructor() {
    // ...
  }
  
  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      if (this.state === "fulfilled") {
        setTimeout(() => {
          try {
            resolve(onFulfilled(this.value));
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else if (this.state === "rejected") {
        setTimeout(() => {
          try {
            reject(onRejected(this.value));
          } catch (error) {
            reject(error);
          }
        }, 0);
      } else {
        this.handlers.push({ onFulfilled, onRejected });
      }
    });
  }

}

catch() and finally() methods

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

  finally() {
    
  }
}

Summary

  • To implement a custom promise, you need to: Define the possible states (PENDING, FULFILLED, REJECTED).
  • Implement the resolve and reject methods to change the state and execute callbacks.
  • Implement the then, catch, and finally methods to register and handle callbacks.

References