ES6-Promise 对象

更多参考:http://es6.ruanyifeng.com/#docs/promise


1、Promise是什么,一个类、一个对象、一个数组还是一个函数?  还有大家最关注的then用法

直接打印出来看看,console.dir(Promise)

这么一看就明白了,Promise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法,对的没毛病

2、那就创建一个Promise 对象来试试

var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
                console.log('执行完成');
                resolve('随便什么数据');
        }, 2000);
});

a) Promise的构造函数接收一个参数,是函数,并且传入两个参数:resolve,reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。其实这里用“成功”和“失败”来描述并不准确,按照标准来讲,resolve是将Promise的状态置为fullfiled,reject是将Promise的状态置为rejected。不过在我们开始阶段可以先这么理解,后面再细究概念。

b) 这是需要注意的一个细节,执行代码时发现,我们只能new Promise 但是2秒后输出了'执行完成' 这说明,Promise在实例化的时候,已经默认执行函数了,所有一般使用时都包在另外一个函数中,根据具体条件进行调用

function runAsync(){
        var p = new Promise(function(resolve, reject){
                          //做一些异步操作
                          setTimeout(function(){
                                  console.log('执行完成');
                                  resolve('数据传递');
                           }, 2000);
                    });
         return p; 
}
runAsync();

       那么问题来了

                 a)  包装这么一个函数有啥用?

  b).resolve('数据传递')有什么用?

继续往下看

我们通过console.log输出Promise对象的时候,在它的prototype上有catch、then函数,那在我们包装好的函数最后,return出Promise对象的原型上就存在这两个函数,then我们都知道其英文含义为“然后” 那么我们就写一个例子来试试其中的then是不是在Promise的用法中起到“然后”的递进作用。

function runAsync(){

        console.log('进入函数');

        var p = new Promise(function(resolve, reject){

                 console.log('执行promise参数函数');

                 setTimeout(function(){
                          console.log('异步计时器执行完成');
                          resolve('遇到我当然函数就要跳出了');
                          console.log('看看是不是执行完了,输出了说明resolve执行但不跳出');
                 }, 2000);

          });
         return p; 
}

runAsync().then(function(data){

          console.log("然后我们执行了,看看data传过来是什么:" + data);

});

console.log("1、等我们同步代码执行完成后,在执行then函数吧" );
console.log("2、等我们同步代码执行完成后,在执行then函数吧" );
console.log("3、等我们同步代码执行完成后,在执行then函数吧" );
console.log("4、等我们同步代码执行完成后,在执行then函数吧" );
console.log("5、等我们同步代码执行完成后,在执行then函数吧" );
console.log("6、等我们同步代码执行完成后,在执行then函数吧" );
console.log("7、等我们同步代码执行完成后,在执行then函数吧" );
console.log("8、等我们同步代码执行完成后,在执行then函数吧" );

由上面的例子看出,调用resolve或reject并不会终结 Promise 的参数函数的执行。并且是所有同步代码都执行完成后才执行then函数的参数函数


function runAsync(){
    console.log('进入函数');
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            resolve('我是promise参数函数传过来的数据');
        }, 2000);
    });
    return p; 
}
runAsync().then(function(data){
    console.log(data);
 return "我是第一个then的return数据";
}).then(function(data){
 console.log(data);
 return "我是第二个then异步处理3秒后return的数据";
}).then(function(data){
 console.log(data);
 var p = new Promise(function(resolve, reject){
  var count = 5;
  var handle = setInterval(function(){
   if(count == 0 ){
    clearInterval(handle);
    resolve('我是第三个then中新创建的promise对象传回的数据');
   }else{
    console.log("计时开始:" + count);
   }
   count--;
  },1000);
    });
 return p
}).then(function(data){
 console.log(data);
 return "我是又等了5秒后的第4个then的返回数据";
}).then(function(data){
 console.log("作为第5个then也是最后一个执行的函数体,我接收到了来自上一个then的信息【"+ data +"】");
});


由上面的例子看出,promise对象原型上的then函数是在串行执行的,并只能通过return来向下传递数据,如果在任何一个then中需要异步操作需要重新new Promise对象 并且把这个对象当作当前then的返回数据,下一个then会等到这个新的Promise对象执行完成(resolve)或失败(reject)后在执行 


猜你喜欢

转载自blog.csdn.net/lovearforever/article/details/80813227