javascript - AngularJS 在 $http 调用循环中收集数据

Question

我必须在客户端 API 上执行以下循环。在循环的每次迭代中，我必须将 API 调用返回的数据作为对象添加到对象数组，然后在循环结束时我需要显示对象数组的内容。

由于 JS 代码执行的性质(异步)显示对象数组内容总是返回未定义的，所以我想知道是否有人可以帮我解决这个问题。谢谢。

  var invoiceObj = {};
  var invoiceObjArray = [];
  for (var i=0; i< 5; i++)
  {
      //getAllInvoices returns a promise from $http.GET calls...
      ClientInvoiceService.getAllInvoices(i).then(function(invoice){

             invoiceObj = { invoiceNum: invoice.Result[0].id,
                            clientName: invoice.Result[0].clientName};

             invoiceObjArray.push(invoiceObj);   

         }, function(status){
            console.log(status);
         });

  }

  console.log(invoiceObjArray[0]); //return undefined
  console.log(invoiceObjArray[1]); //return undefined

Answer 1

您需要做的是存储所有 promise ，然后将它们传递给 $q.all (scroll all the way down) ，这将把它们包裹在一个巨大的 promise 中，只有在所有问题都得到解决的情况下才会得到解决。

将您的代码更新为:

var invoiceObj = {};
var invoiceObjArray = [];
var promises = [];
for (var i=0; i< 5; i++)
{
      //getAllInvoices returns a promise...
      promises.push(ClientInvoiceService.getAllInvoices(i).then(function(invoice){

             invoiceObj = { invoiceNum: invoice.Result[0].id,
                            clientName: invoice.Result[0].clientName};

             invoiceObjArray.push(invoiceObj);   

         }, function(status){
            console.log(status);
         }));

}
$q.all(promises).then(function(){
    console.log(invoiceObjArray[0]);
});

This Egghead video是一个很好的使用 $q.all 的教程: