JavaScript 异步编程的救星：Promise 与 Async/Await 深度解析

2023-09-05 03:52:14

好的，以下是关于“浅析 Promise、Async/Await”的专业博客文章：

前言

在传统的 JavaScript 开发中，我们通常使用回调函数来处理异步操作。然而，当需要处理多个嵌套的异步操作时，回调函数很容易导致代码难以阅读和维护。

Promise 和 Async/Await 应运而生，它们提供了更优雅、更简洁的方式来处理异步操作。Promise 是一个对象，它表示一个异步操作的最终结果。Async/Await 是一种语法糖，它允许我们使用同步的方式编写异步代码。

Promise

Promise 有三种状态：pending（等待）、fulfilled（已完成）和 rejected（已拒绝）。一个 Promise 对象在创建时，其状态为 pending。当异步操作成功完成时，Promise 对象的状态变为 fulfilled，并携带一个结果值。当异步操作失败时，Promise 对象的状态变为 rejected，并携带一个错误对象。

我们可以使用 then() 方法来处理 Promise 对象的状态变化。then() 方法接受两个参数：一个处理 fulfilled 状态的函数和一个处理 rejected 状态的函数。当 Promise 对象的状态变为 fulfilled 时，则调用第一个函数，并将结果值作为参数传递给该函数。当 Promise 对象的状态变为 rejected 时，则调用第二个函数，并将错误对象作为参数传递给该函数。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Hello, world!');
  }, 1000);
});

promise.then(result => {
  console.log(result); // 输出: Hello, world!
}).catch(error => {
  console.error(error);
});

Async/Await

Async/Await 是 ES8 中引入的语法糖，它允许我们使用同步的方式编写异步代码。Async/Await 只能在 async 函数中使用。async 函数返回一个 Promise 对象，该 Promise 对象表示异步操作的最终结果。

当执行 async 函数时，JavaScript 引擎会创建一个 Promise 对象，并将该 Promise 对象作为 async 函数的返回值。然后，JavaScript 引擎会执行 async 函数中的代码。当遇到 await 时，JavaScript 引擎会暂停 async 函数的执行，直到 await 后面的 Promise 对象的状态变为 fulfilled 或 rejected。当 Promise 对象的状态变为 fulfilled 时，JavaScript 引擎会继续执行 async 函数，并将 Promise 对象的结果值作为 await 后面的表达式的值。当 Promise 对象的状态变为 rejected 时，JavaScript 引擎会抛出 await 后面的表达式的错误对象。

async function helloWorld() {
  const result = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, world!');
    }, 1000);
  });

  console.log(result); // 输出: Hello, world!
}

helloWorld();