javascript - AngularJS $http 嵌套 foreach

Question

我认为解决方案将涉及某种形式的 promise ，尽管我正在努力思考如何在这种情况下实现 promise 。

本质上，我有一个返回 $resource 的服务，然后我在 Controller 中使用 .query() 来获取站点上下文数组。然后，查询回调函数将响应传递给 $scope 函数 ($scope.getTaskLists)。

getTaskLists 函数使用 angular.forEach() 循环访问站点上下文。对于每个循环迭代，它将使用 $http 返回每个站点上下文中的任何任务列表。使用 .success() promise ，每个 $http 请求为每个循环调用另一个请求，这次循环遍历 $http 响应(任务列表)。对于每个任务列表，都会调用另一个 $http 请求，该请求获取根文件夹，因为稍后我们需要一个参数。此 $http 调用的 .success() Promise 提取参数，然后调用 $scope.getTaskItems，传入各种参数，包括站点上下文和列表 id。

然后，getTaskItems 函数使用上述参数向列表发出 $http 请求，该请求将返回所有列表项。然后，此处的 .success() 回调会循环遍历所有项目并将对象推送到任务范围。

最终的结构类似于以下内容:

- $resource.query() // get site contexts
  - angular.forEach(sites)
    - $http().success(... // get task lists
      - angular.forEach(taskLists)
        - $http().success(... // get root context
          - $http().success(... // get task items
            - angular.forEach(taskItems)
              - $scope.tasks.push(taskItem) // push task item to $scope

我需要做的是在所有任务项都被推送到 $scope.tasks 后运行一些代码。使用 Promise 是否可以做到这一点？是否有更好的方法来简化上述代码，使其不是由 ajax 请求和循环组成的困惑的意大利面条代码？

谢谢

Answer 1

在我看来，你的 Angular 工作流程很好。主要问题可能出在服务器端。

如果您需要所有嵌套资源。只需将其公开在您的 json 中即可。

在你的情况下，你有类似的东西:

[
 {"id":"1", "name":"siteContext1"},
 {"id":"2", "name":"siteContext2"}
]

也许这种结构适用于您的所有资源。但在您的具体情况下，您的第一次调用应该满足您的所有需求，而不是只提供有关资源的一些信息。

您可能需要这样的东西:

[
 {
  "id":"1",
  "tasks":[{
     "id":"1",
     "rootContext": [{...}]
   }],
  "name":"siteContext1",
 },
{
  "id":"2",
  "tasks":[{
     "id":"2",
     "rootContext": [{...}]
   }],
  "name":"siteContext2",
 }
]

如果您无法修改您的 API。那么你实际上是根据你的 API 以一种很好的方式来做这件事......以我的愚见。

实际上 $http 调用返回 promise 。 success() 是一个在 Promise 得到解决时触发的函数。

希望对您有帮助。