Page.waitForResponse的竞态条件与最佳实践

虽然官方文档中没有明确且详细的阐述过 Page.waitForResponse 的竞态条件（Race Condition），但是从官方的代码示例、github issue 讨论及实际使用中，我们会遇到 时间序列竞态 (Temporal Race Condition) 和匹配条件竞态 (Matching Race Condition) 两种情况。

1. 时间序列竞态 (Temporal Race Condition)

1.1. 竞态条件原理

事件监听器的本质： waitForResponse 是一个事件监听器，它只能在被注册之后，才能监听到之后发生的事件。
请求的不可预测性： 像 page.click()、 page.goto() 或 page.evaluate() 这样的操作，其触发的网络请求的延迟和速度是不确定的。
竞态窗口： 在您执行触发操作的代码行和 waitForResponse 监听器在事件循环中被实际注册的行之间，存在一个极短的时间窗口。如果网络请求在这个窗口期内瞬间完成，响应就会因为"在监听器准备好之前就被发出并完成而导致无法被 waitForResponse 捕获，最终导致 waitForResponse 等待超时"；

javascript 复制代码

// ❌ 危险的顺序：竞态条件
await page.click('#submit-button'); // 1. 先触发请求
// 在这里，请求可能已经完成，但监听器还未建立
const response = await page.waitForResponse( // 2. 后设置监听
  r => r.url().includes('/api/submit')
); // 可能永远等待不到响应

1.2. 正确的使用姿势

javascript 复制代码

// ✅ 正确的顺序：先建立监听
const responsePromise = page.waitForResponse( // 1. 先设置监听
  r => r.url().includes('/api/submit')
);
await page.click('#submit-button'); // 2. 再触发请求
const response = await responsePromise; // 3. 等待结果

2. 匹配条件竞态 (Matching Race Condition)

2.1. 竞态条件原理

竞态窗口： waitForResponse 接受一个函数作为参数，这个函数用于判断 HttpResponse 对象是否符合预期。如果这个函数的判断逻辑过于简单，或者匹配条件过于宽泛，就会导致匹配到多个响应，而 waitForResponse 只会返回第一个匹配的响应。

ini 复制代码

// 模糊匹配可能捕获到错误的响应
const response = await page.waitForResponse(
  r => r.url().includes('api/data') // 过于宽泛的匹配条件
);

// 可能匹配到的响应：
// 1. https://api.example.com/data?source=internal (非预期的)
// 2. https://api.example.com/data?source=user (期望的)
// 3. https://api.example.com/data?cache=refresh (非预期的)

1.2. 正确的使用姿势

ini 复制代码

// 使用更精确的匹配条件：比如使用很多条件集合匹配
const response = await page.waitForResponse(response => {
  // 精确URL匹配
  const urlMatch = response.url() === 'https://exact-api-url.com/submit';
  // 检查请求方法
  const methodMatch = response.request().method() === 'POST';
  // 检查状态码
  const statusMatch = response.status() === 201;
  // 甚至可以检查请求头或请求体
  const hasAuthHeader = response.request().headers()['authorization'] !== undefined;

  return urlMatch && methodMatch && statusMatch && hasAuthHeader;
});

// 或者使用唯一标识符
const requestId = generateUniqueId();
await page.evaluate((id) => {
  fetch('/api/submit', {
    headers: { 'X-Request-ID': id }
  });
}, requestId);

const response = await page.waitForResponse(async (r) => {
  return r.request().headers()['x-request-id'] === requestId;
});

综上就是 page.waitForResponse 的两种竞态条件问题，这两种问题都需要开发者注意，并且，它们属于不同性质的竞态条件，需要不同的解决方案。优秀的 Puppeteer 代码应该同时处理好这两个方面，以确保代码的正确性和稳定性。

最后，重点提及一下：在 waitForResponse 的使用过程中，出于性能考虑，请不要把 response.json() 这种繁重的操作放到判断函数中，因为这会导致判断性能下降，一般最佳实践是当 Node.js 层获取到符合条件的 HttpResponse 对象后，再进行 json() 等高开销的解析操作：

javascript 复制代码

// ✅ 推荐的写法：先快速过滤，再按需读取
const response = await page.waitForResponse(resp => 
  resp.status() === 200 && 
    resp.url().includes('api/data')
);

// 只有匹配的响应才读取body
const body = await response.json();
if (body.success) {
  // 处理成功的响应
}