如何简单理解 JavaScript 的 Async 和 Await？

2019 年 10 月 4 日
笔记

文章参考来源：https://www.oxxostudio.tw/articles/201908/js-async-await.html

原文作者：oxxostudio

由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正

开篇

自从Async 和Await 出现后，大幅简化JavaScript 同步和异步（异步）的复杂纠葛，这篇文章将会分享我自己理解的历程，实站await 等待、连续输入文字、在循环里调用，让这些过去需要层层callback才能完成的流程，透过 Async 和 Await 轻松的进行扁平化处理吧！

什么是async？什么是await？

在JavaScript的世界，同步sync和异步async的爱恨情仇，就如同偶像剧一般的剪不断理还乱，特别像是setTimeout、setInterval、MLHttpRequest或fetch这些同步异步混杂的用法，都会让人一个头两个大，幸好ES6出现了promise，ES7出现了async、await，帮助我们可以更容易的进行业务逻辑的编写。

对于同步和异步，最常见的说法是“同步模式下，每个任务必须按照顺序执行，后面的任务必须等待前面的任务执行完成，异步模式则相反，后面的任务不用等前面的，各自执行各自的任务”，但我觉得这样实在不容易理解，不容易理解的地方在于“中文”的同步和异步，可能和实际上的解释刚好相反了(同步的中文字面意思是“一起走”，异步的中文意思是“不要一起走”，超容易搞错的)，因此如果你跟我一样也很容易搞错，可以使用我觉得比较好理解的方法：“同一个赛道vs不同赛道”，透过赛道的方式，就更容易明白同步和异步。

同步：在“同一个赛道”比赛“接力赛跑”，当棒子没有交给我，我就得等你，不能跑。

异步：在“不(非)同赛道”比赛“赛跑”，谁都不等谁，只要轮到我跑，我就开始跑。

在ES7里头 async 的本质是 promise 的语法糖(包装得甜甜的比较好吃下肚)，只要 function标记为 async，就表示里头可以编写 await 的同步语法，而 await 顾名思义就是“等待”，它会确保一个 promise 的内容都解决( resolve )或出错( reject )后才会进行下一步，当 async function 的内容全都结束后，会返回一个 promise ，这表示后方可以使用 .then 语法来做连接，基本的代码长相就像下面这样：

利用async 和 await 做个“漂亮的等待”

了解 async 和 await 的意思之后，就来试试看做个“漂亮的等待”：

如果我们把上面的范例修改为 async 和 await 的写法，突然就发现代码看起来非常的干净，因为 await 会等待收到 resolve 之后才会进行后面的动作，如果没有收到就会一直处在等待的状态，所以什么时候该等待，什么时候该做下一步，就会非常清楚明了，这也就是我所谓“漂亮的等待”。

注意，await 一定得运行在async function 内！

搭配Promise

基本上只要有 async 和 await 的地方，就一定有 promise 的存在，promise 顾名思义就是“保证执行之后才会做什么事情”，刚刚使用了 async 、await 和 promise 改善 setTimeout这个容易出错的异步等待，针对 setInterval ，也能用同样的做法修改，举例来说，下面的代码码执行之后，并“不会”如我们预期的“先显示1，再显示 haha0…haha5 ，最后再显示2”，而是“先显示1和2，然后再出现 haha0…haha5”，因为虽然代码逻辑是从上往下，但在count function里头是异步的语法，导致自己走自己的路，也造成了结果的不如预期。