节点 - 在继续之前等待地图完成

Question

我在我的节点应用程序中有这个文件，它应该使用cheerio从他们的官方网站获取有关每个联赛冠军的一些数据，并且一切顺利但是当我将所有数据添加到我的数组然后将其作为json数据返回时写入函数在地图完成之前运行，所以我只是创建一个 json 文件，其中包含一个空数组：

const request = require('request');
const cheerio = require('cheerio');
const fs = require('fs');

const champions = fs.readFileSync('champions.json');
const championsObj = JSON.parse(champions);

let champsList = [];

championsObj.map(champ => {
  request(champ.href, (err, res, html) => {
    if (!err && res.statusCode == 200) {
      const $ = cheerio.load(html);

      const champName = $('.style__Title-sc-14gxj1e-3 span').text();

      let skins = [];

      const skinsList = $('.style__CarouselItemText-sc-1tlyqoa-16').each(
        (i, el) => {
          const skinName = $(el).text();
          skins.push = skinName;
        }
      );

      const champion = {
        champName,
        skins
      };

      console.log(champion);

      champsList.push = champion;
    }
  });
});

const jsonContent = JSON.stringify(champsList);

fs.writeFile('champions2.json', jsonContent, 'utf8', function(err) {
  if (err) {
    console.log(err);
  }
});

我不是节点专家，但我尝试使用 Promise 但它没有用，但我不确定我是否用错了它。

更新 #1：使用 axios

championsObj.map(async champ => {
  const html = await axios.get(champ.href);
  const $ = await cheerio.load(html);

  const champName = $('.style__Title-sc-14gxj1e-3 span').text();

  let skins = [];

  const skinsList = $('.style__CarouselItemText-sc-1tlyqoa-16').each(
    (i, el) => {
      const skinName = $(el).text();
      skins.push = skinName;
    }
  );

  const champion = {
    champName,
    skins
  };

  console.log(champion);

  champsList.push = champion;
});

Answer 1

你可以使用await Promise.all(<array>.map(async () => {...}). 它不需要任何额外的依赖项。但是，您不能保证异步迭代的顺序（以正确的顺序开始所有迭代，但不能保证迭代的结束）。