从单参数函数应用程序到在节点中使用 async/await 的数组映射

From single argument function application to a mapping over an array using async/await in node

我是 await/async 现代 javascript 的新手。我知道一般有很多与此相关的问题,但在这个问题中,我正在专门寻找一个模板来思考如何采用单个函数并将其重写为数组上的映射。

我从 here 的一个非常简单的屏幕截图功能开始:

const puppeteer = require('puppeteer');

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

这只是一张截图。我想给它一个数组,让它截取多个屏幕截图。

对于我的应用程序,我使用 mypage 变量对此进行了微调:

const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser => {
  const mypage = 1
  const page = await browser.newPage();
  await page.goto(`https://localhost:9001/${mypage}`);
  await page.screenshot({path: `${mypage}.png`});
  await browser.close();
});

现在,我想通过 mypages = [1 ... 1000] 参数化此列表。在较旧的 javascript 中,使用 underscore.js,我会尝试类似的方法:

// define the function
function ss(mypage) {
  puppeteer.launch().then(async browser => {
    const page = await browser.newPage();
    await page.goto(`https://localhost:9001/${mypage}`);
    await page.screenshot({path: `${mypage}.png`});
    await browser.close();
});  
}

// populate the array of pages, eg make var mypages = [1,2,3...1000]
var mypages = [];
for (var i = 1; i <= 1000; i++) {
    mypages.push(i);
}

// call the screenshot function on each page in my pages.
_.each(mypages, ss)

我不清楚如何使用 async/await 来处理 mypages 中的每个页面(并且可能也更习惯地生成此数组)。

如何重写适用于 mypage = 1 的 puppeteer 函数,以映射整个 mypages 数组?

截图功能应该是异步的:

 async function screenshot(mypage) {
  const browser = await  puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(`https://localhost:9001/${mypage}`);
  await page.screenshot({path: `${mypage}.png`});
  await browser.close();
}

然后一张张截图:

 (async function() {
    for(let i = 0; i < 1000; i++)
      await screenshot(i);
 })();

或同时进行(不确定是否有效):

 Promise.all(Array.from({ length: 1000 }, (_, i) => screenshot(i)))
  .then(/*...*/);