Puppeteer中如何将response对象传递给外部回调函数？

问题根因 #

你代码的问题出在事件回调的注册逻辑上：page.on('response', sniffer(response))会立即执行sniffer函数，把当前作用域下未定义的response作为参数传入，拿到执行结果后再注册给response事件，完全不符合事件回调的使用逻辑。
事件触发时Puppeteer会自动把response对象作为参数传给你注册的回调函数，你只需要把函数本身作为参数传给page.on即可。

修复代码 #

main.js 修改 #

const puppeteer = require('puppeteer');
// 解构导出的sniffer方法，也可以直接用sniffer.sniffer调用
const { sniffer } = require('./sniffer.js')

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com/')

  // 直接传入函数引用即可，事件触发时会自动把response作为参数传入
  page.on('response', sniffer);
  
  await browser.close()
})()

sniffer.js （无需改动，建议增加错误捕获避免异常崩溃） #

async function sniffResponse (response) {
  try {
    // 原有sniffer处理逻辑
    console.log('拦截到响应：', response.url())
  } catch (err) {
    console.error('响应处理出错：', err)
  }
}

module.exports.sniffer = sniffResponse;

扩展场景：需要给回调传自定义参数 #

如果你的sniffer逻辑需要用到当前page实例、匹配规则等额外参数，可以用高阶函数封装：

调整后的sniffer.js #

// 先接收自定义参数，返回实际的事件回调函数
function createSniffer(config) {
  return async function sniffResponse (response) {
    try {
      // 可直接使用外部传入的config参数
      if (response.url().includes(config.matchKey)) {
        console.log('匹配到目标响应：', response.url())
      }
    } catch (err) {
      console.error('响应处理出错：', err)
    }
  }
}

module.exports.createSniffer = createSniffer;

对应main.js的调用 #

const puppeteer = require('puppeteer');
const { createSniffer } = require('./sniffer.js')

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com/')

  // 传入自定义配置生成回调函数再注册
  const sniffer = createSniffer({ matchKey: 'google' })
  page.on('response', sniffer);
  
  await browser.close()
})()

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