Javascript Promise 和控制台日志？

Question

我需要有关 Javascript Promises 的帮助。

-buttons是一个节点列表。我从puppeteer（API）得到它。
我需要一个带有特定文本的按钮列表。
我转换buttons为真实按钮数组（page.evaluate API 链接）：

• 我通过数组映射，

• 将其转换为按钮，

• 检查文本，return null如果文本不是我需要的

• 我console.log是按钮文本 - 它向我显示了我需要的文本 - 所以一切都很好。

• 然后我增加counter

• 并返回转换后的按钮。

之后我过滤数组 - 检查非空元素。我希望goodButtons它只包含我需要的按钮 - 带有正确的文本。

但输出是

buttons 328

button: Confirm

button: Confirm

... 100 lines of "good button text" in total

button: Confirm

counter 0

good buttons 328

所以计数器不会增加一次（或者async/await东西有一个技巧console.log，我错过了？）

但似乎goodButtons数组包含所有按钮，尽管我在控制台中登录的按钮文本似乎是正确的。

编码

const buttons = await page.$$('button[type="button"]')

console.log('buttons', await buttons.length)

let counter = 0;

let goodButtons = await buttons.map(async button => {

    const btnText = await page.evaluate(btn => btn.innerText, button);

    if (!['Confirm'].includes(btnText)) return null

    counter++

    console.log('button: ', btnText)

    return await button

}).filter(button => button !== null)

console.log('counter', counter)

console.log('good buttons', await goodButtons.length)

UPD（在 Felix Kling 评论之后）

let counter = 0;

let goodButtons = buttons.map(async button => {

        const btnText = await page.evaluate(btn => btn.innerText, button);

        if (!['Confirm', 'Подтвердить'].includes(btnText)) return null

        counter++

        return await button

})

goodButtons = await Promise.all(goodButtons)

goodButtons = goodButtons.filter(button => button !== null)

输出

buttons 328

counter 149

good buttons 328

Answer 1

let counter = 0;let goodButtons = buttons.map(async button => {        const btnText = await page.evaluate(btn => btn.innerText, button);        if (!['Confirm', 'Подтвердить'].includes(btnText)) return null        counter++        return await button})goodButtons = await Promise.all(goodButtons)goodButtons = goodButtons.filter(button => button !== null)输出buttons 328counter 149good buttons 149

Answer 2

async函数返回一个承诺。因此buttons.map( async function)返回一个promise数组，其中一些已经实现null（通过null从map函数返回），而所有其他的已经通过返回button提供给map函数的元素句柄来实现。您可以使用Promise.all将 Promise 数组转换为可以从中过滤出null值的数组：let counter = 0;let goodButtons =  (await Promise.all(    buttons.map(async button => {        const btnText = await page.evaluate(btn => btn.innerText, button);        if (!['Confirm', 'Подтвердить'].includes(btnText)) return null        counter++        return button   }))   .filter(button => button !== null)请注意，length数组的属性是一个数字，因此不需要await它。同样button，在 puppeteer elementHandle 对象中，如果我正确阅读了文档，这不是一个承诺，所以它也不应该await在它之前要求。（编辑：感谢 Andrew P. - filter 函数必须应用于返回的数组await Promise.all(....）