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

Question

我的节点应用程序中有这个文件，它应该使用 cheerio 从他们的官方网站上为我获取有关每个联赛冠军的一些数据，一切都很好，但是当我将所有数据添加到我的数组时 return 它作为 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

您的问题是 Array#map 不等待 request 调用等异步函数完成后再继续。我推荐 p-map 和 got。为了保证完美的执行顺序，我也推荐异步读写文件。

const got = require('got');
const pMap = require('p-map');
const cheerio = require('cheerio');
const fs = require('fs').promises;

(async () => {
    const champions = JSON.parse(await fs.readFile('champions.json', 'utf8'));

    let champsList = await pMap(champions, async champ => {
        const {
            body
        } = await got(champ.href)

        const $ = cheerio.load(body);

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

        let skins = [];

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

        const champion = {
            champName,
            skins
        };

        console.log(champion);

        return champion;
    })

    await fs.writeFile('champions2.json', JSON.stringify(champsList));
})();

Answer 2

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

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

Node - wait for map to finish before continuing

javascript

node.js

promise

es6-promise