async-await执行流程控制

在现代JavaScript开发中，async-await已成为处理异步操作的主流方式。本文将通过实际代码示例，深入探讨async-await在执行流程控制中的应用。

首先，让我们从基础的async-await语法开始。一个简单的异步函数如下：

async function fetchUserData(userId) {
  const response = await fetch(`/api/users/${userId}`);
  const userData = await response.json();
  return userData;
}

这个函数会自动返回Promise对象，内部的await会等待异步操作完成。

在实际项目中，我们经常需要处理多个异步请求的依赖关系。比如用户信息获取后，还需要获取该用户的订单数据：

async function getUserWithOrders(userId) {
  try {
    const user = await fetchUserData(userId);
    const orders = await fetch(`/api/users/${userId}/orders`).then(r => r.json());
    return {
      ...user,
      orders
    };
  } catch (error) {
    console.error('获取用户信息失败:', error);
    throw error;
  }
}

这里我们使用了try-catch来处理可能的错误，确保程序的健壮性。

更复杂的流程控制场景中，我们需要并行执行多个异步操作：

async function getUserDataParallel(userId) {
  // 并行获取用户信息和统计数据
  const [user, stats, profile] = await Promise.all([
    fetchUserData(userId),
    fetch(`/api/users/${userId}/stats`).then(r => r.json()),
    fetch(`/api/users/${userId}/profile`).then(r => r.json())
  ]);
  
  return {
    user,
    stats,
    profile
  };
}

通过Promise.all，我们可以同时发起多个请求，提高整体性能。

在循环处理异步任务时，async-await提供了清晰的控制逻辑：

async function processUserList(userIds) {
  const results = [];
  
  // 顺序执行，每个用户数据获取后才进行下一个
  for (const userId of userIds) {
    try {
      const userData = await fetchUserData(userId);
      results.push(userData);
    } catch (error) {
      console.error(`处理用户 ${userId} 失败:`, error);
      results.push(null); // 或者选择跳过
    }
  }
  
  return results;
}

要验证这些代码的执行流程，可以使用以下测试代码：

// 测试异步函数执行顺序
async function testExecutionOrder() {
  console.log('开始执行');
  
  const result = await getUserWithOrders(123);
  console.log('最终结果:', result);
  
  console.log('执行完成');
}

// 调用测试函数
await testExecutionOrder();

通过这些示例可以看出，async-await不仅简化了异步代码的编写，更重要的是它让代码的执行流程更加清晰可读，便于维护和调试。

讨论

选择表情