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

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

[[418157]]

 什么是async

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

使用语法:

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

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

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

什么是await

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

使用语法:

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

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

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

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

await等待Promise对象实例如下:

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

await 跟 普通函数 实例如下:

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

捕获异常

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

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

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

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

Generator与async对比:

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

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

 

责任编辑:姜华 来源: 今日头条
相关推荐

2021-08-16 07:05:58

ES6Promise开发语言

2021-07-30 07:10:07

ES6函数参数

2022-06-13 07:36:47

useEffectHooks

2021-07-16 07:26:48

ES6javascript开发语言

2021-08-02 05:51:29

foreachES6数组

2021-06-28 07:27:43

AwaitAsync语法

2021-06-15 05:36:45

Gulpawaitasync

2024-06-26 08:18:08

ES6模板字符串

2017-04-10 15:57:10

AsyncAwaitPromise

2022-01-26 07:18:57

ES6WeakSetMap

2022-11-21 09:01:00

Swift并发结构

2014-07-15 10:31:07

asyncawait

2016-11-22 11:08:34

asyncjavascript

2023-05-10 08:21:42

Es6Set

2021-04-25 13:18:51

Wine 6.7LinuxWindows

2021-07-20 10:26:12

JavaScriptasyncawait

2012-07-22 15:59:42

Silverlight

2023-10-08 10:21:11

JavaScriptAsync

2022-08-27 13:49:36

ES7promiseresolve

2023-07-28 07:31:52

JavaScriptasyncawait
点赞
收藏

51CTO技术栈公众号