好景不长Async 和Await 再次出现后，大幅精简JavaScript 并行和非并行（触发器）的繁杂感情纠葛，这首诗Sonbhadra撷取我自己认知的心路历程，实站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 U盘都化解( 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里边是非并行的句法，导致自己走自己的路，也造成了结果的不如预期。
时我们能借由 async、await 和 promise 展开修正，在显示1之后，会「等候」count function结束后再显示2。
setTimeout 和 setInterval ，这也能应用领域于「输出文本」的场景，过去我们要做到「连续输出」文本，可能要一层层叠叠写个好几个callback，现在如果使用async和await，就能够很单纯的实现连续输出的情境，程式码看起来也更干净简洁。
html结构：
js代码：
insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。
搭配Fetch
在上篇的文章 JavaScript Fetch API 使用教学已经有提到 fetch 的用语，因为 fetch 最后回传的是promise，理所当然的通过async和await操作是最恰当不过的。
借由 async 和 await 的精简代码，得到的结果完全不需要 callback 的辅助，就能按照我们所期望的次序展开。( 先显示「开始调用API」，接着显示「北京市的气温」，最后显示「气温结果」 )
搭配循环
如果要通过 JavaScript 实现「文本慢慢变大」的效果，除了借由CSS的transition设定之外，通常就是直接使用 setInterval 来顺利完成，就像下面的代码这样：
搭配async 和await，我们就能将同样的做法，因为使用了await，所以每次继续执行时，单厢展开「等候」，也就能做到字体慢慢变大的效果。
html结构：
js代码：
运行效果：
同样的，上面提到的fetch 或是输出文本，如果做成await 的方式，都能放在循环里面使用，例如通过循环不断的 fetch 资料、通过循环不断的输出文本…等，那些就不是callback 方法能难办到的啰～
原文作者：oxxostudio
由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上展开了错误校正，如发现问题，欢迎你的指正
小结
坦白说如果你一但熟悉了async 和await，就真的回不去了，虽然说callback 仍然是程式开发里必备的功能，但对于并行和非并行之间的转换，以后就交予async 和await来处置吧！
单纯了解之后，如果你想深入学习的话，笔者建议你看看我以前写的两首诗：「JavaScript基础」Promise使用指南、「JavaScript基础」深入学习async/await，相信你看完后会有不小的收获。
