javascript - 如何执行多个ajax调用并获取结果？

Question

您好，我想执行一批 ajax 调用并获取响应，然后为用户呈现结果。

我正在使用此代码，但它不起作用，因为渲染函数在收集所有 ajax 响应之前执行。

serviceQuery: function (id) {    

   return $.getJSON(SERVICEURL + "/", id);

},

queryService: function(data){

   var self = this;
   var queries = [];
   var results = [];

   $.each(data, function (index, value) {
        queries.push(self.serviceQuery(value.id)); 
   });

   $.when(queries).done(function (response) {

         $.each(response, function (index,val) {

             val.then(function (result){

                 results.push(result[0]);                      

             });

         });

         self.renderResult(results);

   });

},

renderResult: function(results){

     $.each(results, function (index, value) {
     ///Error here cause the value.Name is undefined
          console.info(value.name);
     });

}

关于如何在执行渲染函数之前等待所有 ajax 调用完成的任何想法？

Answer 1

在 $.when() 调用中使用 .apply() 来处理 Promise 数组。另请注意 .then() 异步返回结果

let queries = [
  // `$.ajax()` call and response
  new $.Deferred(function(dfd) {
                                    
    setTimeout(dfd.resolve, Math.floor(Math.random() * 1000)
      // response, textStatus, jqxhr
    , [{name:"a"}, "success", {}])
    })
    // `$.ajax()` call and response
  , new $.Deferred(function(dfd) {
    setTimeout(dfd.resolve, Math.floor(Math.random() * 1000)
      // response, textStatus, jqxhr
    , [{name:"b"}, "success", {}])
    })
];

$.when.apply(null, queries)
.then(function() {
  renderResult($.map(arguments, function(res) {return res[0]}));   
});

function renderResult(results) {
  $.each(results, function (index, value) {
    console.info(value.name);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>