ES8 中的 Async / Await - 异步编程的进化

在 ES8 中，Async / Await 成为了 JavaScript 异步编程的一个重要工具，解决了异步回调地狱的问题，使得异步编程更加简单、优雅。本文将深入探讨 Async / Await 的原理、用法以及在实际项目中的应用。

什么是 Async / Await

Async / Await 是一个用于解决异步编程的新功能，它基于 Promise 实现，可用于异步执行操作并获得结果，同时还能避免异步回调地狱的情况。

• Async: 表示这是一个异步函数，函数体内必须包含 await 表达式。
• Await: 表示等待异步操作完成并返回结果，只能在异步函数内部使用。

Async / Await 的优点

Async / Await 有以下优点：

1. 可读性更强：Async / Await 可以把异步的代码写成同步风格，可以让代码更加易读易懂，堆叠嵌套的回调也会变得更加简单明了。
2. 错误处理更加方便：Async / Await 中可以使用 try / catch 来捕获错误，避免了使用回调函数进行错误处理的繁琐过程。
3. Promise 优化：Async / Await 可以非常方便地调用 Promise 对象，甚至还可以组合使用 Promise。
4. 可以在循环中使用：使用 Async / Await 可以在循环中轻松使用异步请求，而不需要担心处理回调函数的顺序。

如何使用 Async / Await

下面是一个例子，使用 Async / Await 实现异步加载图片的例子：

async function loadImage(url) {
  const response = await fetch(url);
  const blob = await response.blob();

  const imageUrl = URL.createObjectURL(blob);
  const image = new Image();
  image.src = imageUrl;
  document.body.appendChild(image);
};

loadImage('https://picsum.photos/200/300');

在这个例子中，我们定义了一个异步函数 loadImage，通过 await fetch(url) 可以等待获取给定 URL 的响应，并通过 await response.blob() 等待响应的 Body 被转化成一个 Blob，最后通过 URL.createObjectURL(blob) 创建一个 Blob URL。创建完 url 还要创建图片元素并插入 dom 操作中。

Async / Await 的错误处理

除了优化代码的可读性外，Async / Await 也提供了更容易的错误处理。由于 Async / Await 基于 Promise 来工作，它也可以像 Promise 一样使用 try / catch 来处理错误。下面是一个例子：

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData();

在这个例子中，我们使用 try / catch 来捕获可能抛出的错误，而不是使用 Promise 的 .then() 或 .catch() 进行处理。

Async / Await 中的组合使用

Async / Await 还提供了一些其他有用的功能，如组合多个异步操作。下面是个组合使用的例子：

async function fetchTwo() {
  const [userResponse, postResponse] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1'),
    fetch('https://jsonplaceholder.typicode.com/posts/1')
  ]);

  const user = await userResponse.json();
  const post = await postResponse.json();

  console.log(user, post);
}

fetchTwo();

在这个例子中，我们使用了 Promise.all 方法来并行请求两个 API，使用数组解构来分别获取两个不同的响应。接着，我们再次使用 await 等待两个不同的 JSON 数据完成，最后将数据输出到控制台。

总结

ES8 中引入的 Async / Await 工具是又一重大改进，它使用了 Promise API，并允许我们编写和阅读使用异步操作的代码。

以上就是 Async / Await 的简要介绍，它简化了异步回调的代码，提高了代码的可读性，同时也优化了错误处理流程。现如今，Async /Await 已经在许多前端项目中大量应用，并为全栈工程师的开发带来了无穷的便利。

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