解决routeprovider中的多个promise

Question

所以我想执行2次http调用以从我的服务器获取一些组和问题,并在routeprovider中解决这两个问题,以便在获得相关数据之前不会加载相应的控制器.

在我的其他控制器中,我总是使用initalData对象来保存数据.

解决部分:

resolve: {
                initialData: ["GroupsService" "QuestionsService", function (GroupsService, QuestionsService) {
                    return {
                     questions: QuestionsService.getAll(),
                     groups: GroupsService.getAll()
                }]
          }

当我尝试分别使用initialData.questions和initialData.groups访问控制器中的数据时,我收到了2个promises而不是数据,即使在实例化控制器之前已经记录了来自http的回调.

QuestionsCtrl.$inect = ["DialogsService", "initialData", "QuestionsService"];

function QuestionsCtrl(DialogsService, questions, groups, QuestionsService) {
//Initialdata object which has 2 Promise properties
//This logs AFTER the callback in both http callbacks
console.log('controller initialized', initialData);

当我用这个替换代码时(没有使用initialData对象,而是返回另外两个对象,它确实有效:

 resolve: {
                    questions: function (QuestionsService) {
                        //$http call for all questions
                        return QuestionsService.getAll();
                    },
                    groups: function (GroupsService) {
                        //$http call for all groups
                        return GroupsService.getAll();
                    }
                }

有没有人有任何合理的解释为什么,在第一种情况下,我得到了承诺(尽管数据实际上存在于客户端),第二种工作完美无瑕？

Answer 1

当你传递resolve给一条路线时$q.all,它会隐含地为你调用它.因此,当您在resolve中返回多个值时,它会等待所有值完成.

在你的例子中 - 你刚刚返回了一个包含一些承诺值的对象 - 你没有等待它们,所以它立即用promises解决而不是解包它们.

你当然也可以明确地等待它们:

 initialData: ["a" "b","$q" function (a, b, $q) {
      return $q.all({
                     questions: a.getAll(),
                     groups: b.getAll()
             });
 }]