迭代数组,为每个元素调用$ .ajax.返回包含所有ajax结果的数组

Question

我刚刚开始使用JavaScript处理非平凡的事情,所以这可能很简单......

我想要完成的任务:迭代产品引用数组,为每个引用获取JSON,并返回所有产品信息的数组(具有通过引用索引的类似哈希的结构).

我尝试过的:

function fetchProductData(references){
  var product_data = new Object();
  references.forEach(function(ref){
    $.ajax({
      url: "http://localhost:3000/products/find.js?reference=" + ref,
      dataType: "jsonp",
      type: "GET",
      processData: false,
      contentType: "application/json",
      success: function(data) {
        product_data[ref] = data;
      }
    });
  });
  alert('before return: ' + product_data);
  return product_data;
};

$(document).ready(function(){
  var products = fetchProductData(references);
  alert('products : ' + products);
});

这是我不明白的:第一次调用alert显示数组内容时,数组为空.但是,在第二次调用时,数组将填充我想要的数据.

换句话说,"products:" alert在上面的代码中显示我想要的数据.但如果我评论"返回之前:" alert,它就不再这样做了.为什么是这样？

所以我的问题是:如何让jQuery进行多次$ .ajax调用来获取产品信息,在数组中收集该信息,然后返回该数组以便在代码中的其他地方使用它？

另外,为什么变量中的数据在被引用后可以神奇地访问alert？

Answer 1

"AJAX"中的"A"代表"异步":).在继续下一次迭代之前,您的程序不会等待调用完成,这意味着您可能无法获得所有数据.此警报也有同样的问题.在返回之前连接的操作:'到字符串添加足够的时间来获取变量中的一些数据.在更快的机器上,您可能会发现从未获得数据.

我认为你真的需要重新思考你的方法.在循环中拥有多个AJAX请求并不是一个好主意.它将大大增加页面的延迟.使用JSON传递所有参数一次,然后让服务器端脚本循环遍历并返回JSON中的单个响应.

function fetchProductData(references){
  // make sure your "references" is a JSON object
  $.getJSON('http://server/side/url', {'json':references}, function(product_data) {
      // do something with product_data (alert them, put them in an array, etc)

  });
}