ES6新增语法async...await

Dear 丶 2022-08-31 07:27 213阅读 0赞

![04851fb7dbbdb4a4542f489090e9e205.png][]

##     ##

## **什么是async** ##

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

使用语法：

async function name(param){  param //传递给函数的参数名称  statements //函数体}name().then(function(res){  res//异步操作返回的结果})

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

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

## **什么是await** ##

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

使用语法：

asnyc function name(){  returnValue = await expression;}

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

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

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

await等待Promise对象实例如下：

async function test1(){ console.log("执行") return new Promise((resolve,reject)=>{  setTimeout(()=>{   console.log("延迟3秒之后返回成功")   resolve({a:'1'})  },3000) })  }async function test2(){ let x = await test1() console.log("x",x)//{a: "1"} return x}test2().then(function(res){  console.log("res",res)//{a: "1"}})

await 跟 普通函数 实例如下：

function test3(){ console.log("普通函数")}async function test4(){ await test3() console.log("直接执行")}test4()

## **捕获异常** ##

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

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

function test1(){ return new Promise((resolve,reject)=>{ reject("error") })}async function test2(){ try{  await test1() }catch(e){  console.log("报错",e) }}test2().then((res)=>{ console.log("执行成功",res) // 打印：执行成功undefined}).catch(err=>{ console.log('err',err)})

Generator与async对比：

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

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

感谢你的阅读！

#  #

**学习更多技能**

**请点击下方公众号**

![3805d2457eaf07c99f132bb229534690.gif][]

![6784748dd51e945b7f1954a8b477f9cc.png][]

![e22fd4a3bc72389321b09b6daee89f16.png][]

[04851fb7dbbdb4a4542f489090e9e205.png]: /images/20220829/115658f31dd54cd5b97810e4f8f5790c.png
[3805d2457eaf07c99f132bb229534690.gif]: /images/20220829/bc02908e7dac4cbab271e919d75a9b5b.png
[6784748dd51e945b7f1954a8b477f9cc.png]: /images/20220829/5138b1cad5d047b9b91d9b6cb4773a7b.png
[e22fd4a3bc72389321b09b6daee89f16.png]: /images/20220829/28ad6f36c81d48b19d9fd1be2963d2b8.png