【ES6】Promise深入了解

Promise 是异步编程的一种解决方案，主要作用是作为一个存储状态和结果的容器。

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

声明

let p = new Promise((resolve, reject) => {
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});

Promise状态的特点

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled/resolved（已成功）和 rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

promise的状态有两种改变方式：

    1，pending----->成功 调用resolve方法

    2，pending----->失败 调用reject方法

promise的状态一旦发生改变，不可在进行修改，代表状态凝固。

Promise方法

then() 方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。

         //买肉
        function chicken(){
            console.log("开始买肉");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了鸡肉");
                    resolve("购买鸡肉完成");
                },1000);
            });
            return p;
        }
        //买菜
        function cucumber(data){
            console.log("开始买菜："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买完黄瓜");
                    resolve("购买黄瓜完成");
                },1000);
            });
            return p;
        }

        function gethome(data){
            console.log("准备回家："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("抵达目的地");
                    resolve("开始做饭");
                },1000);
            });
            return p;
        }
        /* 不建议使用这种方式
        chicken().then(function(data){
            return cucumber(data);
        }).then(function(data){
            return gethome(data);
        }).then(function(data){
            console.log(data);
        });*/

        //推荐这种简化的写法
        chicken().then(cucumber).then(gethome).then(function(data){
            console.log(data);
        });

catch() ：指定发生错误时的回调函数,建议总是使用catch()方法，而不使用then()方法的第二个参数。

 let p = new Promise(function (resolve, reject) {
        setTimeout(() => {
            console.log('hello world');
            resolve();//修改成功状态
            reject();//修改为失败状态
        }, 1000)
});
        
// then方法会有个返回值，不写return 那么就默认为promise对象     
p.then(res => {
    console.log(res);  
}).catch(err => {      // 有多个then的时候，catch可以捕捉前面所有then的错误
    console.log(err);
})

//买肉
        function chicken(){
            console.log("开始买肉");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了鸡肉");
                    resolve("购买鸡肉完成");
                },1000);
            });
            return p;
        }
        //买菜
        function cucumber(data){
            console.log("开始买菜："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买完黄瓜");
                    resolve("购买黄瓜完成");
                },1000);
            });
            return p;
        }
        
        chicken().then(function(data){
            throw new Error("OMG！买了不新鲜的肉");
            cucumber(data);
        }).catch(function(data){
            console.log(data);
        });
        

Promise 的 all() 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

比如下面代码，两个个异步操作是并行执行的，等到它们都执行完后才会进到 then 里面。同时 all 会把所有异步操作的结果放进一个数组中传给 then。

//买肉
        function chicken(){
            console.log("开始买肉");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了鸡肉");
                    resolve("购买鸡肉完成");
                },1000);
            });
            return p;
        }
        //买菜
        function cucumber(data){
            console.log("开始买菜："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买完黄瓜");
                    resolve("购买黄瓜完成");
                },1000);
            });
            return p;
        }
        
        Promise.all([chicken(),cucumber()]).then(function(results){
            console.log("今日做饭所需菜品购买完成！");
            console.log(results);
        });

race() 的用法与 all() 一样，只不过 all() 是等所有异步操作都执行完毕后才执行 then 回调。而 race() 的话只要有一个异步操作执行完毕，就立刻执行 then 回调。

注意：其它没有执行完毕的异步操作仍然会继续执行，而不是停止.

//买肉
        function chicken(){
            console.log("开始买肉");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了鸡肉");
                    resolve("购买鸡肉完成");
                },1000);
            });
            return p;
        }
        //买菜
        function cucumber(data){
            console.log("开始买菜："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买完黄瓜");
                    resolve("购买黄瓜完成");
                },1000);
            });
            return p;
        }
        
        Promise.race([chicken(),cucumber()]).then(function(results){
            console.log("hh 我先买好啦！");
            console.log(results);
        });

参考文献

《ES6-ECMAScript6简介》

后记

以上就是本期 ES6 相关的内容，希望对小伙伴们更好的掌握这方面的知识点有些许帮助，不要忘了来个点赞哦 👍 ～～。有任何问题还望各位大佬批评指正，谢谢！后续持续更新。。。