javascript - 创建一个存储已解决 promise 数组的变量？

Question

我觉得我在这里给自己挖了个坑。我有一系列艺术家姓名，使用 Spotify 的 API，我想获取每个艺术家的热门轨道并将其传递到我的查看页面。因此，使用 Spotify 的 API，我可以搜索艺术家的名字，但为了获取他们的每首热门轨道，我还需要他们的 ID。我写了这个:

      PromiseArr = [];
      // Search with Spotify's API for each artist from the list of concerts retrieved
      for (var i = 0; i < concerts.length; i++) {

     // Create an array of unresloved promises and resolve all of them afterwards with Promise.all 

        PromiseArr.push(spotifyApi.searchArtists(concerts[i].performance[0].displayName));
      }

      let artists = [];
      artists = new Promise((resolve, reject) => {
        Promise.all(PromiseArr)
          .then(values => {

            // Retrieve the Artist ID in order to make calls for specific track's
            const artistIds = values.map(element => {
              if (element.body.artists.items[0]) {
                return element.body.artists.items[0].id;
              }
            });
            resolve(artistIds);
          })
          .catch(err => reject(err));
      });
      artists.then(value => res.json(value.filter(element => element != null)));

所以这给了我所有艺术家代码的数组:

[
  "391oLRVmoTkumiN79HkTWu",
  "066X20Nz7iquqkkCW6Jxy6",
  "3ur7kjN4pd94zjUxrFSMDj",
  "26AHtbjWKiwYzsoGoUZq53",
  "3P33qFNGBVXl86yQYWspFj",
  "3bFSIkxpW9NvKT1wzo9tgx",
  "4MOSNls51nJPFORKok60vV",
  "50JJSqHUf2RQ9xsHs0KMHg",
  "6reL7Hq6obyCxSqurc8i1D",
  "0I7U5I66P88nCaVVPkIz6x",
]

从那里，我将能够遍历这些值并进行 API 调用以检索每个艺术家的热门轨道。但是，我觉得我正在做的事情是非常多余的。而且我似乎无法将艺术家的 ID 存储到变量中并循环遍历这些变量。即

const IDs = artists.then(value => res.json(value.filter(element => element != null)));

IDs 将为空。我究竟该如何继续这件事？

Answer 1

您可以使用 Array.map将一系列艺术家代码转换为一系列 promise 。然后使用 Promise.all检测数组中的所有 promise 何时都已实现。

例如。

获取艺术家代码数组:

var array = [
  "391oLRVmoTkumiN79HkTWu",
  "066X20Nz7iquqkkCW6Jxy6",
  "3ur7kjN4pd94zjUxrFSMDj",
  "26AHtbjWKiwYzsoGoUZq53",
  "3P33qFNGBVXl86yQYWspFj",
  "3bFSIkxpW9NvKT1wzo9tgx",
  "4MOSNls51nJPFORKok60vV",
  "50JJSqHUf2RQ9xsHs0KMHg",
  "6reL7Hq6obyCxSqurc8i1D",
  "0I7U5I66P88nCaVVPkIz6x",
];

根据第一个数组中的代码，使用 Array.map 创建一个新的 promise 数组(而不是字符串)。

var promiseArray = array.map(function(item) {
    return new Promise(function(resolve, reject) {
        //do API call here
        //item will be the string of the artist code
        //call the resolve function when complete with the API call
    });
});

然后您可以使用 Promise.all 检测何时 promiseArray 中的所有 promise 都已解决或第一个失败(如果有失败)。

Promise.all(promiseArray).then(function(results) {
    //do stuff here
}).catch(function(error) {
    //handle error here
});