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

文章插图

【如何简单理解 JavaScript 的 Async 和 Await？】自从Async 和Await 出现后，大幅简化JAVAScript 同步和非同步（异步）的复杂纠葛，这篇文章将会分享我自己理解的历程，实站await 等待、连续输入文字、fetch 和回调应用，让这些过去需要层层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里头是非同步的语法，导致自己走自己的路，也造成了结果的不如预期。