在 puppeteer 解决特定事件的承诺

Question

发生特定事件后如何继续我的人偶代码？以一种同步的方式。例如，我有以下 'request' 事件代码：

await page.on('request', request => {
  if (request.resourceType() === 'xhr'){
    //do something
  }
});

我的人偶代码依赖于特定页面上的 AJAX 调用响应来填写表格。所以我想我必须以某种方式使请求事件起作用，以便在满足条件时解决承诺，以便稍后在代码中将其用作参考，但我希望能就该主题提供一些指导，因为我不是很熟悉使用异步代码，也没有 promises 或 puppeteer。谢谢！

Answer 1

您可以在进入页面之前在 Promise 中包裹 page.on('request') 并等待此 promise 被解决，如下所示：

const observedXhr = new Promise(resolve =>
  page.on('request', request => {
    if (request.resourceType() === "xhr") {
      resolve();
    }
    request.continue();
  })
);

// later in the code

await observedXhr;

// rest of the program after xhr is compleated

这里是完整的例子：

const puppeteer = require('puppeteer');

const html = `
<html>
  <body>
    <script>
      fetch('https://swapi.co/api/people/1/');
    </script>
  </body>
</html>`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setRequestInterception(true);

  const observedXhr = new Promise(resolve =>
    page.on('request', request => {
      if (request.resourceType() === "xhr") {
        resolve();
      }
      request.continue();
    })
  );

  await page.goto(`data:text/html,${html}`);

  console.log('before xhr');

  // await for resolved promise
  await observedXhr;

  console.log('after xhr');
  await browser.close();
})();

问题扩展了您的问题 - 它对您很有价值。

在 puppeteer 解决特定事件的承诺

Resolve promise on specific event at puppeteer

javascript

ajax

node.js

puppeteer