q.all() 重复调用 ajax (Angularjs, $http, $q)

q.all() making duplicate ajax calls (Angularjs, $http, $q)

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

这是我目前的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

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

你需要做的

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

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

希望这可以帮助 you.Thanks。

对于第二部分,它类似于 $.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];
});