使用嵌套AJAX调用的响应填充数组

Populating array with response from nested AJAX calls

本文关键字：响应 填充 数组 调用 嵌套 AJAX      更新时间：2023-09-26

我有一个数组，我想用AJAX调用的响应来填充，比如：

var dict = [];
function fillArray(){
  $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++){
        $.get("https://api.twitch.tv/kraken/streams"  , function(data){
          dict[data.key] = data;
    });
  });
}
function doStuff(){
  // dict is empty or undefined here
}

如何用对象填充dict，以便在doStuff（）中检索它们？目前，我可以在dict中插入一些东西，但当我尝试在fillArray（）函数之外访问dict时，我会得到一个空的dict变量，因为我假设get调用是异步的，并且在所有JS代码执行之后才会发生。。。

因此，dict是一个没有push方法的object。你需要dict=[];如果你必须有{}，那么你需要键：值对来填充它，比如：

dict[key] = value;

您必须跟踪在for循环中进行的调用数量，并在调用完成后启动回调函数。我对您当前的解决方案不完全有信心，因为它调用了不确定数量的ajax请求，但我也不完全了解您的问题范围或与您交谈的服务器

所以基本上，你必须用你目前拥有的东西做这样的事情：

var dict = [],
  requestsCompleted = 0;

function dictFilled() {
  // do something with your dict variable;
}
function fillArray(){
  $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++){
        $.get("https://api.twitch.tv/kraken/streams"  , function(data){
          dict[data.key] = data;
          requestsCompleted++;
          if (requestsCompleted === phpReturnVal.length) {
            dictFilled();
          }
    });
  });
}

这还没有经过测试，但基本上你必须定义一个函数，该函数可以访问你正在填充的数组，并在所有异步请求成功完成后调用它。对于这样的任务，我建议您看看jQuery的Deferred API。其中一个请求总是有可能失败，您的应用程序应该知道如果发生这种情况该怎么办。

我假设GET调用是异步的，直到在执行完所有JS代码之后。。。

看起来正确。

尝试

var dict = [];
function fillArray() {
  // return jQuery promise object
  return $.post('getUsersOnline.php', function(phpReturnVal){
    // ...
    for(var i = 0; i < phpReturnVal.length; i++) {
        // call same `url` `phpReturnVal.length` times here ?,
        // returning same `data` response at each request ?,
        // populating, overwriting `dict` with same `data.key` property ?
        $.get("https://api.twitch.tv/kraken/streams"  , function(data) {
          dict[data.key] = data;
        });
    }; // note closing `}` at `for` loop
    // return value
    return dict
  });
}
function doStuff(data) {
   // `data`:`dict`, promise value returned from `fillArray`
   console.log(data);
}
fillArray().then(doStuff, function error(jqxhr, textStatus, errorThrown) {
  console.log(textStatus, errorThrown)
});


var arr = ["a", "b", "c"];
var response = {
  "a": 1,
  "b": 2,
  "c": 3
};
var obj = {};
var dict = [];
function fillArray() {
  return $.when(arr).then(function(phpReturnVal) {
    for (var i = 0; i < phpReturnVal.length; i++) {
      // return same `response` here ?
      $.when(response).then(function(data) {
        dict[arr[i]] = data;
      });
    };
    return dict
  });
}
function doStuff(data) {
  console.log(data)
}
fillArray().then(doStuff, function error(err) {
  console.log(err)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

相关文章：