MDN 中 JavaScript 异步编程(Promise/Async)的官方示例解读

在 MDN Web Docs（Mozilla 开发者网络）的官方文档中，JavaScript 异步编程的教程构建了一条清晰的技术演进路径：从早期容易陷入嵌套的回调函数，到 ES6 规范标准化的 Promise 链式机制，再到现代 ES2017 的 async/await 语法糖。MDN 并不单纯罗列 API 规范，而是通过一系列典型业务场景——如网络资源加载（fetch）、异步计时器包装（alarm）、并发资源竞速（Promise.all）等，展示异步代码的规范组织方式。本文围绕 MDN 官方系列核心示例展开深入解读，剖析其背后的状态流转、微任务调度机制与常见认知误区，帮助读者建立扎实的异步运行心智模型。

一、官方入门示例：从 fetch 请求看 Promise 链式设计

MDN 在介绍“如何使用 Promise”章节时，最具代表性的示例便是基于 Fetch API 获取网络资源。官方示例通过链式调用展示了两个连续的异步动作：获取响应体并将其解析为 JSON 对象。

// MDN 官方文档基础示例精简还原
const fetchPromise = fetch(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
);

console.log(fetchPromise); // 立即输出 Promise 实例，处于 pending 状态

fetchPromise
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP 错误！状态码: ${response.status}`);
    }
    return response.json(); // 返回新的 Promise 对象
  })
  .then((data) => {
    console.log("获取到的数据:", data[0].name);
  })
  .catch((error) => {
    console.error(`请求失败: ${error}`);
  });

很多初学者在第一次接触该示例时，都会产生一个疑问：为什么一个普通的请求需要两个 .then()？

MDN 官方对此做出了精确的技术解释：

• 第一阶段（响应头到达）：fetch() 返回的第一个 Promise 在服务器返回响应标头（Headers）并建立连接时就会兑现（resolve）。此时，数据包的主体（Body）可能还在传输中，得到的是一个 Response 容器对象。
• 第二阶段（数据流解析）：要读取完整的 JSON 数据，需要调用 response.json()。该方法本身是异步读取流数据的操作，因此它返回的同样是一个新的 Promise。
• 链式穿透与扁平化：在第一个 .then() 的回调中显式 return response.json()，Promise 内部机制会自动等待这个内层 Promise 决议，并将最终解析得到的 JavaScript 原生数据传递给第二个 .then()。

二、自定义 Promise 示例：解构 alarm() 定时器与状态机

为了让开发者彻底搞懂 Promise 是如何产生的，MDN 提供了一个经典的进阶演练：使用 new Promise() 构造函数将传统的 setTimeout 封装为一个现代的 alarm() 闹钟函数。

// MDN 官方文档 alarm() 自定义实现
function alarm(person, delay) {
  return new Promise((resolve, reject) => {
    if (delay < 0) {
      throw new Error("报警延时不能为负数！");
    }
    setTimeout(() => {
      resolve(`起床了，${person}！`);
    }, delay);
  });
}

// 调用示例
const output = document.querySelector("#output");
const button = document.querySelector("#set-alarm");

button.addEventListener("click", () => {
  alarm("小明", 1000)
    .then((message) => {
      output.textContent = message;
    })
    .catch((error) => {
      output.textContent = `无法设置闹钟: ${error}`;
    });
});

官方示例通过简单的 10 余行代码，清晰展示了 Promise 的本质特征与三大核心状态：

1. 待定（Pending）：调用 alarm("小明", 1000) 后，返回的 Promise 处于 Pending 状态。此时外部既未获得成功值，也未触发错误。
2. 已兑现（Fulfilled）：当 1000 毫秒倒计时结束，内部执行器调用了 resolve(value)。Promise 状态变更为 Fulfilled，并将传递的值派发给所有通过 .then() 绑定的回调函数。
3. 已拒绝（Rejected）：如果传入负数延迟，代码会直接抛出异常或显式调用 reject(reason)。Promise 状态转变为 Rejected，直接流向 .catch() 处理。

三、并发与聚合：MDN Promise 组合方法对比

在现实项目中，页面常常需要同时等待多批数据。MDN 官方针对多异步任务的协同管理，专门设计了多资源加载示例，重点解析 Promise.all() 及其家族方法的适用场景。

// MDN 官方 Promise.all 示例
const fetchPromise1 = fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json");
const fetchPromise2 = fetch("https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/not-found");
const fetchPromise3 = fetch("https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json");

Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
  .then((responses) => {
    for (const response of responses) {
      console.log(`${response.url}: ${response.status}`);
    }
  })
  .catch((error) => {
    console.error(`并发请求中某一项失败: ${error}`);
  });

为了让读者选对并发方法，MDN 文档横向对比了四个核心组合器（Combinators）：

四、现代重构：使用 async 和 await 改造官方示例

在异步编程教程的后半部分，MDN 将前面的 fetch() 与 alarm() 示例重构为了 async/await 形式。通过消除嵌套的回调函数，异步代码的书写体验变得极其接近传统的同步代码。

// MDN 官方文档：使用 async / await 重构 fetch 请求
async function fetchProducts() {
  try {
    // await 暂停当前函数的执行，等待 fetch Promise 决议
    const response = await fetch(
      "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json"
    );

    if (!response.ok) {
      throw new Error(`HTTP 请求异常: ${response.status}`);
    }

    // 等待数据流读取并解析为 JSON
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`无法获取商品数据: ${error}`);
  }
}

// 消费 async 函数（async 函数自身必定返回一个 Promise）
const promise = fetchProducts();
promise.then((data) => {
  if (data) {
    console.log("成功读取商品列表长度:", data.length);
  }
});

1. 深入原理：await 的非阻塞特性

许多开发者在初次看到 const response = await fetch(...) 时，会产生一种误区：认为 await 会让整个浏览器线程“卡住”等待。

MDN 在此特别给出了底层执行细节的澄清：await 绝对不会阻塞主线程！它所“暂停”的仅仅是当前这个由 async 修饰的函数体内部的执行。在底层，JavaScript 引擎会将 await 之后的代码自动包装为一个微任务，随后立刻将执行权让回给主事件循环（Event Loop）。此时浏览器依然可以正常响应用户点击、执行重排重绘以及处理其他定时器事件。

2. 错误处理的一致性

在 Promise 链式写法中，异常通过 .catch() 处理；而在 async/await 语法中，可以直接借助 JavaScript 原生的 try...catch...finally 结构。无论是在 await 期间发生的网络拒绝（Rejected），还是在同步执行阶段发生的类型错误（TypeError），都可以被外层的 catch 块无缝统一捕获，从而显著降低维护心智负担。

五、MDN 异步设计思想总结与工程实践指南

通过对 MDN 官方示例的系统梳理，我们可以总结出 JavaScript 异步编程的黄金实践原则：

• 默认优先采用 async/await：在业务代码中，async/await 配合 try...catch 提供了最直观的代码阅读流与断点调试体验，应作为大多数业务逻辑的首选。
• 警惕无意识的串行等待（Serial Await）：如果多个异步操作相互之间没有数据依赖关系，切忌直接按顺序连续书写多个 await。这会导致总耗时变为所有请求耗时的累加。正确的做法是结合 Promise.all() 实现并行发起，再统一等待结果。
• 始终妥善处理错误捕获：未处理的 Promise 拒绝会导致浏览器控制台报出 Uncaught (in promise) 告警，甚至在 Node.js 环境中触发进程崩溃。编写异步函数时，确保末端始终有 catch 守底。