Promise的理解和使用

Promise 的理解和使用

1.Promise 是什么

• Promise 是ES6中引入的解决异步编程的新方案，(旧方案是单纯的使用回调函数)
• Promise 是一个构造函数，使用Promise对象封装一个异步操作可以获取其成功/失败的结果

2.为什么要用promise

• 指定回调函数的方式更加灵活，支持链式操作，可以解决回调地狱问题
  (回调地狱:回调函数嵌套调用，外部回调函数的执行结果是嵌套的回调执行的条件，如果嵌套层数过多不便于阅读，不便于异常处理)

3.Promise的状态

实例对象中的一个属性[PromiseState]

• pending 未决定的
• resolved / fullfilled 成功
• rejected 失败

4.Promise对象的值

实例对象中另一个属性[PromiseResult]

• 保存着对象成功/失败的结果
• resolve
• reject

5.Promise then()方法

• then((onResolved,onRejected)=>{}) then方法接收两个参数，可以执行成功或失败的回调
• onResolved函数： 成功的回调 （value）=> {}
• onRejected函数： 失败的回调 (reason)=> {}
• 注意then()方法里的代码是异步执行的
• 如果then()方法内部返回的是一个Promise，则then()方法最终返回的Promise由这个返回的promise决定，否则最终的promise状态都是fulfilled,值看是否有return ，没有则返回undefind

6. Promise catch() 方法

• 只能指定失败的回调

7. Promise.resolve() 方法

注意这里的resolve方法是Promise对象的方法，不是Promise对象实例中执行器函数的第一个参数resolve回调函数，调用这个方法改变promise实例对象中的PromiseState状态

   
       let p1 = Promise.resolve(521)
       //如果resolve传入的参数为非promise类型的对象，返回结果为成功promise对象
       //如果resolve传入参数为Promise对象，则参数的结果决定了resolve的结果
       let p2 = Promise.resolve(new Promise((resolve,reject)=>{
        //    resolve('成功')
        reject('error')
       }))
       p2.catch(err=>{
           console.log(err)
       })
       console.log(p2)

8. Promise.reject() 方法

接收一个参数返回一个失败的promise对象

9.Promise.all()方法

接收一个参数，这个参数为包含多个promise的数组，只有所有的子promise状态为成功，最终才返回成功promise,值为子promise的值组成的数组

10.Promise.race()方法

接收一个参数，这个参数为包含多个promise的数组，最终才返回的promise,状态和值由数组中最先执行完的子promise所决定

11.关于promise对象状态的修改和执行回调函数谁先谁后的问题（这一段很绕）

如果promise内部封装的是异步操作，那么回调函数,是在异步操作修改promise状态后再执行回调函数内部的代码
如果promise内部封装的是同步函数，那么在同步操作修改promise状态后直接执行回调函数内部的代码

12.async函数

• 1.使用async函数返回一个Promise对象
• 2.如果内部代码返回值是一个非Promise类型的数据则,返回的Promise状态为成功
• 3.如果返回一个Promise 对象，则这个对象决定最终的Promise对象
• 4.throw 抛出异常，则最终返回的Promise是失败的结果为抛出值

13.await 表达式

• await 右侧的表达式一般为promise对象，但也可以是其他的类型值
• 如果表达式是promise对象，await返回的是promise成功的值
• 如果表达式是其他值，直接将此值作为await的返回值
• await必须写在async函数中,但async函数中可以没有await
• 如果await的右侧返回的promise失败了，就会抛出异常，需要通过try…catch捕获处理

14.封装Promise类

class Promise {
    //构造方法
    constructor(executor) {
        let self = this;
        // console.log('1',this) //这里的this指向的是构造函数Promise
        //添加属性
        self.PromiseState = 'pending';
        self.PromiseResult = null;
        //声明属性
        self.callbacks = []
        //声明resolve函数
        function resolve(data) {
            if (self.PromiseState !== 'pending') return
            //1.修改对象的状态 PromiseState
            self.PromiseState = 'fulfilled';//resolved或者这个
            //2.修改对象的结果 PromiseResult
            self.PromiseResult = data;
            //调用成功的回调函数,解决链式操作回调
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onResolved(data)
                })
            })

        }
        //声明reject函数
        function reject(data) {
            if (self.PromiseState !== 'pending') return
            self.PromiseState = 'rejected'
            self.PromiseResult = data;
            //调用失败的回调函数
            setTimeout(() => {
                self.callbacks.forEach(item => {
                    item.onRejected(data)
                })
            })
        }
        try {
            //[同步调用]执行器函数
            executor(resolve, reject)
        } catch (e) {
            reject(e)
        }
    }
    //then方法封装
    then(onResolved, onRejected) {
        let _self = this;
        //判断回调函数参数
        if (typeof onRejected !== 'function') {
            onRejected = reason => {
                throw reason
            }
        }
        if (typeof onResolved !== 'function') {
            onResolved = value => {
                return value
            }
        }
        return new Promise((resolve, reject) => {
            //封装函数
            function callback(type) {
                try {
                    let result = type(_self.PromiseResult)
                    if (result instanceof Promise) {
                        result.then(v => {
                            resolve(v);
                        }, r => {
                            reject(r);
                        })
                    } else {
                        resolve(result)
                    }
                } catch (e) {
                    reject(e)
                }
            }
            //调用回调函数 需要根据PromiseState
            if (this.PromiseState === 'fulfilled') {
                setTimeout(() => {
                    callback(onResolved)
                })
            }
            if (this.PromiseState === 'rejected') {
                setTimeout(() => {
                    callback(onRejected)
                })
            }
            if (this.PromiseState === 'pending') {
                //保存回调函数
                this.callbacks.push({
                    onResolved: function () {
                        callback(onResolved)
                    },
                    onRejected: function () {
                        callback(onRejected)
                    }
                })
            }
        })
    }
    //catch方法
    catch(onRejected) {
        return this.then(undefined, onRejected)
    }
    //添加静态 resolve方法
    static resolve(value) {
        return new Promise((resolve, reject) => {
            if (value instanceof Promise) {
                value.then(v => {
                    resolve(v)
                }, r => {
                    reject(r)
                })
            } else {
                resolve(value)
            }
        })
    }
    //添加静态 reject方法
    static reject(reason) {
        return new Promise((resolve, reject) => {
            reject(reason)
        })
    }
    //添加静态 all方法
    static all(promises) {
        return new Promise((resolve, reject) => {
            let count = 0
            let arr = []
            //遍历入参，入参是一个Promise组成的数组
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    //得知这个对象的状态是成功的
                    //每个promise对象都成功
                    count++;
                    arr[i] = v;
                    if (count === promises.length) {
                        //修改状态
                        resolve(arr)
                    }
                }, r => {
                    reject(r)
                })
            }
        })
    }
    //添加静态 race方法
    static race(promises) {
        return new Promise((resolve, reject) => {
            for (let i = 0; i < promises.length; i++) {
                promises[i].then(v => {
                    resolve(v);
                }, r => {
                    reject(r)
                })
            }
        })
    }
}