在AngularJS中，从两个资源调用中返回$promise来延迟路由更改

Returning a $promise from two resource calls in AngularJS to delay route change

本文关键字：promise 返回 路由 调用 延迟 两个 AngularJS 资源      更新时间：2023-09-26

用例

使用路由提供商，在解析中返回$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。

<<h2>想法/h2>

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

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

如何获取我的resourceconcontroller签名我们的想法是让控制器拥有这样的签名:

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


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

通过返回$promise?

您可以使用$q。返回一个承诺数组

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

试试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

相关文章：