如何修改Puppeteer代码获取指定HTTP请求的JSON响应？

嘿，这事儿不难！要直接捕获页面里最后一个HTTP请求的JSON响应，我们可以利用Puppeteer的网络监听API来实现。我帮你修改了代码，同时把关键逻辑拆解清楚：

修改后的完整代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ 
    headless: false, 
    args: ['--user-agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3312.0 Safari/537.36"'] 
  });
  const page = await browser.newPage();

  // 用来存储最后一个符合条件的JSON响应
  let lastJsonResponse = null;

  // 监听所有网络响应事件
  page.on('response', async (response) => {
    // 筛选出JSON格式的响应（你也可以根据URL关键词进一步缩小范围）
    if (response.headers()['content-type']?.includes('application/json')) {
      try {
        // 把响应解析成JSON对象
        const jsonData = await response.json();
        // 更新为最新的JSON响应，确保最后拿到的是最后一个请求的结果
        lastJsonResponse = jsonData;
      } catch (err) {
        // 忽略那些标了JSON但实际解析失败的响应
        console.log('JSON解析失败:', err.message);
      }
    }
  });

  // 移除了重复的page.goto调用，优化代码
  await page.goto('https://www.genecards.org/cgi-bin/carddisp.pl?gene=BSCL2');

  const linkHandlers = await page.$x("//div[@id='enhancers']//a[@data-track-event='Table See-All']");
  if (linkHandlers.length > 0) {
    await linkHandlers[0].click();
    
    // 这里可以选两种等待方式：
    // 方式1：硬等一段时间（适合测试，不够精准）
    await page.waitForTimeout(2000);
    
    // 方式2：精准等待目标响应出现（推荐，更可靠）
    // const targetResponse = await page.waitForResponse(res => 
    //   res.headers()['content-type']?.includes('application/json')
    // );
    // lastJsonResponse = await targetResponse.json();
  } else {
    throw new Error("未找到目标链接");
  }

  // 输出最终捕获到的JSON响应
  if (lastJsonResponse) {
    console.log('最后一个JSON响应:', JSON.stringify(lastJsonResponse, null, 2));
  } else {
    console.log('未捕获到任何JSON响应');
  }

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

关键改动说明 #

• 添加网络响应监听：通过page.on('response')实时捕获所有网络请求的响应，确保不会漏掉任何请求
• 筛选JSON响应：通过检查响应的content-type头，只处理JSON格式的响应，过滤掉图片、CSS等无关资源
• 存储最新响应：用变量lastJsonResponse不断更新为最新的JSON响应，保证最后拿到的是最后一个请求的结果
• 优化等待逻辑：提供了两种等待方式，硬等适合快速测试，而page.waitForResponse是更可靠的精准等待方式，推荐在生产代码中使用
• 移除冗余代码：删掉了重复的page.goto调用，让代码更简洁

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