Promise学习并手写一个Promise

---

一、Promise介绍与基本使用？

什么是Promise

Promise 是ES6提供异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。可以解决之前异步操作产生的回调地狱问题。

Promise的基本使用

• 对象的三种状态
  Pending状态（进行中）
  Fulfilled状态（已成功）
  Rejected状态（已失败）
• 创建Promise实例

    let p = new Promise((resolve,reject)=>{
        if('异步操作成功'){
            resolve(value)
        }else{
            reject(error)
        }
    })

调用resolve()使得状态Pending -> Fulfilled
调用reject()使得状态Pending -> Rejected

• then和catch方法
  Promise实例生成后，可用then方法分别指定两种状态回调参数。then 方法可以接受两个回调函数作为参数。catach方法只能接收失败的回调。
• finally()
  无论成功还是失败状态都会执行这个函数。

    let p = new Promise((resolve, reject) => {
        if (false) {
            resolve("成功")
        } else {
            reject("失败")
        }
    })
    p.then((value) => {
        console.log(value);
    }, (reason) => {
        console.log(reason);
    }).catch(e=>{
        console.log(e);
    })

二、常用的API

Promise.resolve()

• 传入的参数如果为非Promise对象，返回一个成功状态的Promise对象。
• 传入的参数如果是Promise对象，则参数的结果将影响返回的结果。

    let p1 = Promise.resolve('521')
    let p2 = Promise.resolve(new Promise((resolve, reject) => {
        resolve("成功")
    }))
    let p3 = Promise.resolve(new Promise((resolve, reject) => {
        reject("失败")
    }))

    console.log(p1,p2,p3);
    p1.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })
    p2.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })
    p3.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })

Promise.reject()

该方法返回的永远都是失败状态的Promise对象。值为传入的参数。

    let p1 = Promise.reject('521')
    let p2 = Promise.reject(new Promise((resolve, reject) => {
        resolve("成功")
    }))
    let p3 = Promise.reject(new Promise((resolve, reject) => {
        reject("失败")
    }))

    console.log(p1,p2,p3);
    p1.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })
    p2.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })
    p3.then(value => {
        console.log(value);
    }).catch(reason => {
        console.log(reason);
    })

Promise.all()

• **参数：**可接收多个Promise对象（或非Promise对象）形成的数组。
• ** 返回值：**返回一个Promise对象。

---

如果参数数组中全为成功状态的Promise对象，则返回一个成功的Promise对象，值为所有Promise的值组成的数组；

    function createPromise(message, type = true) {
        return new Promise((resolve, reject) => {
                if (type) {
                    resolve(message)
                } else {
                    reject(message)
                }

        })
    }

    const p1 = createPromise("楼德华")
    const p2 = createPromise("涨削油")
    const p3 = createPromise("犁明")
    const p4 = createPromise("锅扶城")

    console.log(Promise.all([p1, p2, p3, p4]));

如果参数中有失败状态的Promise对象，则返回第一个失败的Promise对象。

    function createPromise(message, type = true) {
        return new Promise((resolve, reject) => {
                if (type) {
                    resolve(message)
                } else {
                    reject(message)
                }

        })
    }

    const p1 = createPromise("楼德华")
    const p2 = createPromise("涨削油")
    const p3 = createPromise("犁明",false)
    const p4 = createPromise("锅扶城")

    console.log(Promise.all([p1, p2, p3, p4]));

Promise.race()

• **参数：**可接收多个Promise对象（或非Promise对象）形成的数组。
• ** 返回值：**返回一个Promise对象。返回状态最先改变的那个Promise对象。

    function createPromise(message, delay, type = true) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (type) {
                    resolve(message)
                } else {
                    reject(message)
                }
            }, delay)

        })
    }

    const p1 = createPromise("楼德华",2000)
    const p2 = createPromise("涨削油",3000)
    const p3 = createPromise("犁明", 1000)
    const p4 = createPromise("锅扶城",3000)

    console.log(Promise.race([p1, p2, p3, p4]));

三、手写Promise

Promise

function Promise(executor) {
        this.promiseState = "pending"
        this.promiseResult = null
        this.callbacks = []
        const self = this
        //修改状态为成功
        function resolve(data) {
            if (self.promiseState === 'pending') {
                self.promiseState = "fulfilled"
                self.promiseResult = data
                //传入的参数可能是个异步任务，会先执行.then()或.catch(),将多个结果保存下来等待修改状态时执行
                self.callbacks.forEach(item => {
                    if (item.onResolve) {
                        item.onResolve()
                    }
                })
            }
        }
        //修改状态为失败
        function reject(data) {
            if (self.promiseState === 'pending') {
                self.promiseState = "rejected"
                self.promiseResult = data
                self.callbacks.forEach(item => {
                    if (item.onReject) {
                        item.onReject()
                    }
                })
            }
        }
        try {   //如果throw xxx 直接返回一个值为xxx的失败状态的Promise对象
            executor(resolve, reject)
        } catch (e) {
            reject(e)
        }

    }

Promise.then

Promise.prototype.then = function (onResolve = value => value, onReject = (reason) => { throw reason }) {
        //保存this
        const self = this
        //返回一个Promise
        return new Promise((resolve, reject) => {
            function callback(type) {
                try {
                    let result = type(self.promiseResult)
                    //判断传入的是不是Promise对象
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v)
                        }, r => {
                            reject(r)
                        })
                    } else {
                        resolve(result)
                    }
                } catch (e) {
                    reject(e)
                }
            }
            if (this.promiseState === 'fulfilled') {
                callback(onResolve)
            }
            if (this.promiseState === 'rejected') {
                callback(onReject)
            }
            //异步保存，修改状态后执行
            if (this.promiseState === 'pending') {
                this.callbacks.push({
                    onResolve: function () {
                        callback(onResolve);
                    },
                    onReject: function () {
                        callback(onReject);
                    }
                }
                )

            }
        })
    }

Promise.catch

    Promise.prototype.catch = function (onReject) {
        return this.then(undefined, onReject)
    }

Promise.resolve

Promise.resolve = function (value) {
        return new Promise((resolve, reject) => {
            try {
                if (value instanceof Promise) {
                    value.then(v => {
                        resolve(v)
                    }, r => {
                        reject(r)
                    })
                } else {
                    resolve(value)
                }
            } catch (e) {
                reject(e)
            }
        })
    }

Promise.reject

Promise.reject = function (resaon) {
        return new Promise((resolve, reject) => {
            try {
                if (resaon instanceof Promise) {
                    resaon.then(v => {
                        reject(v)
                    }, r => {
                        reject(r)
                    })
                } else {
                    reject(resaon)
                }
            } catch (e) {
                reject(e)
            }
        })
    }

Promise.all

Promise.all = function (promises) {
        return new Promise((resolve, reject) => {
            let arr = []
            promises.forEach((item, index) => {

                if (item instanceof Promise) {
                    item.then(value => {
                        arr[index] = value
                        if (arr.length = promises.length) {
                            resolve(arr)
                        }
                    }, reason => {
                        reject(reason)
                    })
                } else {
                    arr[index] = item
                }

            })
        })

    }

Promise.race

Promise.race = function (promises) {
        return new Promise((resolve, reject) => {
            promises.forEach((item, index) => {
                item.then(value => {
                    resolve(value)
                }, reason => {
                    reject(reason)
                })


            })
        })
    }

继续完善中。。。