磨刀不误砍柴工，如果你对Promise还不是非常的熟悉，建议您先看一下我的上一篇文章或者翻阅其他资料有了一定的基础再来看本文呀~

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

用function来实现Promise

1. 实现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);
    }

}

2. 实现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);
                    }
                }
            });
        }
    })
}

3. 优化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);
                }
            })
        }
    })
}

4. 实现catch方法

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

5. 实现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);
        }
    });
}

6. 实现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);
                })
        }
    });
}

将函数的Promise改为class类型的

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

        function resolve(data) {
            //console.log(this);// window
            // 3. Promise的状态只能修改一次
            if (self.PromiseState !== 'pending') return
            // 1. 修改状态，promiseState
            self.PromiseState = 'resolved';//fullfilled
            // 2. 修改状态值，promiseResult
            self.PromiseResult = data;

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

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

            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onReject(data);
                });
            })

        }

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

    // then
    then(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(onReject) {
        const self = this;
        return self.then(undefined, onReject);
    }

    // resolve 及以下为类方法，static
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(value => {
                    resolve(value);
                }, reason => {
                    reject(reason);
                })
            } else {
                // 状态为成功，值为value
                resolve(value);
            }
        });
    }

    static reject(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(value => {
                    resolve(value);
                }, reason => {
                    reject(reason);
                })
            } else {
                // 状态为失败，值为value
                reject(value);
            }
        });
    }

    static all(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);
                    })
            }
        });
    }

    static race(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);
                    })
            }
        });
    }
}