q.all() 进行重复的 ajax 调用（Angularjs、$http、$q）答案

【问题标题】：q.all() making duplicate ajax calls (Angularjs, $http, $q)q.all() 进行重复的 ajax 调用（Angularjs、$http、$q）
【发布时间】：2015-02-10 01:17:56
【问题描述】：

我正在使用相同的工厂方法对不同的 URL 进行两次 REST API 调用。

这是我目前的 Angularjs 代码结构：

angular.module('evtApp', [])

.controller('EventAppController', ['$scope', '$q', 'restApi', function($scope, $q, restApi) {

    // var ajaxCall_1 = restApi.fetchData(tweetUrl),
    //  ajaxCall_2 = restApi.fetchData(instaUrl);

    $q.all([restApi.fetchData(tweetUrl), restApi.fetchData(instaUrl)]).then(function() {
        // Save the the return data values to the respective scopes. 
        // $scope.tweetUrl = data;
        // $scope.instaUrl = data;
    });

}])

.factory('restApi', ['$q', '$http', function($q, $http) {
        var q = $q.defer();
        return {
            fetchData: function(url) {
                $http.jsonp(url).success(function(data) {
                    console.log(data);
                    q.resolve(data);
                }).error(function(error) {
                    q.reject(error);
                });
                return q.promise;
            }
        };
    }])

当我查看网络请求时，它显示我已经拨打了 4 次电话，而不是

网络调用示例：

search?q=twitter,instagram,flicker&callback=angular.callbacks._3    
search?q=quotes:yes&callback=angular.callbacks._0
search?q=twitter,instagram,flicker&callback=angular.callbacks._1
search?q=quotes:yes&callback=angular.callbacks._2

似乎是什么问题？而且，我怎样才能获得返回提要并将 tweetURL 调用保存到 $scope.tweetUrl 并将 instaUrl 调用保存到 $scope.instaUrl。我知道 jQuery $.when(func1, func2).done(function(func1data, func2data){});我在 .done() 中获得了各个调用的值。我怎样才能对上面的代码做同样的事情。

【问题讨论】：

你能把你的 .html 也包括进来吗？您可能有两个 EventAppController 引用，每个引用都会创建一个 $scope。您可以通过将其移至服务或工厂来避免重复调用。
感谢布拉德，我没有意识到这可能是问题所在，我确实有 2 个同名的重复 ng-controller。谢谢：）。关于问题第二部分的任何内容。

标签： ajax angularjs q deferred

【解决方案1】：

对于第二部分，它类似于 $.when 调用，只是它以数组的形式出现：

$q.all([restApi.fetchData(tweetUrl), restApi.fetchData(instaUrl)]).then(function(data) {
    // Save the the return data values to the respective scopes. 
    $scope.tweetUrl = data[0];
    $scope.instaUrl = data[1];
});

【讨论】：

行得通！我看到返回的参数和返回的数组。

【解决方案2】：

你需要做的

$q.all ([ajaxCall_1, ajaxCall_2, restApi.fetchData (instaUrl)]).then(function () {//success call back});

基本上你需要传递你之前创建的promise对象。

希望这可以帮助你。谢谢。

【讨论】：