如何理解:async/await 使异步操作同步化?

281 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情

1. 为什么要使异步操作同步化?

多个函数按顺序执行,结果却不是我们想要的,原因一般是由于异步操作引起的,所以我们需要一种方案来解决这个问题,从而使异步操作按照同步的方式进行,进而控制异步操作输出结果的顺序。

异步操作带来的问题:函数执行结果不按照顺序返回

image.png

结果:111  222  wait me 3000

你期望的:111  wait me 3000  222

执行顺序:fn1和setTimeOut都是异步执行的,fn1和fn2是同步执行的,所以会先执行fn1,再执行fn2,三秒后再执行setTimeout。

把setTimeout函数设置的等待时间设置为0,会不会结果就如我们所期望的那样?

image.png

结果上并没有变化,因为setTimeout异步函数会在执行之前去查看队列里是否有任务在排队,有的话就会等其他函数执行完再执行自己。

1. 外部函数如何获取异步函数里的值?****

先看一个例子

image.png

如何在fn1函数外部打印msg呢?

第一种:使用回调函数

image.png

第二种:使用Promise

image.png

第三种:async/await解决方案

async/await的作用就是使异步操作以同步的方式去执行,也就是异步操作同步化。

1.异步操作同步化

第一种:使用promise中的then来实现

若一个函数有async关键字和return返回值,调用此函数,若执行成功内部会调用Promise.resolve()方法返回一个promise对象,若执行失败内部会调用Promise.reject()方法返回一个promise对象。

image.png

想要获取到async函数的执行结果,就要调用Promise的then或catch来给它注册回调函数。

image.png

第二种:await

上面介绍了async的作用,一般情况下。async和await需要配合才能使异步操作同步化,wait意为等待,等待某个函数执行后才会开始执行其后面的代码。

image.png

如果我们没有等待fn1执行完之后再打印result,那么有可能得到是undefined

1.总结

在很多的时候,我们希望按照同步的方式来获得异步函数的结果,比如登录时,我们必须要在后台返回匹配成功的信息之后才能进行页面跳转,因此,使异步操作同步化这是很重要的知识点,但是这种方案是基于Promise的基础之上的,因此在学习该知识时,一定要对Promise有充分的理解