Angularjs $q.all

Question

我已经在 angularjs 中实现了 $q.all，但我无法使代码工作。这是我的代码：

UploadService.uploadQuestion = function(questions){

        var promises = [];

        for(var i = 0 ; i < questions.length ; i++){

            var deffered  = $q.defer();
            var question  = questions[i]; 

            $http({

                url   : 'upload/question',
                method: 'POST',
                data  : question
            }).
            success(function(data){
                deffered.resolve(data);
            }).
            error(function(error){
                deffered.reject();
            });

            promises.push(deffered.promise);
        }

        return $q.all(promises);
    }

这是调用服务的控制器：

uploadService.uploadQuestion(questions).then(function(datas){

   //the datas can not be retrieved although the server has responded    
}, 
function(errors){ 
   //errors can not be retrieved also

})

我认为在我的服务中设置 $q.all 存在一些问题。

Answer 1

在javascript中没有block-level scopes只有function-level scopes：

阅读这篇关于javaScript Scoping and Hoisting的文章。

看看我是如何调试你的代码的：

var deferred = $q.defer();
deferred.count = i;

console.log(deferred.count); // 0,1,2,3,4,5 --< all deferred objects

// some code

.success(function(data){
   console.log(deferred.count); // 5,5,5,5,5,5 --< only the last deferred object
   deferred.resolve(data);
})

• 当您在 for 循环中编写 var deferred= $q.defer(); 时，它会提升到函数的顶部，这意味着 javascript 在 for loop 之外的函数范围内声明了此变量。
• 对于每个循环，最后一个 延迟 会覆盖前一个循环，没有块级范围来保存对该对象的引用。
• 当异步回调（成功/错误）被调用时，它们只引用最后一个延迟对象并且只有它被解析，所以 $q.all 永远不会被解析，因为它仍在等待其他延迟对象。
• 您需要为您迭代的每个项目创建一个匿名函数。
• 由于函数确实具有作用域，因此即使在函数执行之后，对延迟对象的引用也会保留在 closure scope 中。
• 正如#dfsq 评论的那样：没有必要手动构造一个新的延迟对象，因为$http 本身会返回一个promise。

  ---

angular.forEach 的解决方案：

这是一个演示插件：http://plnkr.co/edit/NGMp4ycmaCqVOmgohN53?p=preview

UploadService.uploadQuestion = function(questions){

    var promises = [];

    angular.forEach(questions , function(question) {

        var promise = $http({
            url   : 'upload/question',
            method: 'POST',
            data  : question
        });

        promises.push(promise);

    });

    return $q.all(promises);
}

我最喜欢的方式是使用Array#map:

这是一个演示插件：http://plnkr.co/edit/KYeTWUyxJR4mlU77svw9?p=preview

UploadService.uploadQuestion = function(questions){

    var promises = questions.map(function(question) {

        return $http({
            url   : 'upload/question',
            method: 'POST',
            data  : question
        });

    });

    return $q.all(promises);
}

Answer 2

$http 也是一个承诺，你可以让它更简单：

return $q.all(tasks.map(function(d){
        return $http.post('upload/tasks',d).then(someProcessCallback, onErrorCallback);
    }));

Answer 3

问题似乎是您添加了deffered.promise，而deffered 本身就是您应该添加的承诺：

尝试更改为promises.push(deffered);，这样就不会将未包装的承诺添加到数组中。

 UploadService.uploadQuestion = function(questions){

            var promises = [];

            for(var i = 0 ; i < questions.length ; i++){

                var deffered  = $q.defer();
                var question  = questions[i]; 

                $http({

                    url   : 'upload/question',
                    method: 'POST',
                    data  : question
                }).
                success(function(data){
                    deffered.resolve(data);
                }).
                error(function(error){
                    deffered.reject();
                });

                promises.push(deffered);
            }

            return $q.all(promises);
        }