手写Promise

手写Promise

普通

function Promise(executor) {
    // 状态
    this.PromiseState = "pending"    // fulfilled    rejected
    // 结果
    this.PromiseResult = null;
    // 用来存储回调函数
    this.callback = []

    const self = this
    function resolve(data) {
        if (self.PromiseState == "pending") {
            self.PromiseState = "fulfilled"
            self.PromiseResult = data
            // console.log(self.callback.onResolve)
            // self.callback.onResolve(data)
            // 保证then中的代码是异步的
            setTimeout(() => {
                self.callback.forEach(item => {
                    item.onResolve(data)
                })
            })
        }
    }

    function reject(data) {
        if (self.PromiseState == "pending") {
            self.PromiseState = "rejected"
            self.PromiseResult = data
            // self.callback.onReject(data)
            setTimeout(() => {
                self.callback.forEach(item => {
                    item.onReject(data)
                })
            })
        }
    }

    try {
        // 执行器函数是同步调用的
        executor(resolve, reject);
    } catch (error) {
        reject(error)
    }
}

// 添加then方法
Promise.prototype.then = function (onResolve, onReject) {
    let self = this

    // 判断onReject 是否传过来了  为了可以不传第二个值  进行异常穿透
    if (typeof onReject !== "function") {
        onReject = rea => {
            throw rea
        }
    }

    // 判断onResolve 是否传过来了  then方法可以不传值
    if (typeof onResolve !== "function") {
        onResolve = rea => rea
    }

    // then方法需要返回一个Promise对象
    return new Promise((resolve, reject) => {
        // 封装函数
        function callback(fn) {
            try {
                // 获取回调函数的执行结果
                let res = fn(self.PromiseResult)
                // 判断是否是 Promise
                if (res instanceof Promise) {
                    res.then(r => {
                        resolve(r)
                    }, j => {
                        reject(j)
                    })
                } else {
                    resolve(res)
                }
            } catch (error) {
                reject(error)
            }
        }

        if (this.PromiseState == "fulfilled") {
            setTimeout(() => {
                callback(onResolve)
            })

        }
        if (this.PromiseState == "rejected") {
            setTimeout(() => {
                callback(onResolve)
            })
        }

        // 解决异步问题
        if (this.PromiseState == "pending") {
            this.callback.push({
                onResolve: function () {
                    callback(onResolve)
                },
                onReject: function () {
                    callback(onReject)
                }
            })
        }
    })
}

// 添加catch 方法    捕获失败的Promise
Promise.prototype.catch = function (onReject) {
    return this.then(undefined, onReject)
}

// 添加 resolve方法     如果值是一个成功的Promise就返回一个成功的Promise。
// 如果值是一个 失败的Promise 就返回一个失败的Promise
Promise.resolve = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(r => {
                resolve(r)
            }, j => {
                reject(j)
            })
        } else {
            resolve(value)
        }
    })
}

// 添加reject方法   不管是什么都返回失败的Promise
Promise.reject = function (value) {
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(r => {
                reject(r)
            }, j => {
                reject(j)
            })
        } else {
            reject(value)
        }
    })
}


// 添加all方法 只有全成功才返回成功的Promise  有一个失败就返回失败的Promise
Promise.all = function (promises) {
    let count = 0;
    let arr = [];
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(r => {
                count++;
                arr[i] = r
                if (count == promises.length) {
                    resolve(arr)
                }
            }, j => {
                reject(j)
            })
        }
    })
}

// 添加race方法 返回的Promise结果由第一个执行的Promise决定
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(r => {
                // 成功  谁先执行谁决定
                resolve(r)
            }, j => {
                // 失败
                reject(j)
            })
        }
    })
}

Class

// 自定义封装Promise
class Promise {
    // 构造方法
    constructor(executor) {
        // 状态
        this.PromiseState = "pending"    // fulfilled    rejected
        // 结果
        this.PromiseResult = null;
        // 用来存储回调函数
        this.callback = []

        // 防止this 指向window
        const self = this
        function resolve(data) {
            if (self.PromiseState == "pending") {
                self.PromiseState = "fulfilled"
                self.PromiseResult = data
                // console.log(self.callback.onResolve)
                // self.callback.onResolve(data)
                // 保证then中的代码是异步的
                setTimeout(() => {
                    self.callback.forEach(item => {
                        item.onResolve(data)
                    })
                })
            }
        }

        function reject(data) {
            if (self.PromiseState == "pending") {
                self.PromiseState = "rejected"
                self.PromiseResult = data
                // self.callback.onReject(data)
                setTimeout(() => {
                    self.callback.forEach(item => {
                        item.onReject(data)
                    })
                })
            }
        }

        try {
            // 执行器函数是同步调用的
            executor(resolve, reject);
        } catch (error) {
            reject(error)
        }
    }

    // 添加then方法
    then(onResolve, onReject) {
        let self = this

        // 判断onReject 是否传过来了  为了可以不传第二个值  进行异常穿透
        if (typeof onReject !== "function") {
            onReject = rea => {
                throw rea
            }
        }

        // 判断onResolve 是否传过来了  then方法可以不传值
        if (typeof onResolve !== "function") {
            onResolve = rea => rea
        }

        // then方法需要返回一个Promise对象
        return new Promise((resolve, reject) => {
            // 封装函数
            function callback(fn) {
                try {
                    // 获取回调函数的执行结果
                    let res = fn(self.PromiseResult)
                    // 判断是否是 Promise
                    if (res instanceof Promise) {
                        res.then(r => {
                            resolve(r)
                        }, j => {
                            reject(j)
                        })
                    } else {
                        resolve(res)
                    }
                } catch (error) {
                    reject(error)
                }
            }

            if (this.PromiseState == "fulfilled") {
                setTimeout(() => {
                    callback(onResolve)
                })

            }
            if (this.PromiseState == "rejected") {
                setTimeout(() => {
                    callback(onResolve)
                })
            }

            // 解决异步问题
            if (this.PromiseState == "pending") {
                this.callback.push({
                    onResolve: function () {
                        callback(onResolve)
                    },
                    onReject: function () {
                        callback(onReject)
                    }
                })
            }
        })
    }

    // 添加catch 方法    捕获失败的Promise
    catch(onReject) {
        return this.then(undefined, onReject)
    }

    // 添加 resolve方法     如果值是一个成功的Promise就返回一个成功的Promise。
    // 如果值是一个 失败的Promise 就返回一个失败的Promise
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(r => {
                    resolve(r)
                }, j => {
                    reject(j)
                })
            } else {
                resolve(value)
            }
        })
    }

    // 添加reject方法   不管是什么都返回失败的Promise
    static reject(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(r => {
                    reject(r)
                }, j => {
                    reject(j)
                })
            } else {
                reject(value)
            }
        })
    }


    // 添加all方法 只有全成功才返回成功的Promise  有一个失败就返回失败的Promise
    static all(promises) {
        let count = 0;
        let arr = [];
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(r => {
                    count++;
                    arr[i] = r
                    if (count == promises.length) {
                        resolve(arr)
                    }
                }, j => {
                    reject(j)
                })
            }
        })
    }

    // 添加race方法 返回的Promise结果由第一个执行的Promise决定
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(r => {
                    // 成功  谁先执行谁决定
                    resolve(r)
                }, j => {
                    // 失败
                    reject(j)
                })
            }
        })
    }

}