如何从 async/await 函数中获取 return 值？

Question

使用 puppeteer 将来自 2 个不同网页的数据收集到数组中以供以后比较。但是，程序在继续之前不会等待 returned 数组。

async function go(){
  try{
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('www.webpage.com');

    const tds = await page.$$('td');
    const data = [];
    for (let i = 0; i < tds.length; i++){
      const td = tds[i];
      const tdcontent = await page.evaluate(td => td.innerText, td);
      if (tdcontent.length > 5) {
        data[i] = {"content": tdcontent};
      }
    }
    return data;
  } catch (e) {
     console.log(e);
  }
};

(async function main(){
  const returnedData = await go();
  console.log(returnedData.length);
})();

return data.length 是 0。 nodejs 新手，async 编程结构。我认为这是因为 .length 在 data 被 returned 之前记录？

我如何 return 可以操纵数据并完成比较的方式？

Answer 1

首先，您在 page.$$() 函数中缺少一个撇号。您应该将其更改为：

const tds = await page.$$('td');

接下来，您试图将一个不存在的变量传递给 page.evaluate()。您可以通过传递 tds[i] 而不是 td:

来解决此问题

const tdcontent = await page.evaluate(td => td.innerText, tds[i]);

您的最终结果应如下所示：

const go = async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto('www.webpage.com');

    const tds  = await page.$$('td');
    const data = [];

    for (let i = 0; i < tds.length; i++) {
      const tdcontent = await page.evaluate(td => td.innerText, tds[i]);

      if (tdcontent.length > 5) {
        data[i] = {
          content: tdcontent,
        };
      }
    }

    return data;
  } catch (error) {
    console.log(error);
  }
};

(async function main() {
  const returnedData = await go();

  console.log(returnedData.length);
})();

如果问题仍然存在，您可能需要使用 page.goto( ... , { waitUntil: 'networkidle0' }), or wait until the element in question has been added to the DOM using page.waitForSelector():

等待页面完全加载

await page.goto('www.webpage.com' , {
  waitUntil: 'networkidle0',
});
// ...
await page.waitForSelector('td');

Answer 2

在这种情况下，我尽量不使用 page.$$。相反，我使用 document.querySelectorAll 并通过元素进行映射并提取文本。

修改后的代码如下：

const getTdData = async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto("http://example.com");

    return page.evaluate(() => {
      // get all td elements
      const tdList = [...document.querySelectorAll("td")]; 
      return tdList.map(element => ({ content: element.textContent }));
    });
  } catch (e) {
    console.log(e);
  }
};

(async function main() {
  const returnedData = await getTdData();
  console.log(returnedData.length);
})();

如何从 async/await 函数中获取 return 值？

How to return value from async/await function?

node.js

ecmascript-6

async-await

puppeteer

ecmascript-2017