Puppeteer中page.evaluate的可组合函数实现：如何封装重复的API初始化逻辑

这个问题我之前做类似的Puppeteer CLI工具时也碰到过！核心卡点就是Node和浏览器上下文的序列化限制——函数没法直接跨上下文传递，但其实我们换个思路就能完美解决：把初始化逻辑封装成一个通用函数，让用户只需要传入在浏览器上下文里执行的API操作逻辑，而不是直接传Node里的函数。

核心思路 #

我们不能直接把Node环境的函数传给浏览器，但可以把操作逻辑转换成字符串（这是可序列化的），在浏览器上下文里再把字符串转回函数执行。同时利用page.evaluate本身支持返回序列化数据的特性，替代page.exposeFunction来回传结果，简化整个流程。

封装后的通用函数实现 #

下面是我常用的封装方式，把重复的初始化逻辑全部抽离：

async function withAppApi(input, apiOperation) {
  // 初始化浏览器和页面（你的createBrowser逻辑）
  const { page, browser } = await createBrowser();
  
  try {
    // 在浏览器上下文内完成API初始化+执行自定义操作
    const result = await page.evaluate(async (input, operationStr) => {
      // --- 这里是复用的初始化逻辑 ---
      const requestEvent = new CustomEvent('requestAppApi', { detail: {} });
      window.dispatchEvent(requestEvent);
      const api = requestEvent.detail.api;
      
      // 把传递过来的操作字符串转为可执行函数
      const operation = new Function('api', 'input', operationStr);
      // 执行操作并返回结果（会自动序列化传回Node）
      return await operation(api, input);
    }, input, apiOperation.toString());
    
    return result;
  } finally {
    // 无论成功失败都关闭浏览器，避免资源泄漏
    await browser.close();
  }
}

如何使用这个封装函数 #

现在你只需要专注于编写具体的API调用逻辑，完全不用管初始化步骤：

// 示例1：调用单个API函数
const simpleResult = await withAppApi('test-input', function(api, input) {
  return api.arbitraryFunction(input);
});

// 示例2：执行复杂的多步骤操作（支持异步）
const complexResult = await withAppApi({ userId: 456 }, async function(api, input) {
  const user = await api.fetchUser(input.userId);
  const userStats = await api.getUserMetrics(user.id);
  return {
    user: user.name,
    totalScore: userStats.score
  };
});

为什么这个方案可行？ #

1. 序列化兼容：我们把操作函数转换成字符串传递，字符串是JSON可序列化的，能顺利通过Puppeteer的上下文通信通道。
2. 逻辑隔离但复用：初始化API的代码完全封装在withAppApi里，每次调用都自动执行，不用重复编写。
3. 简化数据传递：page.evaluate会自动把浏览器里返回的序列化数据传回Node环境，不用再通过exposeFunction手动处理数据回调。

进阶优化：复用浏览器实例 #

如果你的CLI工具需要频繁调用API，每次创建/关闭浏览器会很慢，可以扩展封装函数支持复用浏览器实例：

async function withAppApi(input, apiOperation, page) {
  let shouldCloseBrowser = false;
  // 如果没有传入page，就创建新的浏览器实例
  if (!page) {
    const { page: newPage, browser } = await createBrowser();
    page = newPage;
    shouldCloseBrowser = true;
  }
  
  try {
    const result = await page.evaluate(async (input, operationStr) => {
      const requestEvent = new CustomEvent('requestAppApi', { detail: {} });
      window.dispatchEvent(requestEvent);
      const api = requestEvent.detail.api;
      
      const operation = new Function('api', 'input', operationStr);
      return await operation(api, input);
    }, input, apiOperation.toString());
    
    return result;
  } finally {
    // 只有自己创建的浏览器实例才关闭
    if (shouldCloseBrowser) {
      await page.browser().close();
    }
  }
}

// 复用浏览器的示例
const { page, browser } = await createBrowser();
try {
  const result1 = await withAppApi('input1', (api, input) => api.funcA(input), page);
  const result2 = await withAppApi('input2', (api, input) => api.funcB(input), page);
} finally {
  await browser.close();
}

这样既能保证初始化逻辑的复用，又能根据场景选择是否复用浏览器，平衡性能和资源占用。

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