如何在角度循环中使用异步调用？

Question

列表中的每封电子邮件都将发送到服务器，并从服务器获得响应（如果它是有效的电子邮件）。

因此，在检查完所有电子邮件之后，数组应具有：

[e-mail] - valid
[e-mail] - invalid
[e-mail] - valid
[e-mail] - invalid

循环发送电子邮件到服务器的代码如下：

for(var i=0; i < isEmailValidList.length; i++) {
  var isEmailValid = User.validateEmail({email : isEmailValidList[i].email}, function(){
      isEmailValidList[i].isValid = isEmailValid.value;
  });
}

但是问题在于调用是异步的，因此，假设i =
0，则当i为0时控件将不会进入函数。因此，当i进入函数时，i的值可以是任何值，通常大于数组的长度，因此isEmailValidList
[i]未定义。如果呼叫是同步的，则它将等待响应，而我不会增加，但事实并非如此。

那么，如何获得其相应电子邮件的正确isValid响应？

Answer 1

用诺言。Angular可以在没有任何“特殊干预”的情况下使用promise，就像为范围变量分配值一样，请参见plnkr。承诺是驯服异步编程以像同步编程一样工作的“基础”（尽管我们在浏览器中没有JavaScript生成器），并且受Angular团队的鼓励，因为它具有很高的可测试性和可维护性

http://plnkr.co/edit/8BBS2a1kC24BHBWRYp9W?p=preview

// trying to emulate your service here

var app = angular.module('app', []);

app.factory('User', function($q, $timeout){
  User = {};

  User.validateEmail = function(email){
    var d = $q.defer();

    $timeout(function(){
      if (/(yahoo|gmail)/.test(email.email)){
        d.resolve(email); // return the original object, so you can access it's other properties, you could also modify the "email" object to have isValid = true, then resolve it
      } else {
        d.resolve(); // resolve it with an empty result
      }
    }, 1000, false);

    return d.promise;
  };

  return User;
  });

app.controller('MainCtrl', function(User, $q){
  this.emails = [
    {email: '[e-mail]', name: 'Joe'},
    {email: '[e-mail]', name: 'Abc'},
    {email: '[e-mail]', name: 'XYZ'}, 
    {email: '[e-mail]', name: 'test'}
  ];

  this.isEmailValidList = [];
  var promises = [];

  for(var i=0; i < this.emails.length; i++) {
    promises.push(
      User.validateEmail(this.emails[i]) 
    );
  }

  $q.all(promises).then(function(emails){ 
    this.isEmailValidList = emails.filter(function(e){ return e; });
  }.bind(this));

});

注意：$timeout用来模拟异步任务，例如数据库调用等。您可以将整个emails数组传递给验证服务，然后返回该数组，而不是创建promise的中间数组。使用angular时，您可以为scope分配一个范围变量，并且可以在ng- repeat不更改代码的情况下使用它