JavaScript异步编程示例：Promise与async/await处理网络请求

处理网络请求是现代前端和Node.js服务端开发中最核心的日常任务。由于网络传输存在不可控的延迟，JavaScript采用单线程非阻塞事件循环模型，必须通过异步机制来发起请求并等待响应。理解从Promise链式调用到async/await的演变与协同方式，是编写健壮、可维护数据交互代码的关键。

一、核心概念：Promise与网络请求的生命周期

现代JavaScript环境内置了标准的fetch() API，它本身返回的就是一个Promise对象。一个Promise对象本质上是一个状态机容器，记录着某个未来才会完成的异步操作结果。

Promise拥有三种确定且不可逆的状态：

• Pending（挂起/进行中）：请求已经发送到网络栈，但服务器尚未返回响应头或连接仍在建立中。此时主线程不会停滞，后续代码继续执行。
• Fulfilled（已兑现/成功）：网络通信成功，服务器返回响应，Promise携带Response对象并触发后续解决流程。
• Rejected（已拒绝/失败）：发生网络断开、DNS解析失败或跨域被拦截等严重错误，Promise转入拒绝态并携带错误原因。

二、基础范式：使用 Promise 链式调用处理请求

在ES2015（ES6）中，Promise链式调用取代了早期的“回调金字塔”。fetch()函数首先返回一个解析为Response对象的Promise，而解析响应体（例如调用response.json()）本身也是一个异步操作，同样返回Promise，因此通常需要两次链式调用。

// 示例：使用 Promise 链式调用获取用户信息
function fetchUserData(userId) {
  fetch(`https://api.example.com/users/${userId}`)
    .then((response) => {
      // 必须手动检查 HTTP 状态码
      if (!response.ok) {
        throw new Error(`HTTP 异常！状态码: ${response.status}`);
      }
      return response.json(); // 返回新的 Promise
    })
    .then((data) => {
      console.log('获取数据成功:', data);
    })
    .catch((error) => {
      console.error('请求过程失败:', error.message);
    })
    .finally(() => {
      console.log('请求生命周期结束（成功或失败均执行）');
    });
}

三、现代范式：使用 async/await 改造异步代码

ECMAScript 2017（ES8）正式引入了async与await关键字。它们是建立在Promise之上的语法糖，允许我们用看起来像同步代码的顺序逻辑来表达异步操作，显著降低了心智负担与嵌套层级。

实战完整示例：标准请求封装

下面是将上述三步落实到具体业务逻辑中的规范写法：

// 使用 async/await 完整封装的网络请求函数
async function getUserProfile(userId) {
  const url = `https://api.example.com/users/${userId}`;

  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Accept': 'application/json'
      }
    });

    // 校验响应状态
    if (!response.ok) {
      throw new Error(`HTTP 错误 [状态码: ${response.status}]`);
    }

    // 等待解析 JSON 数据
    const userData = await response.json();
    return userData;
  } catch (error) {
    // 捕获网络异常、自定义 throw 或 JSON 解析错误
    console.error('获取用户数据失败:', error.message);
    throw error; // 根据上层需要决定是否继续向外抛出
  } finally {
    // 无论成功还是失败都会执行的收尾工作（如隐藏 Loading 指示器）
    console.log('网络交互流程结束');
  }
}

四、进阶场景：并发请求与串行请求的权衡

初学者在使用async/await时常犯的一个典型错误是：在没有依赖关系的情况下，连续使用await依次发起多个请求，导致耗时线性累加。

代码对比：正确利用 Promise.all 处理并发

// ❌ 反模式：两个互不依赖的请求却串行等待，浪费网络并发能力
async function getDashboardDataSerial() {
  const user = await fetch('/api/user').then(r => r.json());
  const stats = await fetch('/api/stats').then(r => r.json());
  return { user, stats };
}

// ✅ 推荐做法：通过 Promise.all 同时启动请求
async function getDashboardDataConcurrent() {
  try {
    const [userRes, statsRes] = await Promise.all([
      fetch('/api/user'),
      fetch('/api/stats')
    ]);

    if (!userRes.ok || !statsRes.ok) {
      throw new Error('部分接口响应异常');
    }

    const [user, stats] = await Promise.all([
      userRes.json(),
      statsRes.json()
    ]);

    return { user, stats };
  } catch (error) {
    console.error('批量加载数据失败:', error);
  }
}

五、常见认知误区辨析

六、健壮性控制：网络请求的超时与取消

在实际生产环境中，若网络不稳定，请求可能挂起数分钟。现代标准通过AbortController对象为网络请求提供超时中断支持。

// 带超时自动中断功能的请求函数
async function fetchWithTimeout(resource, options = {}) {
  const { timeout = 5000 } = options; // 默认超时时间 5000ms

  const controller = new AbortController();
  const timerId = setTimeout(() => controller.abort(), timeout);

  try {
    const response = await fetch(resource, {
      ...options,
      signal: controller.signal // 绑定中断信号
    });
    
    if (!response.ok) {
      throw new Error(`HTTP 状态码错误: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error(`请求超时（超过 ${timeout}ms 已被客户端中断）`);
    }
    throw error;
  } finally {
    clearTimeout(timerId); // 清除定时器，避免内存泄漏
  }
}

七、决策总结与最佳实践

总结而言，在现代JavaScript网络编程中：

1. 编写单点逻辑时首选 async/await：配合标准的try...catch...finally，让代码执行流清晰直观。
2. 发起多请求时优先考虑并发：不要无意识地在循环中逐个await，善用Promise.all()提升网络利用效率。
3. 防御性编程不可缺失：显式检验response.ok，并在核心链路配置AbortController实施超时熔断。