让我们假设我们在AngularJS中定义了一个组件。我们将其命名为UserList
。该组件具有属性,因此控制器可以将一组用户传递给组件。
<user-list users="arrayOfUsers"></user-list>
用户列表的标记包含输入 - 列出用户的位置和按钮。在按钮上单击组件应该能够处理用户列表。
<div class="input-group">
<input type="text" class="form-control" ng-model="$ctrl.users" />
<span class="input-group-btn">
<a class="btn btn-default" ng-click="$ctrl.process()">
Process users
</a>
</span>
</div>
似乎是小菜一碟,但当用户处理需要调用Web服务和承诺时,情况并非如此。
如果我们只是迭代一组用户,并调用Web服务来处理用户,那么它将无法工作,因为结果不会立即返回,而是以异步方式执行。
this.userList.forEach(function (part, index, array) {
var userName = array[index];
UserService.processUser(userName).then(function (result) {
array[index] = result; //not so easy...
});
});
但实际上应该如何迭代数组以正确处理承诺呢?