Javascript 使用来自一个API调用的响应来执行另一个API调用

我正在使用AngularJS构建一个站点，其中的一个功能是显示指定日期的公告牌（这是一个音乐图表）列表。 我想按顺序呈现这些歌曲，以及歌曲的图像

首先，我调用这个API：

我给出了一个日期，并得到了该日期前10首歌曲的回复，以及每首歌曲的相关数据

Billboard API的响应还包括一个spotify id，我想使用该id并调用spotify Web API来获取该歌曲的图像，以补充我提供的关于每首歌曲的信息

这是我的控制器中的外观：

var spotifyID = [];
$scope.spotifyImg = [];

musicService.getBillboard($scope.date).then(function(data){ //Response is top 10 songs for given date
        $scope.status = "";
        $scope.songlist = data;
        for (var i = 0; i < data.length; i++) {
            spotifyID[i] = data[i].spotify_id; //data[i].spotify_id returns the ID of the track, as given by the billboard API
        }
        $scope.getImages();
    });

$scope.getImages = function() {
    for (var i = 0; i < spotifyID.length; i++) {
        if(spotifyID[i] !== null) {
            musicService.getSpotify(spotifyID[i]).then(function(data){ 
                $scope.spotifyImg[i] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
        });
    }
    }
    console.log($scope.spotifyImg);
}

var spotifyID=[]；
$scope.spotifyImg=[]；
getBillboard（$scope.date）。然后（函数（数据）{//响应是给定日期的前10首歌曲
$scope.status=“”；
$scope.songlist=数据；
对于（变量i=0；i

在我看来，它看起来是这样的：

<div ng-repeat = "song in songlist">
    <div>{{ song.rank }}</div>
    <div>
        <img ng-src=" {{ spotifyImg[$index] }}"/>
    </div>
</div>

{{song.rank}

但是，它不起作用

当我在控制台中检查$scope.spotifyImg数组时，它的长度为11，索引10中只有一个元素，这是最后一首歌（即第10首歌）的图像

为什么$scope.spotifyImg数组在索引10中只包含一个元素，我有点困惑。另外，当spotifyID的长度为10时，为什么数组的长度为11

---

有没有办法解决这个问题？

创建单独的函数，将for循环的内容放在该函数内，并在循环内调用该函数

$scope.getImages = function() {
    for (var i = 0; i < spotifyID.length; i++) {
        if (spotifyID[i] !== null) {
            sampleFunc(i);
        }
    }
}

function sampleFunc(i) {
    musicService.getSpotify(spotifyID[i]).then(function(data) {
        $scope.spotifyImg[i] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
    });
}

$scope.getImages=function（）{
对于（变量i=0；i

---

我认为，之所以只得到数组的最后一个索引，是因为在循环中调用promise时，循环不会等到promise返回。它只是继续执行，当promise返回循环执行时，它会继续执行；正在获取数组的最后一个索引。这就是为什么需要分别调用for循环中的promise

创建单独的函数，并将for循环的内容放在该函数中，然后在循环中调用该函数

$scope.getImages = function() {
    for (var i = 0; i < spotifyID.length; i++) {
        if (spotifyID[i] !== null) {
            sampleFunc(i);
        }
    }
}

function sampleFunc(i) {
    musicService.getSpotify(spotifyID[i]).then(function(data) {
        $scope.spotifyImg[i] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API
    });
}

$scope.getImages=function（）{
对于（变量i=0；i

---

我认为，之所以只得到数组的最后一个索引，是因为在循环中调用promise时，循环不会等到promise返回。它只是继续执行，当promise返回循环执行时，它会继续执行；正在获取数组的最后一个索引。这就是为什么需要分别从for循环调用promise的原因。

问题在于

getSpotify

是异步运行的，当响应这些调用时，

i

可能被设置为

spotifyID.length-1

，这意味着所有回调函数都设置了

$scope.spotifyImg[spotifyID.length-1]

元素

试试这个：

$scope.spotifyImg=[]；
getBillboard（$scope.date）.then（函数（数据）{
$scope.status=“”；
$scope.songlist=数据；
对于（变量i=0；i}

问题在于

getSpotify

是异步运行的，当响应这些调用时，

i

可能被设置为

spotifyID.length-1

，这意味着所有回调函数都设置

$scope.spotifyImg[spotifyID.length-1]

元素

试试这个：

$scope.spotifyImg=[]；
getBillboard（$scope.date）.then（函数（数据）{
$scope.status=“”；
$scope.songlist=数据；
对于（变量i=0；i

尝试使用此代码

Js代码

  var spotifyID = [];
      $scope.spotifyImg = [];
      musicService.getBillboard($scope.date).then(function(data) { //Response is top 10 songs for given date
        $scope.status = "";
        $scope.songlist = data;
        for (var i = 0; i < data.length; i++) {
          spotifyID[i] = data[i].spotify_id; //data[i].spotify_id returns the ID of the track, as given by the billboard API
        }
        $scope.getImages(0);
      });


      $scope.getImages = function(index) {
        if (index == spotifyID.length) {
          return;
        }

        musicService.getSpotify(spotifyID[index]).then(function(data) {
          $scope.spotifyImg[index] = data.album.images[0].url; //returns the appropriate image from the Spotify Web API

          // call recursive here
          $scope.getImages(index++);

        });
      }
    }

var spotifyID=[]；
$scope.spotifyImg=[]；
getBillboard（$scope.date）。然后（函数（数据）{//响应是给定日期的前10首歌曲
$scope.status=“”；
$scope.songlist=数据；
对于（变量i=0；i$scope.getImages = function () {
for (var i = 0; i < spotifyID.length; i++) {
    if (spotifyID[i] !== null) {
        (function(i){
             musicService.getSpotify(spotifyID[i]).then(function (data) {

                $scope.spotifyImg[i] = data.album.images[0].url;
             });
        })(i)

    }
}