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

时间:2015-02-10 01:17:56

标签: ajax angularjs q deferred

我正在使用相同的工厂方法进行两次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

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

你需要做

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

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

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