2．async/await 函数
async 函数是使用 async 关键字声明的函数，是 AsyncFunction 构造函数的实例，并且允许 使用 await 关键字。async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的 异步行为，而无须刻意地链式调用 Promise。
async 函数可能包含 0 个或多个 await 表达式，await 表达式会暂停整个 async 函数的执行 进程并让出其控制权，只有当等待的基于 Promise 对象的异步操作成功或失败后才会恢复进程。 示例代码如代码清单 2-26 所示。
代码清单 2-26
functionresolveAfter2Seconds() { returnnewPromise(resolve=> { setTimeout(() => { resolve('resolved'); }, 2000); }); } asyncfunctionasyncCall() { console.log('calling'); constresult=awaitresolveAfter2Seconds(); console.log(result); console.log("hahaCoder") // 期望输出: "resolved"} asyncCall();
运行结果如下。
"calling""resolved""hahaCoder"
代码清单 2-26 首先会输出 calling 字符串，接着会执行 resolveAfter2Seconds()函数，由于 该函数前有 await 关键字，故 asyncCall 函数的执行进程会中断，2s 后，即异步操作执行完成 后会恢复进程，从而输出 resolved 和 hahaCoder。
不论是回调函数、Promise 还是 async/await 等其他异步任务解决方案，其本质都是通过 JavaScript 唯一的单线程执行所有任务。
本节最后介绍 HTML5 中新提出的概念——Web Worker，它可以帮助 JavaScript 创建多线 程环境，即允许主线程创建 worker 线程，并将一些任务分配给 worker 线程。
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的解决方法。worker 线程 可以执行任务而不干扰用户界面，等到 worker 线程完成对应的计算任务，将结果返回主线程。 示例代码如代码清单 2-27 所示。
代码清单 2-27
<htmllang="en"><head><metacharset="UTF-8"><title>web worker</title></head><body><script>varworker=newWorker("worker.js") worker.onmessage= (evt) => { console.log("Message posted from webworker: "+evt.data); } worker.postMessage("Hello,I'm hahaCoder from demo.html"); </script></body></html>
Worker.js 中的代码如代码清单 2-28 所示。
代码清单 2-28
postMessage("Hello,I'm shipudong from worker.js"); onmessage= (evt) => { postMessage("Worker received data: "+evt.data); };
运行结果如图 2-32 所示。
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.6 深度学习中的 JavaScript——2.6.2 JavaScript 异步编程（下）: https://developer.aliyun.com/article/1228121?groupCode=tech_library
