在 Web 前端开发中，异步加载是很常见的需求，特别是在用户体验方面。当用户在等待某些资源加载完成之前，让页面显示一个加载动画或者提示信息，可以有效提升用户的体验。
在过去，常常使用回调函数或者 Promise 来解决异步加载问题。但是，这些方法在代码复杂度和可读性方面存在一些问题。而在 ECMAScript 2017（ES7）中，提供了一种更加简单直观的解决方案：async/await。
async/await 概述
async/await 是 JavaScript 中解决异步回调问题的一种新的语法糖，通过使用 async 和 await 关键字来使异步代码的结构更加清晰，代码可读性更强。
async 用于定义一个函数为异步函数，而 await 则用于暂停异步函数的执行，并等待 Promise 对象的状态变化，最后返回 Promise 对象的结果。
示例代码
下面我们来看一个简单的示例，使用 async/await 完成异步加载图片。
首先，我们定义一个 async 函数，接收一个图片 URL，返回一个 Promise 对象：
----- -------- -------------- -
------ --- ----------------- ------- -- -
--- ----- - --- --------
------------ - -- -- ---------------
------------- - -------
--------- - ----
---
-接着，我们可以在其他地方调用 loadImage 函数，并使用 await 来等待 Promise 对象的 resolve 状态，然后获取图片对象。
------ ---------- - --- ----- - ----- ------------------------------------------- --------------------------------- -----
这段代码中，我们使用自执行函数包裹了使用异步函数组合的代码块，以便在函数内使用 await 关键字。
此处需要注意的是，await 关键字只能出现在 async 函数内部。
使用 async/await 完成网页异步加载
我们可以借助 async/await，来实现页面异步加载和显示类似加载动画或者提示信息的效果。下面是一个使用 async/await 完成网页异步加载的示例。
首先，在 HTML 文件中定义一个用于显示加载动画的元素：
---- ------------------------
然后，在 JavaScript 中，定义一个异步函数，用于加载网页数据，并返回一个 Promise 对象。在函数中，我们使用 fetch 函数（ES6 新增的基于 Promise 的 AJAX API）发起一个 GET 请求，并将响应的 JSON 数据作为 Promise 对象的 resolve 参数进行传递。
----- -------- ------------- - --- -------- - ----- ----------- --- ---- - ----- ---------------- ------ ----- -
接下来，我们可以使用 async/await 来控制函数的执行顺序和加载动画的显示。
我们可以先定义一个函数，用于在网页上显示加载动画：
-------- ------------ - --- ------ - ---------------------------------- -------------------- - -------- -
然后，在其他地方调用 loadData 函数，并在函数调用前后分别调用 showLoader 和隐藏加载动画的函数。
------ ---------- - ------------- --- ---- - ----- ----------------------------------------- -- ------- -- --- --- ------ - ---------------------------------- -------------------- - ------- -----
这段代码中，我们使用 IIFE（Immediately-invoked function expression，即立即执行函数表达式）包裹代码块，以便在函数内使用 await 关键字。
通过使用 async/await，我们可以非常方便地实现异步请求和动画效果，并且代码十分直观易懂。
总结
在 Web 前端开发中，异步加载是一项极其重要的技术，它不仅可以提升用户体验，还能减小服务器负载。在实现异步加载的过程中，ES7 中的 async/await 可以让我们的代码更加直观和易懂。
使用 async/await，我们可以避免回调地狱和 Promise 的 then 链式写法，使代码看起来更加线性，也更加易于编写和维护。
因此，在实际开发中，我们可以尝试使用 async/await 来处理异步加载的问题，以提升代码可读性和开发效率。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ee013ff6b2d6eab3822316