在 AngularJS 中处理 JSON 分页答案

【问题标题】：Dealing with JSON pagination in AngularJS在 AngularJS 中处理 JSON 分页
【发布时间】：2015-08-25 22:59:39
【问题描述】：

我正在尝试学习 Javascript 和 AngularJS。在这种情况下，我正在编写一个应用程序，它利用 Spotify Web API 来读取和修改播放列表。我制作了一个函数，可以根据其 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);

【问题讨论】：

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

标签： javascript json angularjs

【解决方案1】：

我使用下面的代码让它按预期工作。

       $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);
            })
        }

【讨论】：