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

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

搭配Fetch在上篇的文章 JavaScript Fetch API 使用教学已经有提到 fetch 的用法，因为 fetch 最后回传的是promise，理所当然的通过async和await操作是最恰当不过的。
举例来说，先前往类似阿里云的获取天气 API 的平台可以取得许多气象资料，搜索某个城市的现在天气报告，通过 fetch的json() 方法处理返回数据，结果显示出「北京市的即时气温」。
透过 async 和 await 的简化代码，得到的结果完全不需要 callback 的辅助，就能按照我们所期望的顺序进行。( 先显示「开始调用API」，接着显示「北京市的气温」，最后显示「气温结果」 )

文章插图

搭配循环如果要通过 JavaScript 实现「文字慢慢变大」的效果，除了透过css的transition设定之外，通常就是直接使用 setInterval 来完成，就像下面的代码这样：

文章插图

搭配async 和await，我们就能将同样的做法，因为使用了await，所以每次执行时，都会进行「等待」，也就能做到字体慢慢变大的效果。
html结构：

文章插图

js代码：

文章插图

运行效果：

文章插图

同样的，上面提到的fetch 或是输入文字，只要做成await 的方式，都可以放在循环里面使用，例如通过循环不断的 fetch 资料、通过循环不断的输入文字...等，这些就不是callback 方法能容易办到的啰～

文章插图

文章参考来源：https://www.oxxostudio.tw/articles/201908/js-async-await.html
原文作者：oxxostudio
由于网页为繁体内容，术语描述和话术与我们有差异的问题，笔者在保证不改变原意的基础上做了调整，并在此基础上进行了错误校正，如发现问题，欢迎你的指正

小结坦白说只要你一但熟悉了async 和await，就真的回不去了，虽然说callback 仍然是程式开发里必备的功能，但对于同步和非同步之间的转换，以后就交给async 和await来处理吧！
更多精彩内容，请关注“前端达人”公众号