1

At the start of the Puppeteer tutorial, it says to do this:

const puppeteer = require('puppeteer');
(async () => 
{
    await page.goto('https://example.com');
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await browser.close();
})();

This seems odd to me as the whole thing is wrapped inside an asynchronous function. What if I want to wait until this finishes to continue?

Edit - Why this seems odd to me:
What if all my code relied on the browser, i.e., there is nothing I can do outside this async function. Then my code would look like this:

//nothing up here
(async () => 
{
    //EVERYTHING is in here
})();
//nothing down here

This seems weird because I might as well do everything synchronously instead of wrapping my entire program in an async function.

Jaden Chaca
  • 77
  • 7
  • well, you can't, but the whole point of `async / await` is that you could continue before `browser.close` with wathever you want to scrape from `page`, because at that time `page` will be ready to be manipulated. However, the `async` IFFE itself will return a promise, on which you could connect a nice promise chain, if that is your question – Icepickle Aug 25 '19 at 00:43
  • to define a page you need a browser first ... the same way you need to open your browser first than open a page/tab inside it ... therefore you need to run them synchronously and `async/await` is the way to do that ... perhaps `async ` keyword is confusing you – max Aug 26 '19 at 15:53

1 Answers1

2

Reason for the async function

You need to wrap the code containing await instructions inside an async function for backwards compatibility reasons. Before ES7, you could use the word await as variable or function name, meaning this was valid code:

var await = 123;
console.log(await);

To not mess with existing code, the await keyword only works inside of async functions, meaning to write code like await page.goto(..) you have to put it inside an async function like the one you are using.

Waiting for the code to finish

To wait until the code has finished, you can just continue after the last await statement like this:

(async () => {
    // ...
    await browser.close();

    // continue with more code
})();
Thomas Dondorf
  • 23,416
  • 6
  • 84
  • 105
  • But why does await have to appear in an async function? is it because js is single threaded? – Jaden Chaca Aug 25 '19 at 19:06
  • 1
    @JadenChaca I tried to answer that above. What is unclear? As I explained in my answer, it is for backwards compatibility reasons. – Thomas Dondorf Aug 25 '19 at 19:36
  • Are you sure that's the reason? That seems kind of stupid. I thought it had something to do with threading. Oh well, thanks – Jaden Chaca Aug 26 '19 at 17:21
  • @JadenChaca Found a [similar question/answer](https://stackoverflow.com/q/44184006/5627599), confirming it. In general `async`/`await` just wraps [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). It does not change the way threading works. – Thomas Dondorf Aug 26 '19 at 17:31