ES6 Promise 详解

Posted 2021-11-22 gaosirs

一、概念

　　Promise，从语法上来讲，它是一个对象，是一个构造函数，可以获取 异步操作 的信息。

　　简单来讲，就是用同步的方式写异步代码，用来解决回调问题。

 

二、特点

　　Promise 对象有两个特点：

　　1、对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：

　　　　（1）、pending： 初始值

　　　　（2）、fulfilled：  操作成功

　　　　（3）、rejected： 操作失败

　　　只有异步操作的结果可以决定当前是哪一个状态，任何其他状态都无法改变这个状态。

 

　　2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。

　　　　Promise对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和 从 Pending 变为 Rejected 。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。

 

　　注：Promise 一旦新建就会「立即执行」，无法取消（new Promise() 里的函数会自动运行）。

 

三、Promise 方法

　　Promise 除了拥有自身的 all、race、resolve、reject 等方法外，在原型上还拥有 then、catch 方法。

　　看下列代码：

function promiseBegin(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log(‘代码执行完成‘);
            resolve(‘回调数据‘);
　　　　　　　reject(‘失败回调数据‘);
        }, 2000);
    });
    return p;            
}

promiseBegin();

　　当执行 promiseBegin 函数时，会得到一个 Promise 对象，在 Promise 的构造函数中，我们执行了一个setTimeout异步操作，2秒后，输出“代码执行完成”，并且调用resolve方法。

　　

　　then() 方法

　　　then() 方法有两个参数，一个是成功 resolve 调用的方法，一个是失败 reject 调用的方法。

promiseBegin().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
},function(err) {
    console.log(err);
});

 

　　 catch() 方法

　　　　catch() 方法用于指定发生错误时的回调函数。

promiseBegin().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
}).catch(function(err){
    // 处理失败的操作
    console.log(err)
});

　　　　在执行resolve的回调（也就是上面then中的第一个参数）时，如果抛出异常了（代码出错了），那么并不会报错卡死js，而是会进到这个catch方法中。

　　　　一般来说，不要在 then() 方法里面定义 Reject 状态的回调函数（即 then() 的第二个参数），总是使用 catch 方法。

 

　　链式调用

　　 我们们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。

//买笔
        function buy(){
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了笔芯");
                    resolve("数学作业");
                },1000);
            });
            return p;
        }
        //写作业
        function work(data){
            console.log("开始写作业："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        function out(data){
            console.log("开始上交："+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("上交完毕");
                    resolve("得分：A");
                },1000);
            });
            return p;
        }
        /* 不建议使用这种方式
        buy().then(function(data){
            return work(data);
        }).then(function(data){
            return out(data);
        }).then(function(data){
            console.log(data);
        });*/

        //推荐这种简化的写法
        buy().then(work).then(out).then(function(data){
            console.log(data);
        });

 

　　all() 方法

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

//买作业本
        function cutUp(){
            console.log(‘挑作业本‘);
            var p = new Promise(function(resolve, reject){ //做一些异步操作
                setTimeout(function(){
                    console.log(‘挑好购买作业本‘);
                    resolve(‘新的作业本‘);
                }, 1000);
            });
            return p;
        }
         
        //买笔
        function boil(){
            console.log(‘挑笔芯‘);
            var p = new Promise(function(resolve, reject){ //做一些异步操作
                setTimeout(function(){
                    console.log(‘挑好购买笔芯‘);
                    resolve(‘新的笔芯‘);
                }, 1000);
            });
            return p;
        }

        Promise.all([cutUp(),boil()]).then(function(results){
            console.log("写作业的工具都买好了");
            console.log(results); // ["新的作业本", "新的笔芯"]
        });
　　
　　　　　

　　

　　使用场景：预加载图片资源　　　　

 

　　race() 方法

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

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

 Promise.race([cutUp(), boil()]).then(function(results){
       console.log("哈哈，我先买好啦");
       console.log(results);
});

　　　　　　

 

　　使用场景：图片请求超时

function requestImg(){
       var p = new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function(){
               resolve(img);
            }
            img.src = ‘xxxxxx‘;
            });
            return p;
        }
         
        //延时函数，用于给请求计时
        function timeout(){
            var p = new Promise(function(resolve, reject){
                setTimeout(function(){
                    reject(‘图片请求超时‘);
                }, 5000);
            });
            return p;
        }
         
        Promise.race([requestImg(), timeout()]).then(function(results){
            console.log(results);
        }).catch(function(reason){
            console.log(reason);
        });
        //上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
        //如果 5 秒内图片请求成功那么便进入 then 方法，执行正常的流程。
        //如果 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。

　　

 

 

随笔整理自  

　　http://es6.ruanyifeng.com/#docs/promise

　　https://www.cnblogs.com/ainyi/p/8665272.html

感谢博主分享！