复习下Promise持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情一、

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

一、前言

最开始还没学JavaScript这门语言的时候，我还是听一首歌叫promise,是承诺的意思,才对这个单词印象深刻。一直单曲循环，后面学习了Js之后也对promise尤其深刻,今天就简单复习一下。

二、Promise的理解

ES6推出的新的更好的异步编程解决方案(相对于纯回调的方式)，可以异步操作启动后或完成后, 再指定回调函数得到异步结果数据，解决嵌套回调的回调地狱问题 ---promise链式调用

1. Promise对象有3种状态

pending
- 当promise没有返回成功或失败的时候，promise将一直都是pending状态（正在进行中），pending状态的promise不会继续向下执行
resolved/fulfilled
- 成功状态，当在promise中调用了resolve函数，则promise就会返回成功状态，代表当前代码执行成功
rejected
- 失败状态，当promise中调用了reject函数，则返回失败状态的promise，一般异步执行失败的时候使用 注意:当Promise实例化内部抛出错误的时候，代码停止运行，可能不会执行resolve或reject,promise的返回值就仍然是pending

2. Promise状态的2种变化

pending --> resolved
pending --> rejected 注意: 变化是不可逆

3. PromiseResult的值

当状态是pending的时候，或者resolve和reject函数调用的时候，没有传递任何值，则promise的值一直是undefined
resolve和reject调用的时候传入的参数，则这个参数就是prmiseResult的值

4. 关于promise书写的执行顺序

    const p = new Promise((resolve, reject) => {
            //会把异步代码写入promise中 进行处理
            //promise中直接书写的语句都是同步的
            console.log("promise中的语句")
            //模拟请求a数据
            console.log("a数据开始请求")
            setTimeout(() => {
                console.log("a数据请求成功");
                //当reject和resolve一起书写的时候，则优先写在前边的
                const dataA = {
                    name: "luck"
                }
                resolve(dataA);
            }, 2000)
        });
        console.log(p);
        console.log("end")

打印结果

5. Promise的原型对象上有三个方法

then
- then 当promise对象返回一个成功状态，则会执行then方法
catch
- catch 当promise对象返回一个失败状态，则会执行catch方法
finally
- finally 无论promise但会的是成功还是失败，都会执行finally 注意: then catch函数的参数都是一个函数，函数的参数就是调用then的promise对象的promiseResult的值

6. 关于Promise原型对象上三个方法展开说说

then返回值
- then默认返回一个fulfilled成功状态的promise对象,值为undefined
- 当then的返回值不是一个promise对象的时候，then仍然是 fulfilled 状态，promiseResult的值就是then中return的值
- 当then返回的是一个promise对象的时候，则then的返回值就是这个promise对象
- 当then中出现了报错，则then直接返回一个失败的promise对象，并且promiseResult的值就是报错信息
catch
- 当成功的promise调用了catch，catch内部不会执行，而是直接返回原来的promise对象
- 其他情况下catch的返回值和then类似
finally
- 当无论成功或失败都要执行一个操作的时候，则需要使用finally，一般finally书写在最后
- 不接收参数一般不考虑返回值

通过代码验证一下

    const p1 = new Promise((resolve, reject) => {
            console.log("a start");
            setTimeout(() => {
                console.log("a end");
                reject("a is not ok~");
            }, 1000)
        })
        
         const p2 = p1.catch((data) => {
            console.log("catch的data:" + data);
            throw new Error("111")
        })

        p2.finally(() => {
            console.log("结束了~")
        })
        console.log(p2)

执行顺序如下

三、Promise.all()

语法: Promise.all([promise1, promise2, promise3])返回一个promise对象

1. 状态

当Promise.all中所有的promise对象的都是成功状态，则Promise.all返回值就是成功状态
当任意一个Promise.all中的promise对象返回的是失败，则Promise.all返回值就是失败状态

2. 返回值

当全部成功，则是所有promise对象值组成的数组
当失败，则是第一个失败promise对象的值

3. 通过一段代码验证

    const p1 = new Promise((resolve, reject) => {
            console.log("a Start");
            setTimeout(() => {
                console.log("a end");
                resolve({
                    name: "lucky"
                });
            }, 2000)
        })

        const p2 = new Promise((resolve, reject) => {
            console.log("b Start");
            setTimeout(() => {
                try {
                    console.log("b end")
                    throw new Error("no no no");
                    resolve({
                        age: "18"
                    });
                } catch (e) {
                    reject(e)
                }


            }, 1000)
        })

        const re = Promise.all([p1, p2]);
        console.log(re);
        re.then((data) => {
            console.log(data);
            const re = data.reduce((p, c) => {
                return Object.assign(p, c)
            }, {});
            console.log(re);
        }).catch((err) => {
            console.log(err)
        })

打印结果

总结:在p2抛出错误时候,则Promise.all返回值就是失败状态,且是第一个失败promise对象的值

好了，以上就是本篇文章的分享，感谢阅读！