Javascript 在AngularJS中处理JSON分页

我正在努力学习Javascript和AngularJS。在这种情况下，我正在编写一个应用程序，它利用SpotifyWebAPI来读取和修改播放列表。我已经做了一个函数，可以根据播放列表的ID获取曲目，除了一件事之外，这个函数工作得很好。如Spotify Web API文档所述，请求限制为100条曲目。当然有一个URL来检索播放列表中接下来的100首曲目，但我还没有弄清楚如何正确处理这个问题。下面是我试图检索播放列表中的所有曲目，但这只会挂断浏览器

$scope.getPlaylistTracks = function (playlist_id) {

    return $q(function (resolve, reject) {
        Spotify.getPlaylistTracks($scope.currentUser["id"], playlist_id).then(function(data) {
            console.log(data);

            var tracks = data.items;
            var next = data.next;

            while(next != null) {
                console.log("More than one page");
                console.log(data.next);
                $http.get(data.next, {
                    headers: {'Authorization': "Bearer " + $scope.token}
                }).then(function(response) {
                    console.log(response.status);
                    console.log(response.data);
                    next = data.next;
                    tracks.push.apply(tracks, response.data.items);
                }, function(response) {
                    console.log(response.data || "Request failed");
                    console.log(response.status);
                })
            }

            resolve(tracks);

        }, function(reason) {
            reject(reason);
        })
    });
}

如果我这样做，我最多可以检索200首曲目：

var tracks = data.items;

if(data.next != null) {
    console.log("More than one page");
    console.log(data.next);
    $http.get(data.next, {
        headers: {'Authorization': "Bearer " + $scope.token}
    }).then(function(response) {
        console.log(response.status);
        console.log(response.data);
        tracks.push.apply(tracks, response.data.items);
    }, function(response) {
        console.log(response.data || "Request failed");
        console.log(response.status);
    })
}

resolve(tracks);

---

我通过使用下面的代码使它正常工作

       $scope.fetchTracksFromPlaylist = function (playlist_id) {
            $scope.fetchPlaylistTracks(playlist_id).then(function(data) {
                $scope.setPlaylistTracks(data);
            })
        }

        $scope.fetchPlaylistTracks = function (playlist_id) {
            $scope.tracks = [];

            return $q(function (resolve, reject) {
                Spotify.getPlaylistTracks($scope.currentUser["id"], playlist_id).then(
                    function (data) {
                        resolve(data);
                    }, function (reason) {
                        reject(reason);
                    })
            });
        }

        $scope.setPlaylistTracks = function (tracks) {

            $scope.tracks.push.apply($scope.tracks, tracks.items);

            if (tracks.next) {
                $scope.callSpotify(tracks.next, function(data) {
                   $scope.setPlaylistTracks(data);
                });
            }
        }

        $scope.callSpotify = function (url, callback) {
            $http.get(url, {
                headers: {'Authorization': "Bearer " + $scope.token}
            }).then(function (response) {
                callback(response.data);
            }, function (response) {
                console.log(response.data || "Request failed");
                console.log(response.status);
            })
        }

---

那个while循环肯定不是你所希望的。可能会发出数千个请求。它不会等待每次迭代都会发出请求。看看你的网络标签为什么你一次需要超过100个？这对用户来说是一个很大的挑战，当用户需要的时候，用户可以提出更多的请求。用户不需要查看曲目，应用程序需要。我的目的是在播放列表中检测（然后删除）重复的曲目，所以我想我需要获取所有这些曲目。