如何处理异步获取的数据

How to process asynchronously fetched data?

本文关键字：异步 获取 数据 处理 何处理      更新时间：2023-09-26

我是AngularJS的新手，在页面上显示数据之前，我很难处理从服务器异步获取的数据。

我获取的数据是这样的：

"all_colors":[
      {"color":"red","quantity":1},
      {"color":"green","quantity":11},
      {"color":"yellow","quantity":5}
]

当页面最初加载时，我从服务器上获取上述数据，如下所示：

angular.module('angularDjangoRegistrationAuthApp')
.controller('DashbordCtrl', function ($scope, djangoAuth, Validate, $location) {
  djangoAuth.fetch_from_server().then(function(data){
    $scope.model = data;
  });

我想在页面上展示两件事：

Available Colors: 3
Total Color Quantity: 17

我可以这样显示可用的颜色：

Available Colors: {{model.all_colors.length}}

问题

但是，我如何循环所有颜色并计算每个颜色的数量，以便显示Total Color Quantity？

在获取数据后，我在JS文件中似乎无法做到这一点，因为它是异步获取的。我想不出该怎么做。

无论您如何获取数据，只要考虑一下您需要显示什么数据-您的ViewModel-并在获取数据时为它们赋值。

在这种情况下，创建一个作用域公开的属性$scope.totalColorQty，并在收到数据时分配其值：

djangoAuth.fetch_from_server().then(function(data){
    $scope.model = data;
    $scope.totalColorQty = computeColorQuantity(data.all_colors);
});
function computeColorQuantity(colorsArray){
  // do whatever you need to calculate the quantity
}

然后，只需在UI中显示即可：

<div>Total Color Quantity: 
   <span ng-show="totalColorQty === undefined">Loading...</span>
   <span ng-hide="totalColorQty === undefined">{{totalColorQty}}</span>
</div>

一些附加说明：

1） 您可以在作用域上公开computeColorQuantity并绑定到它。但是，我强烈建议不要这样做，因为这个操作"繁重"，并且会在每个消化周期执行，这会让你的整个应用程序变得更慢。

不要这样做：

<div> Total Color Quantity: {{computeColorQuantity(model.all_colors)}}</div>

2） 如果你不需要重新计算这个值，那么你可以绑定一次来减少$watcher的数量：

<span ng-show="totalColorQty">{{::totalColorQty}}</span>

3） 如果您确实打算允许用户更新数据，那么我建议在每个用户启动更改时重新计算数据，例如，通过ng-change，而不是通过deep$watch

相关文章：