async、await究竟是什么?异步编程要如何理解?

330 阅读2分钟

用一句话总结:
async、await是promise的语法糖,promise是实现异步的方式,让大家可以用同步编程的方式去写异步代码。

P.S. 这篇文章是我在看过B站一个相关视频后整理下来的笔记,我觉得讲得真的很浅显易懂,大家可以配合大大的视频一起食用本文。另外,整理笔记的时候还参考了这位大大的讲解

一切的一切都要从最初的异步编程说起。

同步与异步

同步,是指执行完一个进程获取到返回结果后,再接着执行下一个进程。如果该线程执行需要很久,那么同步机制会一直等待直到获取返回结果。

异步,是指不用一直等待返回结果,而是先去执行别的进程。

对比同步异步
优点有利于控制流程、很容易捕获并处理异常执行效率高,节省时间、可以避免阻塞
缺点可能会耗费很长时间占用更多资源

JavaScript如何实现异步

JavaScript实现异步的有两种方式。

  1. 回调函数

    比如,定时器setTimeout(callback,duration),先执行往下的代码,到时间了再执行callback。 但是如果需要依次执行多个异步操作,程序一层一层嵌套下去,代码的可读性就会变得非常差,于是就出现了“回调地狱”的问题。

image.png

  1. promise

    promise的出现就很好的解决了回调地狱的问题。

promise

promise英文中意为承诺,它承诺在未来某个时候会返回数据(promise函数)。

使用promise,使代码的可读性增强很多。

比如,fetch就是使用了promise的一个API。

链式调用

链式调用:将多个异步操作串联起来 image-20220825185137189.png

接收返回的结果

有3个方法用于接收promise返回的结果:

  • then():成功

如果请求在未来成功完成,请求的结果传入then()方法,并执行回调函数

  • catch():失败

如果请求失败或之前的任意操作发生错误,捕获到的错误结果会传入catch()方法,并执行回调函数

  • finally():无论成败都一定执行其中的回调函数

image-20220825185241274.png

then()和catch()其实就是代替了trycatch。

async和await

使用async、await让promise写起来更加简洁。

async:可以将普通函数标记为异步函数 (指返回值为promise对象的函数)

在异步函数中,可以再调用其他的异步函数,但不需要再使用then()

await:等待promise完成后返回最终的结果 虽然看起来会暂停操作,但js可以执行其他操作

image-20220825190602217.png

注意:

  1. await不能单独使用

  2. 如果想使用 循环中的 所有操作都并发执行可以使用 for await

image-20220825191357946.png