javascript - 通过angularjs $resource获取数据

Question

我有以下通过 $resource 获取数据的 angularJS 函数，它工作并将此数据推送到 vm.data 数组，但是当我尝试在 Controller 中获取 vm.data 时，我得到 null ，下面的最后一行代码打印空值

   function loadAll() {
    Questiongroup.query({}).$promise.then(function(group){
        console.log(group);
        for(var i=0;i<group.length;i++){
           var grouptitle=group[i].title
            Question.questionsByQuestionGroup({id:group[i].id}).$promise.then(function(question){
                vm.question = question; 
               for(var j=0;j<question.length;j++){
                   vm.data.push({ group: grouptitle, question: question[j].question , questiontype: question[j].type });

                   console.log(vm.data)      //this line print correct data 
                   }
         });
        }
      });
    }

    loadAll();
    console.log(vm.data);         //This line print null

Answer 1

最后的原因console.log版画 null是它在赋予 .then 的函数之前执行方法。作为 .then 的参数给出的函数方法由 $q 调用在数据从服务器返回后服务。

loadAll函数应返回 派生的 promise ，可用于检索 vm.data 在组装后。这涉及链接 promise 和使用 $q.all方法。

function loadAll() {
    var topPromise = Questiongroup.query({}).$promise;

    var derivedPromise = topPromise.then(function(group){
        var promiseList = [];
        console.log(group);
        for(var i=0;i<group.length;i++){
            var itemPromise  = getItemPromise(group[i]);
            promiseList.push(itemPromise);                        
        };
        //return $q.all promise for chaining
        return $q.all(promiseList);
    });

    //return promise
    return derivedPromise;
};

然后使用返回的 promise 。

var loadAllPromise = loadAll();

loadAllPromise.then(function (vmData) {
    console.log(vmData);
});

上面的例子展示了如何创建一个从 promise 数组中返回数据数组的 promise 。将其扩展到多个迭代级别在直觉上是显而易见的。

---

AngularJS $q.all也适用于哈希。

function loadAll() {
    var topPromise = Questiongroup.query({}).$promise;

    var derivedPromise = topPromise.then(function(group){
        var promiseHash = {};
        console.log(group);
        for(var i=0;i<group.length;i++){
            var itemPromise  = getItemPromise(group[i]);
            promiseHash[group[i].id] = itemPromise;                        
        };
        //return $q.all promise for chaining
        return $q.all(promiseHash);
    });

    //return promise
    return derivedPromise;
};

上面的示例返回一个包含数据哈希(关联数组)的 promise 。

loadAllPromise.then(function (dataHash) {
    console.log(dataHash);
});

来自文档:

all(promises);

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.

Parameters

An array or hash of promises.

Returns

Returns a single promise that will be resolved with an array/hash of values, each value corresponding to the promise at the same index/key in the promises array/hash. If any of the promises is resolved with a rejection, this resulting promise will be rejected with the same rejection value.

-- AngularJS $q Service API Reference -- $q.all