异步编程 - 如何遍历对象数组并使用从 api 获取的数据更改每个对象的属性？

Question

所以我有一个类似于这样的对象数组：

[ { id: 123, info: 'text', number: 0 }, ... ]

我有一个 API，它获取对象的 ID 并返回与之关联的数字。 在使用 JavaScript 的前端应用程序上，我想遍历数组中的每个对象，并使用来自此 API 的数据填充该数字属性。

我正在使用 AngularJS，这是我编写的用于获取与每个对象关联的数字的函数：

    $scope.getNumber = function(id) {
        $http.get('/api/getnumber/' + id)
            .success(function(data) {
                console.log(data.goings);
                return data.number;
            });
    }

这个功能有效。 我的问题是我不知道如何更新数组中每个对象的 number 属性。 我试过循环它，但这不起作用，因为循环在.get()完成获取数据之前执行。 我也试过在 html 中有以下代码：

<div ng-repeat="obj in data">
      {{ getNumber(obj.id) || 0 }}
</div>

但这会创建一个无限循环，使我的浏览器崩溃。 我尝试进行了一些搜索，但找不到可比较的案例。 我怎样才能做到这一点？

Answer 1

$http.get(..).success(..)返回一个promise，因此不能这样使用。 也许在控制器加载时加载所有数字并将其附加到数据？

Answer 2

如前所述， success()函数只是返回另一个promise，它本身并不是您想要的值。 像在成功函数中一样返回一个值，仅作为在链接它们时将结果传递给另一个Promise 的一种方式才有用。

如果这些值在用户与页面交互时可能会发生变化，最好的选择是拥有一个持续显示的范围变量（您的数组正在使用ng-repeat工作迭代），并由$http承诺更新。

如果您只希望每次加载页面时它都是一件事，您可以使用解析预加载它们（对于使用 UI-router 的解析，请看这里）。 Resolves 允许您在页面加载之前进行 Promise 调用，并且只有在 Promise 全部解决后才开始加载实际页面。

您可能需要批量检索您需要的数字，但如果没有，您可以使用$q.all()将单个调用转换为组解析，这允许您提供一组 promise 并返回一个他们的结果数组。

当然，如果你想提前加载它们，然后在页面的生命周期中修改它们，你可以。