Promise

一、什么是Promise

简单的来说就是异步变成的一种解决方案，也可以理解成一个容器，里面存放着异步操作的结果。

1.1、promise特点

• 对象的状态不受外界影响。promsie对象有三种状态： pending(进行中)， fulfilled（已成功）和rejected(已失败)。只有异步操作的结果可以决定当前的状态，不受任何其他因素的影响。
  • pending:等待状态，比如正在进行网络请求时，或者定时器没有到时间。
  • fulfill：满足状态，当我们主动回调resolve时，就处于该状态，并且会回调.then()。
  • reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并回调.catch()。
• 一旦改变状态，就不会再变。 promise的状态改变，只有两种可能： pending => fulfilled和pending => rejected.只有命中其中一种，那么状态就被凝固了。与事件不同的是： 状态改变了，再对promise对象添加回调函数也是会得到这个凝固的值。
• 避免回调地狱(嵌套函数)，代码更加优雅；利用promise可以实现链式调用，就可以将异步操作以同步操作的流程表达出，避免回调地狱的产生，并且promise对象也提供统一的接口，可以更加容易的操作异步操作。

1.2、promise的缺点

• 无法取消promsie,因为promsie一旦new出来就是会立即执行的，无法中途取消。
• 不设置回调函数，无法捕获到promise内部抛出的错误。
• 处于pending阶段的时候，无法得知当前进行的阶段（刚刚开始还是即将完成）

二、Promise的基本使用

本文都采用setTimeout()函数来表示异步操作

2.1、最基本使用

            //参数 => 函数（resolve，reject）
            //resolve、reject本身也是函数
            //链式编程  
            //什么情况下会用到Promise？
            //一般情况下是有异步操作时，使用Pronmise对这个异步操作进行封装
            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve(aa)//这里可以带参数，意成功之后调用
                    reject(err)//带参，失败后调用----
                })
            }).then((aa => {
                //这里是成功之后的处理
            }).catch((err) => {
                //这里是失败之后的处理
            })

场景：根据请求一的结果来进行过请求二，然后根据请求二的结果来完成请求三的数据处理。

            new Promise((resolve,reject) => {
                //1、第一次的异步操作
                setTimeout(() => {
                    resolve(data)
                },1000)
            }).then(data => {
                //1、第一次的结果处理
                console.log('1');
                return new Promise((resolve,reject) => {
                    //2、第二次的异步操作
                    setTimeout(() => {
                        resolve()
                    },1000)
                })
            }).then(() => {
                //2、第二次的结果处理
                console.log(2);
                return new Promise((resolve,reject) => {
                    //3、第三次的异步操作
                    setTimeout(() => {
                        resolve()
                    },1000)
                })
            }).then(() => {
                //3、第三次的结果处理
                console.log('3');
            })

2.2、Promise简写

• 1、没有异步处理只有结果运算时，可以不传reject

            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res => {
                console.log(res);
                //没有异步处理，只有结果运算的，可以不传reject（可选）
                return new Promise(resolve => {
                    resolve('111' + res)
                })
            }).then(res => {
                console.log(res);
            })

• 2、对上面代码中return中resolve的简写

            //resolve简写
            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res => {
                console.log(res);
                //没有异步处理，只有结果运算的，可以不传reject（可选）
                return new Promise.resolve('111' + res)
            }).then(res => {
                console.log(res);
            })

• 3、还可继续简写成:省略掉了Promise.resolve，直接return

            new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res => {
                console.log(res);
                //没有异步处理，只有结果运算的，可以不传reject（可选）
                return '111' + res
            }).then(res => {
                console.log(res);
            })

2.3、也可通过throw来抛出异常

new Promise((resolve,reject) => {
                setTimeout(() => {
                    resolve('aaa')
                },1000)
            }).then(res => {
                console.log(res);
                //没有异步处理，只有结果运算的，可以不传reject（可选）
                // return Promise.reject('err')
                throw 'err'
            }).catch(err => {
                console.log(err);
            })

三、all方法的使用

场景：根据请求一二的结果来处理后续的事情

Promise.all([
                new Promise((resolve,reject) => {
                    //第一次网络请求
                    setTimeout(() => {
                        resolve('aaa')//第一次请求成功
                    })
                }),
                new Promise((resolve,reject) => {
                    //第二次网络请求
                    setTimeout(() => {
                        resolve('bbb')//第二次请求成功
                    })
                })
            ]).then(results => {//这里的results为一个数组，里面存放的就是，上面数组对应网络请求的结果
                console.log(results);
            })