Handwriting promise [03] - realize multiple calls and chain calls of then method

1. then Multiple calls to method

We are defining success successCallback And failure failCallback When you call back , Only one value is defined , Not considered then Method is called more than once asynchronously , Therefore, successful and failed callbacks should be defined as a thing that can hold multiple values – Array .

successCallback = [];
failCallback = [];

therefore then The callback store in the method also changes ：

this.successCallback.push(successCallback);
this.failCallback.push(failCallback);

up to now , Multiple callback functions have already existed successfully / The failure of the Array of callback functions It's in , When the status changes to success / In case of failure, each item in the callback function array should be called in turn , therefore resolve/reject Should read ：

resolve = value => {
    
    if (this.status !== PENDING) return;
    this.status = FULFILLED;
    this.value = value;
    while (this.successCallback.length) {
    
        //  The first item of the array should be executed first , And the first item of the array is the callback function required, so you can directly call 
        this.successCallBack.shift()(this.value);
    }
}
reject = value => {
    
    if (this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = reason;
    while (this.failCallback.length) {
    
        //  Empathy  resolve
        this.failCallback.shift()(this.reason);
    }
}

Promise in then Method can be called more than once .

2. then Chain call to method

promise.then().then().then()

2.1 Yes then Method

1. then The method is Promise Medium .
2. then Method can be called in a chain , explain then The return value of the method is a Promise object .

//  since  then  Method returns a  Promise  object , Then create a  Promise  Object to return 
then(successCallback, failCallback) {
    
    let Promise2 = new LyPromise(() => {
    
        if (this.status === FULFILLED) {
    
            successCallback(this.value);
        } else if (this.status === REJECTED) {
    
            failCallback(this.reason);
        }
    });
    return Promise2;
};

such ,then Just go back to one Promise Objects can be given to Of the next call then 了 .

Now? , We need to consider next then Method How to get this By previous then Back to Promise object .

then(successCallback, failCallback) {
    
    let Promise2 = new LyPromise((resolve, reject) => {
    
        //  When successful / You can achieve this success when you fail / Failed callback , So you can also get the return value of this here 
        if (this.status === FULFILLED) {
    
            //  This  x  Is the return value of this successful callback 
            let x = successCallback(this.value);
            resolve(x);
        } else if (this.status === REJECTED) {
    
            let x = failCallback(this.reason);
            reject(x);
        }
    });
    return Promise2;
};

such then Method can return a Promise Object .

however , If the return value is a Promise What about the object ？

therefore , What needs to be done next is ： Judge x The value of is Common value still Promise object ;

• If it is Common value direct resolve;
• If it is Promise object , According to Promise Object to determine the use of resolve still reject ;

//  Write a function here to facilitate reuse 
function resolvePromise(x, resolve, reject) {
    
    // Q:  How to judge this  x  Is it a  Promise object 
    // A:  Judge  x  Is it right?  LyPromise  An instance object of 
    if (x instanceof LyPromise) {
    
        x.then(resolve, reject);
    } else {
    
        resolve(x);
    }
}

Check x Is it a Promise The object is written .

2.2 then Method

then(successCallback, failCallback) {
    
    let Promise2 = new LyPromise((resolve, reject) => {
    
        if (this.status === FULFILLED) {
    
            let x = successCallback(this.value);
            resolvePromise(x, resolve, reject);
        } else if (this.status === REJECTED) {
    
            let x = failCallback(this.reason);
            resolvePromise(x, resolve, reject);
        } else {
    
            this.successCallback.push(successCallback);
            this.failCallback.push(failCallback);
        }
    })
    return Promise2;
}

3. Implemented so far Promise Code

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

class LyPromise {
    
    constructor(executor) {
    
        executor(this.resolve, this.reject)
    }

    status = PENDING;

    value = undefined;
    reason = undefined;

    //  Successful callback 
    successCallback = [];
    //  Failed callback 
    failCallback = [];

    resolve = (value) => {
    
        if (this.status !== PENDING) return;
        this.status = FULFILLED;
        this.value = value;
        //  Determine whether a successful callback exists , If there is   Call the successful callback 
        // this.successCallback && this.successCallback(this.value);
        while (this.successCallback.length) {
    
            this.successCallback.shift()(this.value); // perform 
        }

    }

    reject = (reason) => {
    
        if (this.status !== PENDING) return;
        this.status = REJECTED;
        this.reason = reason;
        //  Determine whether the failed callback exists , If there is   Call the failed callback 
        // this.failCallback && this.failCallback(this.reason)
        while (this.failCallback.length) {
    
            this.failCallback.shift()(this.reason)
        }

    }

    then(successCallback, failCallback) {
    
        let Promise2 = new LyPromise((resolve, reject) => {
    
            if (this.status === FULFILLED) {
    
                let x = successCallback(this.value);
                resolvePromise(x, resolve, reject);
            } else if (this.status === REJECTED) {
    
                let x = failCallback(this.reason); 
                resolvePromise(x, resolve, reject)
            } else {
    
                //  When the actuator operates asynchronously ,status still pending,
                //  So at this time, we don't know whether it is a success or a failure callback , So here we need to call back these two 
                //  Store it 
                this.successCallback.push(successCallback);
                this.failCallback.push(failCallback);
            }
        })

        return Promise2;

    }
}


function resolvePromise(x, resolve, reject) {
    
    if (x instanceof LyPromise) {
     // promise object 
        x.then(resolve, reject)
    } else {
      //  Common value 
        resolve(x);
    }

}

module.exports = LyPromise;