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

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

＆＃13;

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);
  });
}

＆＃13;

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

＆＃13;

Answer 2

将$.each更改为for循环。在循环完成之前，值.then可能没有完成处理。 $.each是同步的，但.then通常意味着它是一个承诺并且不是同步的。

$.each(response, function (index,val) {
    val.then(function (result){
        results.push(result[0]);                      
    });
});

改变

for(var idx = 0; idx < response.length; idx++) {
    results.push(response[idx]);
}

或与each保持一致，您可能只需要移除.then来电。

$.each(response, function (index,val) {
    results.push(val[0]);                      
});

Answer 3

我在这里看到一个潜在的问题：

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

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

         val.then(function (result){

             results.push(result[0]);                      

         });

     });

     self.renderResult(results);

});

基本上，你的伪代码说：对于$ .when（）命令中的每个返回值，取其值并返回 new 承诺（通过val.then）。但是，由于您从不等待延迟运行，因此无法保证在results.push来电之前调用self.renderResult(results)。

代码看起来很奇怪，因为你需要两个嵌套的延迟来进行ajax调用。所以我认为更大的元问题是为什么你首先要做val.then。但是，根据当前的代码，您需要执行以下操作：

var innerDeferreds = [];
$.each(response, function (index,val) {

     innerDeferreds.push(val.then(function (result){

         results.push(result[0]);                      

     }));;

 });
 $.when(innerDeferreds).then(function() { self.renderResult(results); });

同样，我的猜测是，您首先不需要val.then，但我需要查看调试器以查看response，{{index的值1}}和val是。（如果你设置了一个非常有帮助的jsfiddle！）

如何执行多个ajax调用并获得结果？

3 个答案: