使用Puppeteer遍历URL列表时仅加载单个页面的问题解决方法

我看了你的代码，问题主要出在几个异步操作的逻辑和变量声明上，咱们一步步来修正：

核心问题点 #

• 你在循环内部重复声明了const page，这会覆盖外部的page变量，导致异步流程混乱，后续的页面加载操作可能因为变量冲突无法正常执行
• page.goto()本身就已经包含了等待导航完成的逻辑，之后再调用await page.waitForNavigation()会让程序陷入无限等待（因为导航已经完成了），直接导致循环卡在第一个有效URL上
• 没有处理页面加载可能出现的错误，一旦某个URL加载失败，整个循环就会终止

修正后的代码 #

async function main() { 
  const browser = await puppeteer.launch({headless: false}); 
  const mainPage = await browser.newPage(); 
  await mainPage.setViewport({width: 1200, height: 720}); 

  // 加载初始页面并获取所有链接
  await mainPage.goto('https://s23.a2zinc.net/clients/acmedia/americancoatingsshow2022/Public/Exhibitors.aspx?Index=All#', { waitUntil: 'networkidle0' }); 
  const hrefs = await mainPage.$$eval('a', as => as.map(a => a.href)); 

  // 去重处理，避免重复加载相同的eBooth页面
  const uniqueEBoothUrls = [...new Set(hrefs.filter(url => url.includes('eBooth.aspx')))];

  for (const url of uniqueEBoothUrls) { 
    console.log(`正在加载页面: ${url}`);
    try {
      // 创建新页面，使用不同的变量名避免覆盖
      const detailPage = await browser.newPage(); 
      // 用goto的waitUntil确保页面加载完成，不需要额外的waitForNavigation
      await detailPage.goto(url, { waitUntil: 'networkidle0', timeout: 30000 }); 
      
      // 这里可以添加你需要对每个页面执行的操作，比如提取数据等
      
      // 操作完成后关闭页面，节省资源
      await detailPage.close();
    } catch (error) {
      console.error(`加载页面 ${url} 失败:`, error.message);
      // 即使单个页面加载失败，继续处理下一个
      continue;
    }
  } 

  // 所有页面处理完成后关闭浏览器
  await browser.close();
}

main();

关键修改说明 #

1. 变量名区分：把初始页面命名为mainPage，循环内的页面命名为detailPage，避免变量覆盖导致的异步流程问题
2. 移除多余的waitForNavigation：page.goto()的waitUntil参数已经能确保页面加载完成，额外的waitForNavigation会导致程序卡住
3. 链接去重：用Set过滤掉重复的eBooth.aspx链接，避免重复加载相同页面
4. 错误处理：添加try/catch块，单个页面加载失败时不会中断整个循环，同时输出错误信息便于排查
5. 及时关闭页面：处理完每个详情页后关闭它，避免浏览器打开过多页面导致内存占用过高甚至崩溃
6. 添加超时：给goto设置timeout，防止某个页面加载过久卡住程序

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