发帖  主题  评论  推荐  标签 用户 查搜   用户 密码 自动 注册  
 
面向对象 设计模式 领域驱动设计 企业架构 框架 开发教程 微服务 CQRS 扩展性 并发编程 事件溯源 分布式 SOA

Javascript/ES6 Promise用法

  Javascript Promise代表一个操作的结果还没有完成,将在未来某个时间有确定结果,比如网络请求操作,当我们从某个数据源抓取数据时,实际上没有办法绝对地知道什么时候能够接受到响应。

如果我们的一些操作依赖这个网络请求操作就会有问题,在没有Promise的情况下,我们得使用callback来处理响应完成时的动作,如果只有一个异步动作这也许没有问题,但是如果有多个异步动作,回调变得无法管理导致著名的回调陷阱。

doSomething(function(responseOne )  {  
     doSomethingElse(responseOne ,  function(responseTwo , err )  { 
         if  (err )  {  handleError(err );  } 
         doMoreStuff(responseTwo ,  function(responseThree , err )  { 
             if  (err )  {  handleAnotherError(err );  } 
             doFinalThing(responseThree ,  function(err )  { 
                 if  (err )  {  handleAnotherError(err );  } 
                 // Complete 
             });  // end doFinalThing 
         });  // end doMoreStuff 
     });  // end doSomethingElse 
});  // end doSomething 

 

Promise提供标准的干净的按照顺序发生的任务:

doSomething()  
.then(doSomethingElse ) 
.catch(handleError ) 
.then(doMoreStuff ) 
.then(doFinalThing ) 
.catch(handleAnotherError ) 

 

创建Promise

一个Promise使用Promise构造器创建,这个函数接受两个参数resolve和reject:

var promise  =  new  Promise(  function(resolve , reject )  {  /* Promise content */  }  )   

 

Javascript Promise

 

在这个函数中,我们能够执行我们想要的异步任务,然后需要标记Promise状态,当标记promise为fulfilled时,我们需要调用resolve(),可选情况下可传递我们希望返回的一个值;如果失败,需要标记promise为rejected,调用reject();可选情况下可传递一个错误信息,在这个promise真正完成fulfilled或被拒绝rejected之前,它的状态是一个待定状态。

下面是XMLHttpRequest的promise版本:

function  get(url )  {  
   return  new  Promise(function(resolve , reject )  { 
      var req  =  new  XMLHttpRequest(); 
   req .open('GET', url ); 
     req .onload  =  function()  { 
       if  (req .status  ==  200)  { 
           resolve(req .response );  /* PROMISE RESOLVED */ 
       }  else  { 
           reject(Error(req .statusText ));  /* PROMISE REJECTED */ 
       } 
     }; 
 
    req .onerror  =  function()  {  reject(Error("Network Error"));  }; 
    req .send(); 
   }); 
} 

 

使用Promise

一旦我们创建Promise,我们需要实际使用它,可以像普通函数调用,但是有些不同,需要访问其.then()方法。.then()方法接受两个可选参数,首先,如果promise被实现fulfilled第一个函数被调用,如果promise被拒绝第二个函数被调用:

get(url )  
.then(function(response )  { 
     /* successFunction */ 
},  function(err )  { 
     /* errorFunction */ 
}) 

 

处理错误

上面代码我们是将错误与成功放在同一个函数中,为了具有可读性,我们将成功和错误放在各种独立的两个.then()中。

get(url )  
.then(function(response )  { 
     /* successFunction */ 
}, undefined ) 
.then(undefined ,  function(err )  { 
     /* errorFunction */ 
}) 

 

为了了处理错误,我们可以使用.catch()方法,它是.then(undefined, errorFunction)的另外一种速记写法:

get(url )  
.then(function(response )  { 
     /* successFunction */ 
}) 
.catch(function(err )  { 
     /* errorFunction */ 
}) 

 

链式chaining

当有多个异步函数时我们需要按顺序执行,可以将多个.then()像链条一样串联起来,创建一个异步函数序列。

get(url )  
.then(function(response )  { 
    response  = JSON .parse(response ); 
     var secondURL  = response .data .url
     return  get( secondURL  );  /* Return another Promise */ 
}) 
.then(function(response )  { 
    response  = JSON .parse(response ); 
     var thirdURL  = response .data .url
     return  get( thirdURL  );  /* Return another Promise */ 
}) 
.catch(function(err )  { 
     handleError(err ); 
}); 

 

如果Promise链条中一个环节完成了,会按序列移动到下一个链条,如果有一个环节失败rejected,会直接跳到下一个错误函数.catch()。

 

并行执行Promise

如果能够并行执行这些链条上异步任务将会提高性能,现在我们需要两个方法来完成:Array.map()方法允许我们逐个执行数组中的动作,然后创建这些动作完成后的结果数组。

Promise.all()方法返回一个成功完成每个promise数组,如果任何这个数组中任何一个promise被拒绝也就是失败,Promise.all()会也拒绝或失败。

var arrayOfURLs  =  ['one.json',  'two.json',  'three.json',  'four.json'];  
var arrayOfPromises  = arrayOfURLs .map(get); 
 
Promise .all(arrayOfPromises )  
.then(function(arrayOfResults )  { 
     /* Do something when all Promises are resolved */ 
}) 
.catch(function(err )  { 
     /* Handle error is any of Promises fails */ 
}) 

 

并行Promise

 

通过开发工具我们会看到所有抓取请求是并行的:

 

Javascript/ES6主题

 

 

解道移动版 | 关注解道 | 联系解道 | 关于解道 | 广告联系 | 网站地图 | 设为首页

沪ICP证12033263 如有意见请与我们联系 Powered by JdonFramework
返回顶部