如何确保for循环中首个await无错完成后执行第二个？（Puppeteer场景）

这个问题我之前也碰到过，核心是循环结构和异步等待的配合出了问题。你需要确保循环的每一轮都严格等待前一轮的两个await操作完成（且第一个无错误），再进入下一轮。下面是具体的解决方案：

为什么你的循环会“跳过等待”？ #

大概率是你用了forEach/map这类不支持await的循环方法——这类方法会直接触发所有异步回调，不会等待每个回调里的Promise完成，导致循环“失控”。而普通的for/for...of循环是同步执行的，会等待每一轮里的await操作完成后再进入下一轮。

正确的实现代码示例 #

下面是符合你需求的Puppeteer代码，确保第一个await成功后才执行第二个，且每一轮都按顺序完成：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: false }); // 可开启headless方便调试
  const page = await browser.newPage();

  // 假设这是你要遍历的任务列表
  const taskList = ['page1', 'page2', 'page3'];

  for (const task of taskList) {
    try {
      // 第一步：执行第一个await操作，确保完成且无错误
      console.log(`开始处理任务：${task} - 第一步操作`);
      await firstTask(page, task);

      // 只有第一步成功，才执行第二个await操作
      console.log(`处理任务：${task} - 第二步操作`);
      await secondTask(page, task);

      console.log(`任务 ${task} 处理完成\n`);
    } catch (error) {
      console.error(`任务 ${task} 处理失败：`, error.message);
      // 可选：如果出错就终止整个循环，取消注释下面的break
      // break;
    }
  }

  await browser.close();
})();

// 模拟第一个Puppeteer异步操作（比如页面导航、元素检查）
async function firstTask(page, task) {
  await page.goto(`https://example.com/${task}`);
  
  // 这里可以加校验逻辑，确保操作成功，否则抛出错误
  const pageLoaded = await page.$('body > main');
  if (!pageLoaded) {
    throw new Error(`页面加载失败，未找到目标元素`);
  }
}

// 模拟第二个Puppeteer异步操作（比如数据提取、表单提交）
async function secondTask(page, task) {
  const pageTitle = await page.title();
  console.log(`任务 ${task} 的页面标题：${pageTitle}`);
  // 这里可以添加你的业务逻辑
}

关键要点说明 #

1. 选择正确的循环结构：用for...of或普通for循环（不要用forEach/map），这类循环会同步等待每一轮的await操作完成，再进入下一轮。
2. 用try/catch控制错误流程：第一个await抛出错误时，会直接进入catch块，跳过第二个await操作，你可以选择终止循环或继续处理下一个任务。
3. 给异步操作加校验：在第一个await操作里添加必要的检查（比如元素是否存在、页面是否加载完成），确保操作真的成功后才执行后续步骤。

进阶：添加重试逻辑（可选） #

如果第一个操作可能因为网络波动等原因失败，可以加个重试机制，避免直接终止任务：

async function firstTaskWithRetry(page, task, maxRetries = 3) {
  let lastError;
  for (let i = 0; i < maxRetries; i++) {
    try {
      await page.goto(`https://example.com/${task}`);
      const pageLoaded = await page.$('body > main');
      if (pageLoaded) return; // 成功则退出重试
    } catch (err) {
      lastError = err;
      await page.waitForTimeout(1500); // 重试前等待1.5秒
      console.log(`任务 ${task} 第${i+1}次重试...`);
    }
  }
  throw new Error(`重试${maxRetries}次后仍失败：${lastError.message}`);
}

把上面的firstTask替换成这个重试版本，就能提升鲁棒性啦。

内容的提问来源于stack exchange，提问作者Nicolas Vriak