使用 ES7 async/await 完成网页异步加载-JavaScript中文网-JavaScript教程资源分享门户

在 Web 前端开发中，异步加载是很常见的需求，特别是在用户体验方面。当用户在等待某些资源加载完成之前，让页面显示一个加载动画或者提示信息，可以有效提升用户的体验。

在过去，常常使用回调函数或者 Promise 来解决异步加载问题。但是，这些方法在代码复杂度和可读性方面存在一些问题。而在 ECMAScript 2017（ES7）中，提供了一种更加简单直观的解决方案：async/await。

async/await 概述

async/await 是 JavaScript 中解决异步回调问题的一种新的语法糖，通过使用 async 和 await 关键字来使异步代码的结构更加清晰，代码可读性更强。

async 用于定义一个函数为异步函数，而 await 则用于暂停异步函数的执行，并等待 Promise 对象的状态变化，最后返回 Promise 对象的结果。

示例代码

下面我们来看一个简单的示例，使用 async/await 完成异步加载图片。

首先，我们定义一个 async 函数，接收一个图片 URL，返回一个 Promise 对象：

async function loadImage(url) {
  return new Promise((resolve, reject) => {
    let image = new Image();
    image.onload = () => resolve(image);
    image.onerror = reject;
    image.src = url;
  });
}

接着，我们可以在其他地方调用 loadImage 函数，并使用 await 来等待 Promise 对象的 resolve 状态，然后获取图片对象。

(async function() {
  let image = await loadImage('http://example.com/sample.jpg');
  document.body.appendChild(image);
})();

这段代码中，我们使用自执行函数包裹了使用异步函数组合的代码块，以便在函数内使用 await 关键字。

此处需要注意的是，await 关键字只能出现在 async 函数内部。

使用 async/await 完成网页异步加载

我们可以借助 async/await，来实现页面异步加载和显示类似加载动画或者提示信息的效果。下面是一个使用 async/await 完成网页异步加载的示例。

首先，在 HTML 文件中定义一个用于显示加载动画的元素：

<div id="loader">加载中...</div>

然后，在 JavaScript 中，定义一个异步函数，用于加载网页数据，并返回一个 Promise 对象。在函数中，我们使用 fetch 函数（ES6 新增的基于 Promise 的 AJAX API）发起一个 GET 请求，并将响应的 JSON 数据作为 Promise 对象的 resolve 参数进行传递。

async function loadData(url) {
  let response = await fetch(url);
  let data = await response.json();
  return data;
}

接下来，我们可以使用 async/await 来控制函数的执行顺序和加载动画的显示。

我们可以先定义一个函数，用于在网页上显示加载动画：

function showLoader() {
  let loader = document.querySelector('#loader');
  loader.style.display = 'block';
}

然后，在其他地方调用 loadData 函数，并在函数调用前后分别调用 showLoader 和隐藏加载动画的函数。

(async function() {
  showLoader();
  let data = await loadData('http://example.com/data.json');
  // 处理返回的数据
  // ...
  let loader = document.querySelector('#loader');
  loader.style.display = 'none';
})();

这段代码中，我们使用 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