嵌套的Promises - Map函数中的map函数

Question

基本上，我有一个很大的数组，其中的对象值如下：

[{
  - Champion Name
  - [Another Array with Skins information]
}]

所以我想做的是在第二个数组中运行一个map函数，以获得每个皮肤的值，所以我做的是。

const got = require('got');
const cheerio = require('cheerio');
const fs = require('fs').promises;

const getSkinData = async champSkins => {
  const data = JSON.parse(champSkins);

  const handleMap = skin => {
    return new Promise(async (resolve, reject) => {
      try {
        const name = skin.split(' ').join('_');

        const { body } = await got(`https://lol.gamepedia.com/${name}`);

        const $ = cheerio.load(body);

        const skinLink = $('.InfoboxSkin img').attr('src') || '';

        const skinInfo = {
          skinName: skin,
          skinLink
        };

        resolve(skinInfo);
      } catch (err) {
        console.error(err.message);
      }
    });
  };

  Promise.all(
    data.map(async ({ skins }) => {
      return Promise.all(
        skins.map(skin => {
          return handleMap(skin);
        })
      );
    })
  ).then(data => console.log(data));
};

module.exports = getSkinData;

但它实际上并不起作用，我无法访问数据，最后promise中的console.log甚至没有运行。

你知道怎么做吗，或者有更好的方法吗？

编辑#1

基本上，每个冠军的“皮肤”是一个字符串数组，如下所示：

[ 'Aatrox',          
  'Justicar Aatrox', 
  'Mecha Aatrox',    
  'Sea Hunter Aatrox'
  'Blood Moon Aatrox'
  'Blood Moon Aatrox 
  'Victorious Aatrox' ]

[ 'Ahri',            
  'Dynasty Ahri',    
  'Midnight Ahri',   
  'Foxfire Ahri',    
  'Popstar Ahri',    
  'Challenger Ahri', 
  'Academy Ahri',    
  'Arcade Ahri',     
  'Star Guardian Ahri
  'K/DA Ahri',       
  'K/DA Ahri Prestige
  'Elderwood Ahri' ] 

皮肤就是数组的每一个值

从抓取中返回的值就是每个皮肤的链接

​

​

Answer 1

const getSkinData = async champSkins => {
    const data = JSON.parse(champSkins);
    // async that returns promise is a double promise, you only need async
    const handleMap = async skin => {
        try {
            const name = skin.split(" ").join("_");
            const { body } = await got(`https://lol.gamepedia.com/${name}`);
            const $ = cheerio.load(body);
            const skinLink = $(".InfoboxSkin img").attr("src") || "";
            const skinInfo = {
                skinName: skin,
                skinLink
            };
            // changed resolve to return
            return skinInfo;
        } catch (err) {
            console.error(err.message);
        }
    };

    return await Promise.all(data.map(({ skins }) => Promise.all(skins.map(skin => handleMap(skin)))));
};

异步函数返回使用其返回值解析的promise，因此从异步函数返回promise是多余的，并最终导致嵌套promise。此外，你也不必在异步函数中使用.then，因为你可以直接await the promise。阅读有关Promises和async/await的更多信息。