Question

我需要从几个远程页面（使用AJAX）获取一些数据，并在收集后同时处理所有数据。显而易见的方法是使请求同步，将它们的数据.push()放到数组中，然后一个接一个地触发它们。

但是，我可以只做异步，因为我不希望其他所有内容都冻结，因为这可能是一分钟（有很多很多请求）。但如果他们不同步，我就无法归还或存储他们的价值观......对吗？

我理想地想要的是一个带有我的价值观的数组，然后我可以处理并做些什么，但我会接受任何其他可行的方法。

Tl; dr：我如何能够存储和保留多个异步请求中的值，以便以后处理？

Answer 1

此函数查询网址并将结果存储在数组中，所有这些都在异步“for”循环中。

urls = ['abc.com','asdf.com']; // place your target urls in a array
storage = []; //we need somewhere to keep the results

function requestStuff(url,index){

  //this function uses an url and its index in the 'urls' array

  $.ajax(url,function(response){


    storage[index] = response;

    //check if we are finished
    if(storage.length == urls.length){
      alert('done!');
    }


  });

}

for(var i = 0; i<urls.length; i++){

  requestStuff(urls[i],i);

}

Answer 2

不使用Jquery，你的意思是这样吗？

<script>

var my_data_store=[];
var count_sucess=0;
var num_ajax_object=0; //counter for how many request object you create



// YOU CAN RUN FUNCTION LIKE THIS IN LOOP OR ANY WAY YOU PREFER
// AND POPULATE YOUR my_data_store

function loadXMLDoc()
{
var xmlhttp;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     my_data_store.push(xmlhttp.responseText);
     count_success++;//increase the counter
    }
  }
xmlhttp.open("GET","............",true);
xmlhttp.send();

***********************************************
//DON'T DON THIS!!
//THIS WON'T WORK BECAUSE THE CALL IS ASYNCHRONOUS
// AND YOU MIGHT END UP GETTING undefined
my_data_store.push(xmlhttp.responseText);
***********************************************
}
</script>

分配给 xmlhttp.onreadystatechange 的

功能只会在您收到AJAX请求的响应时执行 AFTER ，因此您可以通过这种方式自动存储数据。

如何知道所有数据是否已到达？

您可以轻松计算您发送的ajax请求数量（我没有为此编写任何代码，因为实现可能会有所不同）。与上面的代码一样，您可以使用以下内容：

if(num_ajax_object==count_sucess){

//DO YOUR PROCESSING NOW

}

请记住，如果请求失败，则不会考虑这一点。您可能希望添加try / catch，并且只考虑成功请求的数量和success_count。

Answer 3

您可以使用jQuery promises轻松实现此目的：

function request1(){
    return $.ajax(...);
}

function request2(){
    return $.ajax(...);
}

function request3(){
    return $.ajax(...);
}

function entryPoint(){
    $.when(
        request1(), 
        request2(), 
        request3()
    ).done(function(result1, result2, result3){
         //process the results
    });
}

此处有更多详情：

http://api.jquery.com/jquery.when/

多个异步请求来构建数据堆

3 个答案: