ECMAScript 2018 中的 async/await 异步编程技巧及应用-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用的复杂性不断提升，异步编程已经成为了前端开发中不可或缺的一部分。传统的回调函数和 Promise 都可以用于异步编程，但是它们在代码可读性和代码复杂度方面都存在一些问题。ECMAScript 2018 中引入的 async/await 语法则提供了一种更为简洁、易读、易写的方式来进行异步编程。

async/await 语法

async/await 语法是建立在 Promise 之上的一种抽象封装，它可以让我们像编写同步代码一样编写异步代码。

async 函数

在一个函数前面加上 async 关键字，就表示这个函数是一个异步函数。异步函数的返回值是 Promise 对象。

例如，以下代码定义了一个异步函数，它返回 Promise 对象：

async function fetchData() {
  const response = await fetch('https://example.com/data.json');
  return response.json();
}

await 关键字

在异步函数内部，我们可以使用 await 关键字来等待一个 Promise 执行完毕并返回结果。当遇到 await 关键字时，async 函数会自动挂起执行，直到 Promise 返回结果。

例如，以下代码定义了一个异步函数，它等待一个 Promise 执行完毕并返回结果：

async function fetchData() {
  const response = await fetch('https://example.com/data.json');
  const data = await response.json();
  return data;
}

异步编程实例

接下来，我们来看一个实例，来演示 async/await 的异步编程实践。

假设我们要从一个 API 中获取三个用户的数据，并将这些数据都打印出来。API 中每个用户的数据是由一个 URL 返回的。我们可以使用 async/await 语法来实现这个需求。

首先，我们需要定义一个函数，该函数接受一个用户 ID，返回一个 Promise 对象，该 Promise 对象会返回相应用户的数据。实现如下：

async function getUserData(userId) {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  const data = await response.json();
  return data;
}

接下来，我们定义一个主函数，该函数将调用 getUserData 函数，获取三个用户数据，特别的，我们使用 Promise.all() 指令来等待所有 Promise 执行完成。下面是该函数实现：

async function printUserData() {
  const userIds = [1, 2, 3];
  const userDataPromises = userIds.map(id => getUserData(id));
  const userDataArray = await Promise.all(userDataPromises);

  userDataArray.forEach(data => {
    console.log(`ID: ${data.id}  Name: ${data.name}  Email: ${data.email}`);
  });
}

最后，我们只需调用 printUserData 函数即可：

printUserData();

应用场景

async/await 语法在实际工程应用中也有很多应用场景。例如：使用 async/await 最常见的方式则是异步获取数据，并使用获取到的数据进行 UI 更新。

下面是一个实际使用 async/await 的场景：

async function loadData() {
  const data = await fetch('https://example.com/data.json');
  const jsonData = await data.json();
  jsonData.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.name;
    document.querySelector('#result').appendChild(li);
  });
}

loadData();

在这个例子中，异步加载了一个 JSON 数据文件，然后使用加载到的数据创建了一些 HTML 元素并添加到页面中。

总结

async/await 语法使得异步编程变得更加简单易读，让开发者们能够更好地处理异步代码和错误处理，提高了代码的可读性和可维护性。在实际开发中，掌握 async/await 技术将有助于提高工作效率，从而实现更加优秀的产品。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b349ecadd4f0e0ffc5a26c