【源码解析】Promise

构造函数

/**
 * Promise构造函数
 * excutor：执行器函数（同步执行）
 * @param excutor
 */
function Promise(executor) {
    const _this = this;
    _this.status = "pending"; // 给Promise对象指定status属性，初始值为pending
    _this.data = undefined; // 给Promise对象指定一个用于存储结果数据的属性
    _this.callbacks = []; // 每个元素的结构：{onResolve(){},onReject(){}}

    function resolve(value) {
        // 如果状态已经修改，返回
        if (_this.status !== "pending") return;
        // 修改状态为fullFilled
        _this.status = "fullFilled";
        // 保存value数据
        _this.data = value;
        if (_this.callbacks.length > 0) {
            setTimeout(function () {
                // 放入队列中执行所有成功的回调
                _this.callbacks.forEach(callbackObj => {
                    callbackObj.onResolved(value)
                })
            })
        }
    }

    function reject(reason) {
        // 如果状态已经修改，返回
        if (_this.status !== "pending") return;
        // 修改状态为fullFilled
        _this.status = "rejected";
        // 保存value数据
        _this.data = reason;
        if (_this.callbacks.length > 0) {
            setTimeout(function () {
                // 放入队列中执行所有成功的回调
                _this.callbacks.forEach(callbackObj => {
                    callbackObj.onRejected(reason)
                })
            })
        }
    }

    // 立即同步执行excutor
    try {
        executor(resolve, reject)
    } catch (reason) {
        // 如果执行器抛出异常，Promise对象变为rejected状态
        reject(reason)
    }
}

/**
 * Promise原型对象的then()，指定成功和失败的回调函数，返回一个新的Promise对象
 * @param onResolved
 * @param onRejected
 */
Promise.prototype.then = function (onResolved, onRejected) {

    onResolved = typeof onResolved === 'function' ? onResolved : value => value; // 向后传递成功的value
    // 指定默认的失败回调（实现错误/异常传递的关键点）
    onRejected = typeof onRejected === 'function' ? onRejected : reason => {
        throw reason
    } // 向后传递失败的reason

    const _this = this;
    /**
     调用指定回调函数执行
     */
    return new Promise((resolve, reject) => {
        function handler(callback) {
            /**
             1. 如果抛出异常，return的Promise就会失败，reason就是error
             2. 如果回调函数返回的不是Promise，return的Promise就会成功，value就是返回的值
             3. 如果回调函数返回的是Promise，return的Promise结果就是这个Promise的结果
             */
            try {
                const result = callback(_this.data);
                if (result instanceof Promise) {
                    result.then(
                        value => resolve(value), // 当result成功时，让return的Promise也成功
                        reason => reject(reason) // 当result失败时，让return的Promise也失败
                    )
                    // 简洁写法
                    // result.then(resolve,reject)
                } else {
                    resolve(result)
                }
            } catch (error) {
                reject(error)
            }
        }

        // 当前状态还是pending状态，将回调函数保存
        if (_this.status === "pending") {
            _this.callbacks.push({
                onResolved() {
                    handler(onResolved)
                },
                onRejected() {
                    handler(onRejected)
                }
            })
        } else if (_this.status === "fullFilled") {
            // 如果当前是fullFilled状态，异步执行onResolve并改变return的promise状态
            setTimeout(() => {
                handler(onResolved)
            })
        } else {
            // 如果当前是rejected状态，异步执行onReject并改变return的promise状态
            setTimeout(() => {
                handler(onRejected)
            })
        }
    })
};

/**
 * Promise原型对象的catch()，指定失败的回调函数，返回一个新的Promise对象
 * @param onRejected
 */
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected)
};

/**
 * Promise函数对象的resolve方法，返回一个指定value的成功的Promise
 * @param value
 */
Promise.resolve = function (value) {
    // 返回一个成功/失败的Promise
    return new Promise((resolve, reject) => {
        // value是promise
        if (value instanceof Promise) {
            value.then(resolve, reject)
        } else {
            resolve(value)
        }
    })
}

/**
 * Promise函数对象的reject方法，返回一个指定reason的失败的Promise
 * @param reason
 */
Promise.reject = function (reason) {
    // 返回一个失败的promise
    return new Promise((resolve, reject) => {
        reject(reason)
    })
}

/**
 * Promise函数对象的all方法，返回一个Promise，只有当所有的Promise都成功时才成功，否则只要有一个失败的就失败
 * @param promises
 */
Promise.all = function (promises) {
    // 保存所有成功value的数组
    const values = new Array(promises.length);
    // 用来保存成功Promise的数量
    let count = 0;
    return new Promise((resolve, reject) => {
        // 遍历获取每个Promise的结果
        promises.forEach((p, index) => {
            p.then(
                value => {
                    // 成功了数量+1
                    count++;
                    // p成功，将成功的value保存入values
                    values[index] = value;
                    // 如果全部成功了，将return的Promise状态改为成功
                    if (count === promises.length) resolve(values);
                },
                reason => {
                    // 只要一个失败了，return的Promise就会失败
                    reject(reason)
                }
            )
        })
    })
}

/**
 * Promise函数对象的race方法，返回一个Promise，只有当所有的Promise都成功时才成功，否则只要有一个失败的就失败
 * @param promises
 */
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        // 遍历promises获取每个promise的结果
        promises.forEach((p, index) => {
            p.then(
                value => {
                    // 一旦成功了，就将返回的Promise状态变为成功
                    resolve(value)
                },
                reason => {
                    // 一旦失败了，就将返回的Promise状态变为失败
                    reject(reason)
                }
            )
        })
    })
}

/**
 * 返回一个Promise对象，在指定的时间后才确定结果
 * @param value
 * @param time
 */
Promise.resolveDelay = function (value, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (value instanceof Promise) {
                value.then(resolve, reject)
            } else {
                resolve(value)
            }
        }, time)
    })
}

/**
 * 返回一个Promise对象，在指定的时间后才确定失败
 * @param reason
 * @param time
 */
Promise.rejectDelay = function (reason, time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(reason)
        })
    }, time)
}
window.Promise = Promise;

class版本

class Promise {
    constructor(executor) {
        const _this = this;
        _this.status = "pending"; // 给Promise对象指定status属性，初始值为pending
        _this.data = undefined; // 给Promise对象指定一个用于存储结果数据的属性
        _this.callbacks = []; // 每个元素的结构：{onResolve(){},onReject(){}}

        function resolve(value) {
            // 如果状态已经修改，返回
            if (_this.status !== "pending") return;
            // 修改状态为fullFilled
            _this.status = "fullFilled";
            // 保存value数据
            _this.data = value;
            if (_this.callbacks.length > 0) {
                setTimeout(function () {
                    // 放入队列中执行所有成功的回调
                    _this.callbacks.forEach(callbackObj => {
                        callbackObj.onResolved(value)
                    })
                })
            }
        }

        function reject(reason) {
            // 如果状态已经修改，返回
            if (_this.status !== "pending") return;
            // 修改状态为fullFilled
            _this.status = "rejected";
            // 保存value数据
            _this.data = reason;
            if (_this.callbacks.length > 0) {
                setTimeout(function () {
                    // 放入队列中执行所有成功的回调
                    _this.callbacks.forEach(callbackObj => {
                        callbackObj.onRejected(reason)
                    })
                })
            }
        }

        // 立即同步执行executor
        try {
            executor(resolve, reject)
        } catch (reason) {
            // 如果执行器抛出异常，Promise对象变为rejected状态
            reject(reason)
        }
    }

    then(onResolve, onReject) {
        onResolve = typeof onResolve === 'function' ? onResolve : value => value;
        onReject = typeof onReject === 'function' ? onReject : reason => throw reason;

        const _this = this;

        return new Promise((resolve, reject) => {
            function handle(callback) {
                try {
                    const result = callback(_this.data)
                    if (result instanceof Promise) {
                        result.then(
                            value => resolve(value),
                            reason => reject(reason)
                        )
                    } else {
                        resolve(result)
                    }
                } catch (error) {
                    reject(error)
                }
            }

            if (_this.status === "pending") {
                _this.callbacks.push({
                    onResolved() {
                        handle(onResolve)
                    },
                    onRejected() {
                        handle(onReject)
                    }
                })
            } else if (_this.status === "fullFilled") {
                setTimeout(() => {
                    handle(resolve)
                })
            } else if (_this.status === "rejected") {
                setTimeout(() => {
                    handle(reject)
                })
            }
        })
    }

    catch(onRejected) {
        return this.then(undefined, onRejected)
    }

    static resolve(value){
        return new Promise((resolve,reject)=>{
            if(value instanceof Promise){
                value.then(resolve,reject)
            }else{
                resolve(value)
            }
        })
    }

    static reject(reason){
        return new Promise((resolve,reject)=>{
            reject(reason)
        })
    }

    static all(promises) {
        return new Promise((resolve, reject) => {
            const values = new Array(promises.length);
            let count = 0;
            promises.forEach((p, index) => {
                p.then(
                    value => {
                        count++;
                        values[index] = value;
                        if (count === promises.length) resolve(values)
                    },
                    reject
                )
            })
        })
    }

    static race(promise) {
        return new Promise((resolve, reject) => {
            promise.forEach((p, index) => {
                p.then(
                    value => resolve(value),
                    reason => reject(reason)
                )
            })
        })
    }

    static resolveDelay(value, time) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (value instanceof Promise) {
                    value.then(resolve,reject)
                } else {
                    resolve(value)
                }
            }, time)
        })
    }

    static rejectDelay(reason, time) {
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                reject(reason)
            },time)
        })
    }
}

最后更新： 2021年09月23日 13:53

wsw