Javascript 循环、异步函数和无头浏览器

Question

By playing with the new headless browser playwright from microsoft, I contsructed something that neither returns an error nore something else.

At this time, my ideas are over and I ask you for some hints to point me to my failure.

This piece of code should just start a multiple headless browser group asynchron. But the launch of the browser hangs and the application stays in an endless loop. I paste the code here, it is a simple nodejs script, to reproduce the behaviour.

Thanks for help & reading ;)

const playwright = require('playwright');

log('start playwright async');

let maxRunners = 1;
let running = 0;
let list = [1,2,3,4,5,6,7,8,9,0,11,12,13,14,15];

log('start job');

while (list.length > 0) {

    if (running < maxRunners) {
        log('runner started');
        running++;

        let entry = list[0];
        list.shift();

        log('start browser loop');
        for (const browserType of ['chromium', 'firefox', 'webkit']) {
            log('fire async');
            (async () => {
                log('loop next');
                log('launch: ', browserType);
                const browser = await playwright[browserType].launch({
                    headless: false
                });
                log(browserType, ' launched');
                const context = await browser.newContext();
                log('open new page');
                const page = await context.newPage('http://whatsmyuseragent.org/');
                log('page opened');
                log('make screenshot');
                await page.screenshot({path: `example-${browserType}.png`});
                log('screenshot made');
                log('close browser');
                await browser.close();
                log('browser closed');
                log('loop succeed');

                running--;
            })();
            log('end async');
        }
        log('end loop');

        if (running === 0 && list.length === 0) {
            log('job finished');
        }
    }
}

log('end playwright script');

function log(...msgs) {
    let date = new Date();
    let timeString = date.toISOString().substr(11, 8);
    let msg = '';
    for (let i in msgs) {
        msg += msgs[i];
    }

    console.log(timeString, ':', msg);
}

The output:

20:53:29 : start playwright async
20:53:29 : start job
20:53:29 : runner started
20:53:29 : start browser loop
20:53:29 : fire async
20:53:29 : loop next
20:53:29 : launch: chromium
20:53:29 : end async
20:53:29 : fire async
20:53:29 : loop next
20:53:29 : launch: firefox
20:53:29 : end async
20:53:29 : fire async
20:53:29 : loop next
20:53:29 : launch: webkit
20:53:29 : end async
20:53:29 : end loop

Answer 1

There are a few things you can improve in your code:

(async()=>{

  log('start playwright async');

  let maxRunners = 1;
  let running = 0;
  let list = [1,2,3,4,5,6,7,8,9,0,11,12,13,14,15];

  log('start job');
  const promises = [];
  while (list.length > 0) {

      if (running < maxRunners) {
          log('runner started');
          running++;

          let entry = list[0];
          list.shift();

          log('start browser loop');
          for (const browserType of ['chromium', 'firefox', 'webkit']) {
              log('fire async');
              promises.push((async () => {
                  log('loop next');
                  log('launch: ', browserType);
                  const browser = await playwright[browserType].launch({
                      headless: false
                  });
                  log(browserType, ' launched');
                  const context = await browser.newContext();
                  log('open new page');
                  const page = await context.newPage('http://whatsmyuseragent.org/');
                  log('page opened');
                  log('make screenshot');
                  await page.screenshot({path: `example-${browserType}.png`});
                  log('screenshot made');
                  log('close browser');
                  await browser.close();
                  log('browser closed');
                  log('loop succeed');

                  running--;
              })());
              log('end async');
          }
          log('end loop');
      } else {
        await Promise.all(promises);
      }
  }

  await Promise.all(promises);
  log('job finished');
  log('end playwright script');

  function log(...msgs) {
      let date = new Date();
      let timeString = date.toISOString().substr(11, 8);
      //date.setSeconds(45); // specify value for SECONDS here
      //var timeString = date.toISOString().substr(11, 8);
      let msg = '';
      for (let i in msgs) {
          msg += msgs[i];
      }

      console.log(timeString, ':', msg);
  }
})()

Let's wrap everything in an async function

(async()=>{
)();

Then, let's keep track of those tasks/promises:

const promises = [];
...
log('fire async');
promises.push((async () => {
})());

If you get out of workers you need to wait for them:

if (running < maxRunners) {
...
} else {
   await Promise.all(promises);
}

You should get running with this.

Answer 2

I do not believe that your async function is actually being evaluated.

Instead of calling your async function once per iteration, could you create a list of promises and use Promise.all() ?

Answer 3

Immediately-Invoked functions are executed without waiting to finish. For example:

 const promise = (time = 1, shouldThrowError = false) => new Promise((resolve, reject) => { timeInMs = time * 1000 setTimeout(()=>{ console.log(`Waited ${time} secs`) if (shouldThrowError) reject(new Error('Promise failed')) resolve(time) }, timeInMs) }); // Start excuting first async immediate function (async () => { try { console.log('starting first promise') await promise(1) console.log('finished first promise') } catch (error) { } })(); // This executes without finishing previous promise (async () => { try { console.log('starting second promise') await promise(1) console.log('finished second promise') } catch (error) { } })();

Change your block code:

        (async () => {
            log('loop next');
            ...
            log('loop succeed');

            running--;
        })();

to:

        const process = async () => {
            log('loop next');
            ...
            log('loop succeed');

            running--;
        };
        await process()

Also, in order to be able to use await, you should wrap all your code in an async function:

(async () => {
   ...all your code
})();

Answer 4

On the same line as per the excellent answer of @hardkoded:

In short use async functions with promises:

An basic example to illustrate the same point simply :

function delay() {
  return new Promise(resolve => setTimeout(resolve, 300));
}

async function delayedLog(item) {
  // notice that we can await a function
  // that returns a promise
  await delay();
  console.log(item);
}



async function processArray(array) {
  // map array to promises
  const promises = array.map(delayedLog);
  // wait until all promises are resolved
  await Promise.all(promises);
  console.log('Done!');
}

Try it , play with it to understand async behaviour in javaScript!