【Javascript基础】手写Promise

目录

• 第一个雏形
• Promise细节完善
• Promise.resolve(value) 的实现
• Promise.reject(value) 的实现
• Promise.all的实现思路
• promise.race的实现思路

Promise其实是一个构造函数，我们可以使用这个构造函数创建一个Promise实例。该构造函数很简单，它只有一个参数，按照Promise/A+规范命名，我们把Promise构造函数的参数叫做executor, 它是函数类型的参数。这个函数又自动具有resolve, reject两个方法作为参数。

第一个雏形

function Promise(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;

    const resolve = value => {
        this.value = value;
    }


    const reject = value => {
        this.reason = reason;
    }

    executor(resolve, reject);    
}

Promise.prototype.then = function (onfulfilled = Function.prototype, onrejected = Function.prototype) {
    onfulfilled(this.value);
    onrejected(this.reason);
}

每个Promise实例的then方法逻辑都是一致的，实例在调用该方法时，可以通过原型（Promise.prototype）来调用，而不是每次实例化都新创建一个then方法，颐便节省內存，显然更合适。

Promise细节完善

function Promise(executor) {
    this.status = 'pending';
    this.value = null;
    this.reason = null;
    this.onFullfilledArray = [];
    this.onRejectedArray = [];

    const resolve = value => {
        if (value instanceof Promise) {
            return value.then(resolve, reject);
        }

        // setTimeout主要是为了异步实现
        setTimeout(() => {
            if (this.status === 'pending') {
                this.value = value;
                this.status = 'fullfilled';

                this.onFullfilledArray.forEach(func => {
                    func(value);
                })
            }
        });
    }

    const reject = reason => {
        setTimeout(() => {
            if (this.status === 'pending') {
                this.reason = reason;
                this.status = 'rejected';

                this.onRejectedArray.forEach(func => {
                    func(reason);
                })
            }
        });
    }

    executor(resolve, reject);   
}

Promise.prototype.then = function (onfulfilled, onrejected) {
    onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data;
    onrejected = typeof onrejected ==='function' ? onrejected : error => {throw error}

    if (this.status === 'fulfilled') {
        onfulfilled(this.value);
    }

    if (this.status === 'rejected') {
        onrejected(this.reason);
    }

    if (this.status === 'pending') {
        this.onFullfilledArray.push(onfulfilled);
        this.onRejectedArray.push(onrejected);
    }
}

Promise.resolve(value) 的实现

Promise.resolve = function (value) {
    return new Promise((reslove, reject) =>{
        resolve(value);
    })  
}

Promise.reject(value) 的实现

Promise.reject = function (value) {
    return new Promise((reslove, reject) =>{
        reject(value);
    })  
}

Promise.all的实现思路

Promise.all = function(promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new TypeError('The arguments should be array!');
    }

    return new Promise((resolve, reject) => {
        try {
            let resultArray = [];
            const length = promiseArray.length;

            for (let i = 0; i < length; i++) {
                promiseArray[i].then(data => {
                    resultArray.push(data);

                    if (resultArray.length === length) {
                        resolve(resultArray);
                    }
                }, reject);

               
                
            }
        }

        catch(e) {
            reject(e);
        }
    });
}

promise.race的实现思路

Promise.race = function(promiseArray) {
    if (!Array.isArray(promiseArray)) {
        throw new TypeError('The arguments should be array!');
    }

    return new Promise((resolve, reject) => {
        try {
            const length = promiseArray.length;

            for (let i = 0; i < length; i++) {
                promiseArray[i].then(resolve, reject);               
            }
        }

        catch(e) {
            reject(e);
        }
    });
}