掌握 Promise 和 async/await：解锁异步编程的强大功能

前端

2023-10-04 00:16:30

了解和运用 Promise async/await

在 JavaScript 的广阔世界中，Promise 和 async/await 已成为处理异步操作的利器，以优雅且易于管理的方式。深入了解这些概念将帮助您掌握异步编程的精髓。

Promise 的本质

Promise 是一个用来管理异步操作的特殊对象。它代表着某个未来才会解决（成功或失败）的操作。想想它就像一个信使，负责传递结果或错误信息。

Promise 的生命周期

一个 Promise 有三种状态：

Pending： 初始状态，代表操作尚未解决。
Fulfilled： 操作已成功解决，Promise 的结果可用。
Rejected： 操作已失败，Promise 的错误信息可用。

async/await

async/await 是 ES8 中引入的，它们使处理 Promise 变得更加简洁和同步化。

async 函数： 一个标有 async 的函数表示它是一个异步函数。它可以返回一个 Promise 或包含 Promise 的表达式。
await 表达式： 当放置在 async 函数中时，await 表达式会暂停函数的执行，直到 Promise 解决为止。它会返回 Promise 的结果或抛出错误。

使用 Promise 和 async/await

让我们通过一个示例来了解如何使用 Promise 和 async/await：

// 使用 Promise
const promise = fetch('https://example.com/api');
promise.then((response) => {
  console.log(response);
}).catch((error) => {
  console.error(error);
});

// 使用 async/await
async function fetchApi() {
  try {
    const response = await fetch('https://example.com/api');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}
fetchApi();