微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

async-await原理讲解

1、原理1
async函数返回一个 Promise 对象,可以使用then方法添加回调函数。例:

 

 那既然async返回的是Promise对象,那么async后面的函数可以接.then()或者.catch()...嘛?我们试一试就知道了。

 

 上面代码说明,async函数内部return语句返回的值,会成为then方法回调函数的参数

2、原理2

当async函数内部抛出错误的时候,会导致返回的 Promise 对象变为reject状态。抛出的错误对象会被.then()方法的第二个回调函数接收或者.catch()方法回调函数接收到。

 

 

3、原理3

await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值代码说明:

 

 

4、原理4

await的使用,必须要有async,async返回的是一个Promise对象,await等待的就是这个Promise对象,所以await不能没有async(但是async可以没有await)。如果await没有async会报错:

 

 

二、深入Async-await规则
1、async封装Promise

 

 2、await相当于then

 

 3、多个await时,按时序执行

函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。任何一个await语句后面的 Promise 对象变为reject状态,那么整个async函数都会中断执行

 

 4、try…catch相当于catch

如果希望即使前一个异步操作失败,也不要中断后面的异步操作。可将第一个await放在try...catch结构里面,这样不管这个异步操作是否成功,第二个await都会执行。

 

 当await后面是Promise对象的时候,我们也可直接在await后面直接.catch捕获错误

三、解析Async-await语法

我们浅浅看一个面试题:

我们必须知道:

(1)await不能单独出现,其函数前面一定要有async。

(2)await会干两件事:

第一,将写在await后面的代码放到async创建的那个Promise里面执行。

第二、将写在await下面的代码放到前一个创建的那个Promise对象的.then里面执行。

(3)await返回的也是Promise对象,他只是把await下面的代码放到了await返回的promise的.then里面执行。

翻译如下:

四、拓展Async-await应用

1、场景1

通过以上Promise方法,可以明显解决回调地狱“向右移”的浮夸表现,但是,Promise是基于 then, catch 的链式调用,但也是基于回调函数。.then链多多少少还是违背原生代码,async-await更加贴近于原生代码

 

 async / await 和 Promise 并不互斥,二者相辅相成。同时async / await 并不能改变异步的本质( js是单线程的,异步需要回调,都是要基于 event loop 来实现

总结

async-await是promise的语法糖,不仅让我们书写代码时更加流畅,而且增强了代码的可读性。特别注意的是:虽然async-await 是建立在 Promise机制之上的,但是并不能取代其地位,他们两者相辅相成,息息相关。



版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐