Web前端入门第 79 问：JavaScript async & await 的异步任务进化之路

JS 中异步任务随处可见，比如：
1、用户交互的点击、输入
2、网络请求的 fetch、ajax、WebSocket
3、资源中的图片、脚本加载
4、定时任务 setTimeout、setInterval、动画
5、Web Worker 中的后台任务
以上这些地方都能见到 JS 异步任务使用场景。
不过 JS 的异步任务 使用方法 却经过了多次迭代，多次进化才像一个完全体~~
回调方法

最原始的使用方法，目前也还能在各种钩子函数中见到 回调函数 的身影。

1. function asyncTask(callback) {
2.   console.log('开始执行异步任务');
3.   setTimeout(() => {
4.     console.log('异步任务执行完毕');
5.     callback && callback();
6.   }, 1000);
7. }
9. // 传入匿名函数用于回调方法
10. asyncTask(() => {
11.   console.log('异步任务执行完毕，回调函数执行完毕');
12. });

复制代码

以上 asyncTask 传入的 匿名函数 便是回调方法（也称为回调函数），回调方法将会在等到 setTimeout 执行完毕时执行。
Promise

在使用回到函数时，容易陷入回调地狱，而 Promise 的出现便是为了解决回调地狱问题。
使用回调函数嵌套太多时，就会有像套娃一样的代码，比如：

1. a(() => {
2.   b(()  => {
3.     c(() => {
4.       d(() => {})
5.     })
6.   })
7. })

复制代码

使用 Promise 优化之后可以是这样：

1. a()
2. .then(() => {
3.   return b()
4. }).then(() => {
5.   return c()
6. }).then(() => {
7.   return d()
8. })

复制代码

最开始的 setTimeout 函数使用 Promise 优化之后：

1. function asyncTask() {
2.   return new Promise((resolve) => {
3.     console.log('开始执行异步任务');
4.     setTimeout(() => {
5.       console.log('异步任务执行完毕');
6.       resolve();
7.     }, 1000);
8.   });
9. }
11. // Promise 链式调用
12. asyncTask().then(() => {
13.   console.log('异步任务执行完毕，回调函数执行完毕');
14. });

复制代码

关于 Promise 可参考之前的文章：Web前端入门第 69 问：JavaScript Promise 提供的方法都使用过吗？
async & await

使用 Promise 的链式调用确实大大的改善了回调地狱，但还是绕不过代码不太优雅的问题，于是乎 JS 标准定制的那群大佬，就在 ES2017(ES8) 中引入了 async 和 await 关键字，由于优化 JS 中的异步逻辑，使得代码就像同步任务一样。
async & await 仅仅是 Promise 的语法糖，所以它俩基本是与 Promise 深度绑定~~
改写上面的 Promise 示例：

1. (async () => {
2.   function asyncTask() {
3.     return new Promise((resolve) => {
4.       console.log('开始执行异步任务');
5.       setTimeout(() => {
6.         console.log('异步任务执行完毕');
7.         resolve();
8.       }, 1000);
9.     });
10.   }
12.   // await 调用
13.   await asyncTask()
14.   console.log('异步任务执行完毕，回调函数执行完毕');
15. })()

复制代码

await 关键字用于等待一个 Promise 任务完成，然后继续执行后续的代码。
注意：在使用 await 关键字时，必须在外层作用域的函数身上加上 async 关键字，否则会报错。
顶层 await

在 ES2023 发布后，异步任务又被革命了，在 ES 模块 中，允许在顶层作用域使用 await 关键字而不必再套在 async 函数中。

1. [/code]注意上面的 [b]type="module"[/b]，表示使用 ES 模块语法，这种语法 Chrome 61 版本开始支持（2017年后）。
2. 如果没有 [b]type="module"[/b]，表示使用正常的 script 执行脚本，上面的代码会报错：
3. [code]Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

复制代码

表示 await 必须在 async 函数中使用，在顶层使用时候必须放在 ES 模块中。
返回内容

await 关键字可以等待一个 Promise resolve 方法返回值：

1. (async () => {
2.   function asyncTask() {
3.     return new Promise((resolve) => {
4.       console.log('开始执行异步任务');
5.       setTimeout(() => {
6.         console.log('异步任务执行完毕');
7.         resolve({ name: '前端路引' });
8.       }, 1000);
9.     });
10.   }
12.   // await 调用
13.   const res = await asyncTask()
14.   console.log('异步任务执行完毕，返回内容：', res);
15.   // 输出 {name: '前端路引'}
16. })()

复制代码

生成器函数： async 规范落地之前，JS 还有过一个 生成器函数 也能用来处理异步任务，不过在实际开发中很少使用，在一些多任务的脚手架里面能看到它的身影，使用方法可参考之前的文章：
Web前端入门第 64 问：JavaScript 几种函数定义方式有什么区别？
写在最后

JS 的任务调度机制让它拥有大量的异步编程，各式各样的使用方式都有必要了解学习，要不然...嘿嘿...大佬写的代码看不懂~~

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！