map function vs for loop puppeteer package in nodejs-CodePudding

i´ve been trying puppetter package in nodejs, and when i use data function works pretty different in contrast to for loop

here is what im talking about:

map function

data.map(async(info) =>{
        let browser = await puppeteer.launch({ ignoreHTTPSErrors: true });
        let page = await browser.newPage();
        await page.goto(info.url, { waitUntil: "networkidle2" })
        await page.screenshot({ path: info.src })

        
        await browser.close();

    })

    console.log("map function completed");

this is the input of the map function:

map function completed

first screenshot saved

second screenshot saved

For loop is working like this:

let browser = await puppeteer.launch({ ignoreHTTPSErrors: true });
let page = await browser.newPage();

for (let i = 0; i<=data.length-1; i  ) {
console.log(data[i].url);
await page.goto(data[i].url, { waitUntil: "networkidle2" })
await page.screenshot({ path: data[i].src })

}
await browser.close();
console.log("for loop completed");

this is the input of the for loop:

first screenshot saved

second screenshot saved

for loop completed

Why is this happening? i thought they work in the same way. I would like if somebody explain why is this.

CodePudding user response：

if you want to make it work in the same way you have to change your first code in this way

const promises = data.map(async(info) =>{
        let browser = await puppeteer.launch({ ignoreHTTPSErrors: true });
        let page = await browser.newPage();
        await page.goto(info.url, { waitUntil: "networkidle2" })
        await page.screenshot({ path: info.src })

        
        await browser.close();

    })

await Promise.all(promises)
console.log("map function completed");

when you use map and async your items are transformed into promises and they will execute in parallel (in your case that's not true because your are using puppeteer) so you have to await that all of them are resolved to log the success message.

Your second code is more synchronous because it's all wrapper in the same function and every await are executed one after one

CodePudding user response：

In the first case, because you use an asynchronous function within the map function, the first synchronous console.log() function works. Because normally asynchronous operation works after synchronous operation.

In the second case, thefor loop, top-level await, and the console.log() function work sequentially because they are synchronous.