嵌套等待无法正常工作 Puppeteer答案

【问题标题】：Nested awaits don't work properly Puppeteer嵌套等待无法正常工作 Puppeteer
【发布时间】：2021-02-20 08:16:06
【问题描述】：

在这段代码中，我试图过滤掉 ElementHandle 数组的一部分。我检查它是否有效的方法是打印最终过滤数组的长度。应该是 4，而不是 30。

const ar = await page.$$("li[class*=react-job-listing]");
const shortArray = Array.from(ar).filter(async (el)=> {
    console.log((await (await el.getProperty("innerText")).jsonValue()).includes("Easy Apply"));
    return (await (await el.getProperty("innerText")).jsonValue()).includes("Easy Apply");

});
//console.log((await (await ar[0].getProperty("innerText")).jsonValue()).includes("Easy Apply"));
console.log(shortArray.length);
console.log('hello');

不幸的是，这就是结果。

30
hello
false
false
false
false
true
false
false
true
false
false
false
false
false
false
false
false
true
false
false
false
false
false
false
false
false
false
false
false
true
false

长度的控制台日志出现在过滤器执行之前，它应该是最后一件事。

脚本似乎没有等待等待。这一定是由于多个嵌套等待。但我不知道如何解决它。

我知道这真的很难看。但是有一些原因我现在不能使用 page.evaluate 和 DOM 函数。请暂时看一下。

【问题讨论】：

Array.from(ar).filter 没有返回 Promise ......所以......你为什么要等待呢？而大多数其他await 也用于非承诺 - 你可能需要await Promise.all(Array.from(ar).filter .... 等待来自内部的任何承诺
Array.includes() 没有返回 Promise ......所以......你为什么要等待呢？
我不是在等待 String:includes()，而是在等待 jsonValue()。
@JaromandaX 你是对的，我摆脱了它。我想看看它是否有帮助。它没有...
谁在 console.log 函数中使用 await ？你可以试试await (your codes).then(console.log(filter); return value;)

标签： javascript puppeteer

【解决方案1】：

这不是傀儡师的错。异步函数返回 Promise，因此在 Array.from(ar).filter() 中，每个 callbak 都返回 thruthy 值，并且没有过滤掉任何内容。使用for..of 循环进行异步操作更简单、更安全：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <p>foo 1</p>
      <p>foo 2</p>
      <p>bar 1</p>
      <p>bar 2</p>
    </body>
  </html>`;

try {
  const [page] = await browser.pages();

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

  const ar = await page.$$("p");
  const shortArray = [];
  for (const element of ar) {
    const text = await (await element.getProperty("innerText")).jsonValue();
    console.log(text, text.includes("foo"));
    if (text.includes("foo")) shortArray.push(element);
  }
  console.log(shortArray.length);
  console.log('hello');

} catch(err) { console.error(err); } finally { await browser.close(); }

foo 1 true
foo 2 true
bar 1 false
bar 2 false
2
hello

【讨论】：