ES6 Promise

在JavaScript的世界中,所有代码都是单线程执行的。

由于这个“缺陷”,导致JavaScript的所有网络操作,浏览器事件,都必须是异步执行。异步执行可以用回调函数实现:异步操作就是在将来的某个时间点触发一个函数调用。

Promise对象定义:

var promise = new Promise(function(resolve, reject){
   //执行代码
   business code...
   //结果处理代码,承诺在将来的某个时刻执行resolve或reject
   setTimeout(function(){
          if (condition) {
               resolve();   //承诺执行resolve
           }  else {
                reject();  //承诺执行reject
            });
}, 2000);

这种“承诺将来会执行”的对象在JavaScript中称为Promise对象。

Promise对象执行:
p.then(resolveFunc).catch(rejectFunc); // 执行后根据结果执行承诺的resolveFunc或rejectFunc。

以上使用感觉跟ajax没什么区别,但是Promise有比ajax更方便的地方,比如ajax的嵌套异步地狱写法可以用Promise简单的串行化写法实现:
如:

$.ajax({
        url:'url',
        type:'get',
        success:function(data){
            handle1(data);

            //嵌套ajax异步
            $.ajax({
                    url:'url',
                    type:'get',
                    success:function(data){
                        handle2(data);

                    },
                    error:function(reason){
                        errorFunc(reason);
                    }
            });
        },
        error:function(reason){
            errorFunc(reason);
        }
});

这样嵌套两层代码就显得难以阅读了,Promise在实现同样的逻辑下代码更显简洁易读,上面ajax嵌套异步可以描述为:有若干个异步任务,需要先做任务1,如果成功后再做任务2,任何任务失败则不再继续并执行错误处理函数。
替换ajax嵌套异步的Promise写法:

var p = new Promise(function(resolve, reject){
             $.ajax({
                        url:'url',
                        type:'get',
                        success:function(data){
                            handle1(data);
                            resolve();    //承诺执行resolve
                        },
                        error: reject() //承诺执行reject
                });
});

function job2() {
             $.ajax({
                        url:'url',
                        type:'get',
                        success:function(data){
                            handle2(data);
                            resolve();      //承诺执行resolve
                        },
                        error: reject()     //承诺执行reject
                });
            };

p.then(job2).catch(rejectFunc);

 function job3() {
             $.ajax({
                        url:'url',
                        type:'get',
                        success:function(data){
                            handle3(data);   
                            resolve();      //承诺执行resolve
                        },
                        error: reject()     //承诺执行reject
                });
            };

p.then(job2).then(job3).catch(rejectFunc);

总结:创建Promise对象时,其匿名函数的参数resolve,reject函数其实就是Promise对象承诺会执行的对象,这些对象可以灵活的通过.then()和.catch()方式传入,因为有了这样的承诺,Promise才可以用链式写法串起来执行。
当然,Promise还有并行执行异步任务Promise.all()方法和容错执行Promise.race()方法,具体参考廖雪峰的官方网站javascript教程。

可运行测试代码:


function handleResponse(response){
      console.log(response);
    }

function reject() {
    console.log('error');
}





var ppp = new Promise(function(resolve, reject){
     $.ajax({
            url:"https://api.douban.com/v2/book/search?q=javascript&count=1",
            type:'get',
            dataType : "jsonp", 
            jsonp : 'callback',
            jsonpCallback: 'handleResponse', 
            success:function(data){
                //这里因为跨域所以由handleResponse处理data
                console.log('job1 finish');  
                resolve();    //承诺执行resolve
            },
            error: reject    //承诺执行resolve
        });
});



function job2() {
         $.ajax({
                url:"https://api.douban.com/v2/book/search?q=javascript&count=1",
                type:'get',
                dataType : "jsonp", 
                jsonp : 'callback', 
                jsonpCallback: 'handleResponse', 
                success:function(data){
                    //这里因为跨域所以由handleResponse处理data
                    console.log('job2 finish');    
                      //无后续任务的话,不需要承诺执行resolve
                },
                error: reject //承诺执行resolve
            });
        };


ppp.then(job2).catch(reject);   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值