javascript - 变量在 Angular $resource 函数的回调中突然变得未定义

Question

我正在 Node 中构建一个函数来查询我的 mongoDB 数据库并将一些结果返回到一个对象中。不过，我无法正确设置对象。这是我的代码:

调用 MongoDB 查找的函数

  $scope.listItems = $resource('http://10.1.1.21\\:3000/api/uniques/:query');

  var itemsToList = [
    'designer',
    'store',
    'category'
  ]

  $scope.uniqueLists = {};

  for(var i = 0; i<itemsToList.length; i++){
    $scope.uniqueLists[itemsToList[i]] = [];  
    $scope.listItems.get({query:itemsToList[i]}, function(data){ 
        console.log(itemsToList); // Returns ["designer", "store", "Category"] x3
        console.log(itemsToList[i]); // Returns undefined, undefined, undefined
        console.log('i = ' + i); // Returns 3, 3, 3 (which is really odd, ideas?)

         $scope.uniqueLists[i] = data.query;

    });
  }

此代码的问题在上面的评论中。奇怪的是，i == 3 对于所有 3 个循环，当它应该等于 0、1 时，然后在 2 处结束>。

我的问题是

任何人都可以阐明这里发生了什么吗？它可能与 Node 的异步行为有关，但我在这里真的不知所措。

附加信息

$scope.listItems 正在访问的我的 ExpressJS 调用就在这里，如您所见，express 通过 res 提供数据(ponse) 据我所知，我无法在此处传入 i 或 itemsToList:

exports.uniqueEntries = function(req, res){
    var query = req.params.query;
    console.log(query);
    db.products.distinct(query, function(err, results){
        if (err) {
            console.log("Lookup Error: " + err);
        } else{
            res.json({
                query:results  
            });
        }       
    });
}

也许问题是当 expressJS 查找完成时，三个 for 循环已经完成并且 i == 2。我不知道为什么控制台会将其记录为 i ==3，我也不知道如何阻止循环以确保在继续下一个 之前完成查找for 循环。

Answer 1

$resource methods ，包括get()，都是异步的。因此，它们的回调将稍后被调用。而且，在这种情况下，later 是在 for 循环运行完成之后。

对于回调中的任何语句，i 将已经递增到 3，这就是为什么它不再是 0，1，或 2 用于:

console.log('i = ' + i);

您可以通过创建 closure 来保持 i 的每个值递增围绕回调 function:

function createCallback(itemsToList, i) {
  return function (data) {
      console.log(itemsToList); // Returns ["designer", "store", "Category"] x3
      console.log(itemsToList[i]); // Returns undefined, undefined, undefined
      console.log('i = ' + i); // Returns 3, 3, 3 (which is really odd, ideas?)

       $scope.uniqueLists[i] = data.query;
  };
}

for(var i = 0; i<itemsToList.length; i++){
  $scope.uniqueLists[itemsToList[i]] = [];  
  $scope.listItems.get({query:itemsToList[i]}, createCallback(itemsToList, i));
}

另一个选项，假设 itemsToList 是一个 Array，可以使用 .forEach()代替 for 循环作为迭代器将是闭包:

itemsToList.forEach(function (item, i) {
  $scope.uniqueLists[item] = [];
  $scope.listItems.get({query:item}, function(data){ 
    console.log(itemsToList);
    console.log(itemsToList[i]);
    console.log('i = ' + i);

    $scope.uniqueLists[i] = data.query;
  });
});