ES6新增语法—Async...Await详解

[[418157]]

 什么是async

async的意思是“异步”，顾名思义就是有关异步操作的关键字，async 是 ES7 才有的，与我们之前说的Promise、Generator有很大的关联。

成都创新互联公司是一家专业提供东昌府企业网站建设,专注与成都网站设计、做网站、HTML5建站、小程序制作等业务。10年已为东昌府众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

使用语法：

 
 
 
    
  
  
  
  1. async function name(param){ 
    2.   
  
  
  2.  
    3.   
  
  
  3. param //传递给函数的参数名称 
    4.   
  
  
  4.  
    5.   
  
  
  5. statements //函数体 
    6.   
  
  
  6.  
    7.   
  
  
  7. } 
    8.   
  
  
  8.  
    9.   
  
  
  9. name().then(function(res){ 
    10.   
  
  
  10.  
    11.   
  
  
  11. res//异步操作返回的结果 
    12.   
  
  
  12.  
    13.   
  
  
  13. }) 
    14.

async 函数返回一个Promise对象，可以使用then方法添加回调函数。具体实例如下：

 
 
 
    
  
  
  
  1. async function show(){ 
    2.   
  
  
  2.  return {a:12,b:15} 
    3.   
  
  
  3. } 
    4.   
  
  
  4. console.log(show())//Promise {: {…}} 
    5.   
  
  
  5. show().then(res=>{ 
    6.   
  
  
  6.  console.log("res",res) 
    7.   
  
  
  7. }) 
    8.

什么是await

await关键字存在async函数表达式中，用于等待Promise对象，暂停执行，等到异步操作完成后，恢复async函数的执行并返回解析值。如果把await放在asnyc函数体外，会报语法错误。

使用语法：

 
 
 
    
  
  
  
  1. asnyc function name(){ 
    2.   
  
  
  2.  
    3.   
  
  
  3. returnValue = await expression; 
    4.   
  
  
  4.  
    5.   
  
  
  5. } 
    6.

expression 是一个Promise对象或一个需要等待的值，针对所跟不同表达式，有两种处理方式：

对于Promise对象，await会阻塞主函数执行，等待Promise对象执行resolve之后，resolve返回值作为await表达式运算结果，然后继续向下执行。

对于非Promise对象，可以是字符串、布尔值、数值以及普通函数等。await直接返回对应的值，而不是等待其执行结果。

await等待Promise对象实例如下：

 
 
 
    
  
  
  
  1. async function test1(){ 
    2.   
  
  
  2.  console.log("执行") 
    3.   
  
  
  3.  return new Promise((resolve,reject)=>{ 
    4.   
  
  
  4.   setTimeout(()=>{ 
    5.   
  
  
  5.    console.log("延迟3秒之后返回成功") 
    6.   
  
  
  6.    resolve({a:'1'}) 
    7.   
  
  
  7.   },3000) 
    8.   
  
  
  8.  })   
    9.   
  
  
  9. } 
    10.   
  
  
  10. async function test2(){ 
    11.   
  
  
  11.  let x = await test1() 
    12.   
  
  
  12.  console.log("x",x)//{a: "1"} 
    13.   
  
  
  13.  return x 
    14.   
  
  
  14. } 
    15.   
  
  
  15. test2().then(function(res){ 
    16.   
  
  
  16.   console.log("res",res)//{a: "1"} 
    17.   
  
  
  17. }) 
    18.

await 跟 普通函数 实例如下：

 
 
 
    
  
  
  
  1. function test3(){ 
    2.   
  
  
  2.  console.log("普通函数") 
    3.   
  
  
  3. } 
    4.   
  
  
  4. async function test4(){ 
    5.   
  
  
  5.  await test3() 
    6.   
  
  
  6.  console.log("直接执行") 
    7.   
  
  
  7. } 
    8.   
  
  
  8. test4() 
    9.

捕获异常

上述的await后跟Promise对象，我们知道Promise有两种状态，resolved() 和 rejected() ，如果Promise对象变为rejected,会如何处理?

 
 
 
    
  
  
  
  1. function testAwait(){ 
    2.   
  
  
  2.  return Promise.reject("error"); 
    3.   
  
  
  3. } 
    4.   
  
  
  4. async function test1(){ 
    5.   
  
  
  5.  await testAwait(); 
    6.   
  
  
  6.  console.log("test1");//没有打印 
    7.   
  
  
  7. } 
    8.   
  
  
  8. test1().then(v=>{ 
    9.   
  
  
  9.  console.log(v); 
    10.   
  
  
  10. }).catch(e=>{ 
    11.   
  
  
  11.  console.log(e);//"error" 
    12.   
  
  
  12. }) 
    13.

从上实例执行结果发现，返回的reject状态被外层的catch捕获，然后终止了后面的执行。但是在有些情况下，即使出错了我们还是继续执行，而不是中断，此时我们借助try...catch捕获内部异常。

 
 
 
    
  
  
  
  1. function test1(){ 
    2.   
  
  
  2.  return new Promise((resolve,reject)=>{ 
    3.   
  
  
  3.  reject("error") 
    4.   
  
  
  4.  }) 
    5.   
  
  
  5. } 
    6.   
  
  
  6. async function test2(){ 
    7.   
  
  
  7.  try{ 
    8.   
  
  
  8.   await test1() 
    9.   
  
  
  9.  }catch(e){ 
    10.   
  
  
  10.   console.log("报错",e) 
    11.   
  
  
  11.  } 
    12.   
  
  
  12. } 
    13.   
  
  
  13. test2().then((res)=>{ 
    14.   
  
  
  14.  console.log("执行成功",res) // 打印：执行成功undefined 
    15.   
  
  
  15. }).catch(err=>{ 
    16.   
  
  
  16.  console.log('err',err) 
    17.   
  
  
  17. }) 
    18.

Generator与async对比：

  • async利用await阻塞原理，代替了Generator的 yield 。
  • async 相比Generator 不需要 run 流程函数，完美地实现了异步流程。

从 Promise 到 Generator , 再到 async ,对于异步编程的解决方案越来越完美，这就是ES6不断发展的魅力所在。

 

文章标题：ES6新增语法—Async...Await详解
当前地址：http://www.shufengxianlan.com/qtweb/news45/529445.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

面包屑导航知识

分类信息网

眉山做网站　　 　seo网络营销推广　　 　成都联通服务器托管　　 　吉安网站建设　　 　丹棱网站建设　　 　东电技服　　 　手机网站建设　　 　公司宣传册设计　　 　美美搬家　　 　服务器租用　　 　德信企业管理　　 　成都广告设计公司　　 　成都网络营销　　 　成都网站推广　　 　成都网站建设　　 　温江网站制作　　 　物流公司网站建设方案　　 　成都电商网站建设方案　　 　卖链接　　 　成都服务器托管