【问题标题】：Returning a $promise from two resource calls in AngularJS to delay route change从 AngularJS 中的两个资源调用返回 $promise 以延迟路由更改
【发布时间】：2014-05-02 16:34:35
【问题描述】：

用例

使用路由提供程序，在解析中返回 $promise 将避免在 UI 加载后弹出数据。但是，我无法处理两个不同的资源调用并将其作为单个数组返回。

当前实施

当前实现工作，但要求控制器需要两个资源。

var app = angular.module('app', []);

app.config(function($routeProvider) {
  $routeProvider
    .when('/resource/:id', {
      templateUrl: 'partials/resource.html',
      controller: ResourceController,
      resolve: {
        parentResource: function($route, SingleResource) {
          return SingleResource.get({ id: $route.current.params.id }).$promise;
        },
        childResources: function($route, ChildResource) {
          return ChildResource.get({ id: $route.current.params.id }).$promise;
        }
      }
  });
 });

但是，我想做的是为ResourceController 提供一个数组Resource，这是一个由parentResource 和childResource 组成的数组，其中数组中的第0 项是parentResource。

想法

这是我的想法，但我不知道在解决方案中返回什么？如果我返回结果，路由将改变并传递一个空数组。

var app = angular.module('app', []);

app.config(function($routeProvider) {
  $routeProvider
    .when('/resource/:id', {
      templateUrl: 'partials/resource.html',
      controller: ResourceController,
      resolve: {
        Resource: function($route, SingleResource) {
          var resources = [];
          SingleResource.get({ id: $route.current.params.id })
            .$promise.then(function(parent)
                             { resources.splice(0, 0, parent); })
                     .catch(function(error) { alert('error!'); })
          ChildResource.get({ id: $route.current.params.id })
            .$promise.then(function(children) 
                             { resources = resources .concat(children); })
                     .catch(function(error) { alert('error!'); })

          return ???? // Can I return a $promise here?
        }
      }
  });
});

问题

如何获取我的 ResourceController 签名然后的想法是让控制器具有此签名：

var ResourceController = function($scope, parentResource, childResources) { ... }

到

var ResourceController = function($scope, resources) { ... }

通过返回 $promise？

【问题讨论】：

标签： javascript angularjs promise

【解决方案1】：

你可以使用 $q.all 返回一个 promise 数组

var resources = [];

resources.push(SingleResource.get({ id: $route.current.params.id }).$promise);
resources.push(ChildResource.get({ id: $route.current.params.id }).$promise);

return $q.all(resources) // You return an array of promises

【讨论】：

准确地说，它是一个 new 承诺，它将多个承诺组合成一个承诺，当所有输入承诺都得到解决时，它就会被解决。跨度>
是的，是的。我确信它会返回一个数组。但是您是绝对正确的，当所有原始承诺都已解决时，它确实返回一个承诺。返回一个数组是没有意义的。点赞！
@AntónioSérgioSimões 效果很好。使用 $q.all(resources).then(...) 我能够展平结果以返回一维数组。

【解决方案2】：

用like试试

 resolve: {
                parentResource: function($route, SingleResource) {
                  return SingleResource.get({ id: $route.current.params.id }).$promise;
                },
                childResources: function($route, ChildResource,  parentResource) {
                  return  (parentResource.length > 0) ? ChildResource.get({ id: $route.current.params.id }).$promise : [];
                }
              }

https://medium.com/opinionated-angularjs/a2fcbf874a1c

【讨论】：

如果 childResource 的承诺在父级之前解决，因为服务器在那个上更快？这将随机检查接受的答案。