Manually Implementing Promise#

new Promise( function(resolve, reject) { /* executor */
    // Execution code that needs to specify the positions of the resolve and reject callbacks
});

// Define the _Promise constructor function
function _Promise(fn) {
    this.status = "pending"; // Define the property to store the status // Give the initial status as pending
    this.value = null; // value of resolve
    this.reason = null; // reason of reject
    this.onFulfilled = []; // Store the first callback function registered in the then method
    this.onReject = []; // Store the second callback function registered in the then method
    
    var handler = funct => { // Event handling function
        if(typeof(funct) === "function") { // Only execute if it's a function
            if(this.status === "fulfilled") funct(this.value); // Execute and pass the value
            if(this.status === "rejected") funct(this.reason); // Execute and pass the reason
        }
    }
    
    // Implement the resolve callback
    var resolve = value => { // Using arrow function mainly to bind the this keyword
        this.status = "fulfilled"; // Set the status
        this.value = value; // Get the result
        if(value instanceof _Promise){ // Check if the returned value is an instance of Promise
            value.onFulfilled = this.onFulfilled; // If yes, then chain call it
            return value;
        } 
        setTimeout(() => { // Use setTimeout to place the callback function in the task queue, not blocking the main thread, execute asynchronously. In reality, the promise's callback is placed in the microqueue, while the setTimeout's callback is placed in the macroqueue
            try {
                this.onFulfilled.forEach(handler); // Hand over to the event handler
            }catch (e){
                console.error(`Error in promise: ${e}`); // Print the exception
                reject(e); // Reject
            }
        }, 0)
    }
    
    // Implement rejected
    var reject = reason => { // Using arrow function mainly to bind the this keyword
        this.status = "rejected"; // Set the status
        this.reason = reason; // Get the result
        setTimeout(() => { // Place it in the task queue
            try {
                this.onReject.forEach(handler); // Hand over to the event handler
            }catch (e){
                console.error(`Error in promise: ${e}`); // Print the exception
            }
        }, 0)
    }
    
    fn(resolve, reject); // Execute
}

// Define then
// value receives the result from the upper layer, function handles its own logic, and return it to the lower layer
_Promise.prototype.then = function(onFulfilled, onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : v => v; // Convert to a function
    onRejected = typeof onRejected === 'function' ? onRejected : r => r; // Convert to a function
    return new _Promise((resolve, reject) => { // Return a new _Promise
        this.onFulfilled.push((value) => { // Place the callback function on onFulfilled
            resolve(onFulfilled(value)); // Execute and pass it
        });
        this.onReject.push((value) => { // Place the callback function on onReject
            reject(onRejected(value)); // Execute and pass it
        });
    })
}

// Test
var promise = new _Promise(function(resolve,reject){
     var rand = Math.random() * 2;
      setTimeout(function(){
         if(rand < 1) resolve(rand);
         else reject(rand);
     },1000)
})
promise.then((rand) => {
    console.log("resolve",rand); // callback for resolve
}, (rand) => {
    console.log("reject",rand); // callback for reject
}).then(function(){ // continue after resolve
    return new _Promise(function(resolve,reject){
     var rand = Math.random() * 2;
      setTimeout(function(){
         resolve(rand);
     },1000)
})
}).then(function(num){ // continue after resolve
    console.log(num,"continue execution and receive parameter");
    return 1;
}).then(function(num){
    console.log(num,"continue execution and receive parameter");
})

/*
  The implemented _Promise is relatively simple
  The actual Promise used is more complex, with considerations for various situations
  In the example, only the Promise constructor and then are implemented. In practice, there are also implementations for catch, Promise.all, Promise.race, Promise.resolve, Promise.reject, etc.
 */