angularjs - 深入了解我的 http 请求将不会在 View 上显示所需的数据

Question

因此，在上一个问题 ( Http request in service successful but not able to show in view ) 的基础上进行构建。我需要更深入地了解我的 http 请求，以便为选定的电影进行 api 调用，如下所示:

http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXX')

我的服务的完整代码:

angular.module('starter.services', [])

.service('HotMoviesService', function($http, $q){
    var movieId;
    var final_url = "https://api.themoviedb.org/3/movie/popular?api_key=XXX";

    var self = {
        'hotMovies' : [],
        'singleHotMovie' : [],
        'loadHotMovies' : function() {
            var d = $q.defer();
            $http.get(final_url)
            .success(function success (data){
                //console.log(data);
                self.hotMovies = data.results;

                for(var i = 0; i < self.hotMovies.length; i++){
                    //console.log(self.hotMovies[i].id);
                    movieId = self.hotMovies[i].id;
                    //console.log("Logging movie id: ", movieId);

                    $http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXXXX')
                    .success(function succcess(response){
                        //console.log("Logging response in the for loop " , response);
                        self.singleHotMovie = response;
                    })
                    .error(function error (msg){
                        console.log(msg);
                    })
                }

                d.resolve('The promise has been fulfilled');
            })
            .error(function error (msg){
                console.error("There was an error retrieving the data " , msg);
                d.reject("The promise was not fulfilled");
            });
            return d.promise;
        }
    };
    return self;
})

我的 Controller 如下:

.controller('StartCtrl', function($scope, $http, HotMoviesService) {

//POPULAR
    $scope.hotmovies = [];

    HotMoviesService.loadHotMovies().then(function success (data){
        console.log(data);//returns success message saying that promise is fulfilled
        $scope.hotmovies = HotMoviesService.singleHotMovie;
    },
    function error (data){
        console.log(data)//returns error messag saying that promise is not fulfilled
    });
})

HTML 代码(电影列表)

<ion-view view-title="The Movie Bank">
  <ion-content class="background">

    <h1 class="padding titleStart">Welcome to The Movie Bank</h1>
    <div class="logo"></div>

    <!-- HOT -->
    <a class="customHref" href="#/app/hot">
        <h1 class="padding customH1">Hot</h1>
    </a>

    <hscroller>
        <ion-scroll direction="x" scrollbar-x="false">
            <hcard ng-repeat="hotmovie in hotmovies"> 
                <a href="#/app/hot/{{hotmovie.id}}">
                    <img ng-src="http://image.tmdb.org/t/p/w92/{{hotmovie.poster_path}}" >
                </a>
            </hcard>
        </ion-scroll>
    </hscroller>

  </ion-content>
</ion-view>

单击其中一部电影时，它应该转到详细信息页面(该 id 显示在 url 中)，但我似乎无法读出该特定电影的数据。尽管我的所有请求都可以，并且可以在我的控制台中通过。

详情页的 HTML 代码:

<ion-view view-title="Hot Detail">
  <ion-content >
    <h1>test</h1>
    <h4>{{original_title}}</h4>
    <img ng-src="http://image.tmdb.org/t/p/w92/{{hotMovie.poster_path}}" >
  </ion-content>
</ion-view>

详情页截图:


我究竟做错了什么 ？

Answer 1

显示消息“ promise 已实现”，因此您知道第一个请求成功，但这并没有告诉您有关电影细节调用的任何信息。

您进入一个循环以检索所有“热门电影”详细信息。但是，由于d.resolve在第一次调用的成功代码中， promise 在您的 moviedetails 调用完成之前得到解决。

我会做出一系列 promise (来自所有细节调用)并使用 $q.all(promises);完成所有这些调用后解决。这样你就知道你的所有数据都在里面。

还有一件事...

您将响应复制到 self.singleHotMovie 中 self.singleHotMovie = response; .
这样，只有最后一个要解决的电影详细信息调用才会在 self.singleHotMovie 中。您可能想使用 self.singleHotMovie.push(response)将其添加到数组中。

未经测试:

'loadHotMovies' : function() {
        var d = $q.defer();
        $http.get(final_url)
        .success(function success (data){
            //console.log(data);
            self.hotMovies = data.results;

            // create an array to hold the prommisses
            var promisses = [];
            for(var i = 0; i < self.hotMovies.length; i++){

                //console.log(self.hotMovies[i].id);
                movieId = self.hotMovies[i].id;
                //console.log("Logging movie id: ", movieId);

                var promise = $http.get('https://api.themoviedb.org/3/movie/'+ movieId + '?api_key=XXXXX')
                .success(function succcess(response){
                    //console.log("Logging response in the for loop " , response);
                    self.singleHotMovie = response;
                })
                .error(function error (msg){
                    console.log(msg);
                });
                // add all the detail calls to the promise array
                promisses.push(promise);
            }

            //when all the details calls are resolved, resolve the parent promise
            $q.all(promisses).finally(function(){
                d.resolve('The promise has been fulfilled');
            });
        })
        .error(function error (msg){
            console.error("There was an error retrieving the data " , msg);
            d.reject("The promise was not fulfilled");
        });
        return d.promise;
    }