Javascript承诺和控制台日志？

debugcn 发表于 Dev

安德鲁·P。

我需要有关Javascript承诺的帮助。

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

我通过数组映射
将其转换为按钮，
检查文本，return null如果不是我需要的文本
我console.log是按钮文字-它向我显示了我需要的文字-一切都很好。
然后我增加 counter
并返回转换后的按钮。

之后，我过滤数组-检查是否为非null元素。我希望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

拖拉机53

async 函数返回一个承诺。

因此，buttons.map( async function)返回一个promise数组，其中的一些promise已实现null（通过null从map函数返回），而所有其他promise已通过返回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在伪造的elementHandle对象中，如果我已正确阅读文档，也不是一个保证，因此也不应该await在它之前要求它。

（编辑：感谢AndrewP。-必须将filter函数应用于所返回的数组await Promise.all(....）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。