Angularjs $ q.all [英] Angularjs $q.all

查看:223
本文介绍了Angularjs $ q.all的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经实现在angularjs的$ q.all,但我不能让code工作。这里是我的code:

I have implemented the $q.all in angularjs, but I can not make the code working. Here is my code :

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);
    }

这是我的控制器调用其中的服务:

And here is my controller which call the services:

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。任何帮助真的AP preciated。谢谢你。

I think there is some problem setting up $q.all in my service. Any help really appreciated. Thank you.

推荐答案

在JavaScript的没有 块级范围 函数级别范围

In javascript there are no block-level scopes only function-level scopes:

阅读这篇文章,了解 javaScript的范围和提升

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);
})


  • 当你写 VAR推迟= $ q.defer(); 里面的for循环它的悬挂的函数的顶部,它也就是说JavaScript的声明循环
  • 之外的功能范围,这个变量
  • 每次循环,最后的延迟的被覆盖previous之一,没有块级范围,保存到对象的引用。

  • 当异步回调(成功/错误)被调用,他们只引用最后的延期对象并只有它得到解决,所以 $ q.all从未解决,因为它仍在等待其他递延对象。

  • 您需要的是为你遍历每个项目创建一个匿名函数。

  • 由于功能确实有范围,则参考递延对象是在 关闭范围preserved 函数执行后还是一样。

  • 作为#dfsq评论:无需手动构建一个新的Deferred对象,因为$ HTTP本身返回的承诺。


    • When you write var deferred= $q.defer(); inside a for loop it's hoisted to the top of the function, it means that javascript declares this variable on the function scope outside of the for loop.
    • With each loop, the last deferred is overriding the previous one, there is no block-level scope to save a reference to that object.
    • When asynchronous callbacks (success / error) are invoked, they reference only the last deferred object and only it gets resolved, so $q.all is never resolved because it still waits for other deferred objects.
    • What you need is to create an anonymous function for each item you iterate.
    • Since functions do have scopes, the reference to the deferred objects are preserved in a closure scope even after functions are executed.
    • As #dfsq commented: There is no need to manually construct a new deferred object since $http itself returns a promise.
    • 下面是一个演示plunker:<一href=\"http://plnkr.co/edit/NGMp4ycmaCqVOmgohN53?p=$p$pview\">http://plnkr.co/edit/NGMp4ycmaCqVOmgohN53?p=$p$pview

      Here is a demo plunker: 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);
      }
      

      我最喜欢的方式是使用阵列#地图

      下面是一个演示plunker:<一href=\"http://plnkr.co/edit/KYeTWUyxJR4mlU77svw9?p=$p$pview\">http://plnkr.co/edit/KYeTWUyxJR4mlU77svw9?p=$p$pview

      UploadService.uploadQuestion = function(questions){
      
          var promises = questions.map(function(question) {
      
              return $http({
                  url   : 'upload/question',
                  method: 'POST',
                  data  : question
              });
      
          });
      
          return $q.all(promises);
      }
      

      这篇关于Angularjs $ q.all的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆