promise me,一定要学会手写一个Promise(六)

一、手写Promise方法

实现Promise的构造器方法

function Promise(excutor) {
    // 添加属性 
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    this.callbacks = [];// 为了多个then链式调用,保存then方法中传入的回调函数
    //保存实例对象的this的值
    const self = this;

    function resolve(data) {
        //console.log(this);// window

        // Promise的状态只能修改一次
        if (self.PromiseState !== 'pending') return
        // 修改对象的状态，promiseState
        self.PromiseState = 'resolved';//fullfilled
        // 修改对象的值，promiseResult
        self.PromiseResult = data;

        //调用成功的回调，即then函数的第一个参数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        })
    }

    function reject(data) {
        // Promise的状态只能修改一次
        if (self.PromiseState !== 'pending') return
        // 修改状态，promiseState
        self.PromiseState = 'reject';//fullfilled
        // 修改状态值，promiseResult
        self.PromiseResult = data;

         //调用成功的回调，即then函数的第一个参数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onReject(data);
            });
        })

    }

    try {
        // 执行期的函数，在内部时同步调用的
        excutor(resolve, reject);
    } catch (e) {
        // 修改promise对象的状态和值
        reject(e);
    }

}

实现then方法

//添加then方法
Promise.prototype.then = function (onResolved, onReject) {
    const self = this;// Promise

    return new Promise((resolve, reject) => {
        // 当Promise状态为成功，调用此函数
        if (self.PromiseState === 'resolved') {
            try {
                let result = onResolved(self.PromiseResult);
                // 判断result
                if (result instanceof Promise) {
                    result.then((value) => {
                        resolve(value);
                    }, (reason) => {
                        reject(reason);
                    })
                } else {
                    // 结果的对象状态为成功
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        }
        // 当Promise状态为成功，调用此函数
        if (self.PromiseState === 'reject') {
            try {
                let result = onReject(self.PromiseResult);
                // 判断result
                if (result instanceof Promise) {
                    result.then((value) => {
                        resolve(value);
                    }, (reason) => {
                        reject(reason);
                    })
                } else {
                    // 结果的对象状态为成功
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        }

        // 当excutor的方法体为一个异步函数时，this.PromiseState 为pending
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onReject: function () {
                    try {
                        // 判断执行结果
                        let result = onReject(self.PromiseResult);
                        if (result instanceof Promise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            });
                        } else {
                            resolve(result);
                        }
                    } catch (e) {
                        reject(e);
                    }
                },
                onResolved: function () {
                    // 判断执行结果
                    try {
                        let result = onResolved(self.PromiseResult);
                        if (result instanceof Promise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            });
                        } else {
                            resolve(result);
                        }
                    } catch (e) {
                        reject(e);
                    }
                }
            });
        }
    })
}

优化then方法

Promise.prototype.then = function (onResolved, onReject) {
    const self = this;// Promise
    // 判断回调函数参数-原生允许不穿onReject
    if (typeof onReject !== 'function') {
        onReject = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
    }
    return new Promise((resolve, reject) => {
        // 封装函数
        function callback(type) {
            try {
                let result = type(self.PromiseResult);
                // 判断result
                if (result instanceof Promise) {
                    result.then((value) => {
                        resolve(value);
                    }, (reason) => {
                        reject(reason);
                    })
                } else {
                    // 结果的对象状态为成功
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        }
        // 当Promise状态为成功，调用此函数
        if (self.PromiseState === 'resolved') {
            setTimeout(() => {
                callback(onResolved);
            })
        }
        // 当Promise状态为成功，调用此函数
        if (self.PromiseState === 'reject') {
            setTimeout(() => {
                callback(onReject);
            })
        }

        // 当excutor的方法体为一个异步函数时，this.PromiseState 为pending
        if (this.PromiseState === 'pending') {
            this.callbacks.push({
                onReject: function () {
                    callback(onReject);
                },
                onResolved: function () {
                    // 判断执行结果
                    callback(onResolved);
                }
            })
        }
    })
}

实现catch方法

//添加catch方法
Promise.prototype.catch = function (onReject) {
    const self = this;
    return self.then(undefined, onReject);
}

实现reject、resolve方法

//添加resolve方法，是实例对象的方法
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(value => {
                resolve(value);
            }, reason => {
                reject(reason);
            })
        } else {
            // 状态为成功，值为value
            resolve(value);
        }
    });
}
//添加reject方法，是实例对象的方法
Promise.reject = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(value => {
                resolve(value);
            }, reason => {
                reject(reason);
            })
        } else {
            // 状态为失败，值为value
            reject(value);
        }
    });
}

实现all、race方法

//添加all方法:都成功则最后返回一个成功的promise
Promise.prototype.all = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(
                v => {
                    // 得到promise的状态为成功
                    count++;
                    //将当前promise成功的结果存入数组中,顺序对应
                    arr[i] = v;
                    //判断promises里的每一个都为成功
                    if (count === promises.length) {
                        resolve(arr);
                    }
                },
                r => {
                    // 得到promise的状态为失败
                    reject(r);
                })
        }
    });
}
//添加race方法 参数：promise数组；结果：返回第一个promise的结果
Promise.prototype.race = function (promises) {
    return new Promise((resolve, reject) => {
        let count = 0;
        let arr = [];
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(
                v => {
                    resolve(arr);
                },
                r => {
                    // 得到promise的状态为失败
                    reject(r);
                })
        }
    });
}