如何在Puppeteer请求中添加POST数据模拟表单提交？

我正尝试使用Puppeteer爬取网页，进入站点后需要跳转多个页面，要在分页数据页提交POST数据模拟表单提交。

Puppeteer的请求拦截事件仅可注册一次，所以如果直接写死POST逻辑，所有请求都会被强制携带POST数据，会出现请求已处理的报错。

我没找到太多相关的参考资料，最终采用了如下实现方案：

• 创建一个每次请求触发时都会被调用的回调函数
• 检查该函数的自定义属性，判断是否存在待提交的POST配置对象：
  • 如果存在该对象，就将POST数据嵌入当前请求，发送完成后删除该属性
  • 如果不存在该属性，直接放行请求即可

const openConnection = async () => {
  const browser = await puppeteer.launch({
    headless: true,
    args: ["--no-sandbox"],
  });
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on("request", requestPost);
  return { browser, page };
};

const requestPost = async (req) => {
  if (typeof requestPost.data === "object") {
    requestPost.data.headers = { ...req.headers(), ...requestPost.data.headers };
    await req.continue(requestPost.data);
    delete requestPost.data;
  } else {
    await req.continue();
  }
};

const getData = async (m, y, p, l) => {
  const { browser, page } = await openConnection();
  let data = [];
  let pagina = p;
  do {
    /* 只要给requestPost挂上这个data属性，接下来调用page.goto()触发的请求就会自动带上这里配置的参数 */
    requestPost.data = {
      method: "POST",
      postData: `&pagina=${pagina}&mes=${m}&year=${y}`,
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
    };
    await page.goto("https://url.com/info.cgi", { waitUntil: "networkidle2" });
    // 这里处理返回的页面数据，追加到data数组中
    // data = data.push();
    pagina++;
  } while (pagina < p + l);
  await closeConnection(page, browser);
  return data;
};

内容的提问来源于stack exchange，提问作者Juan Rodríguez