如何处理$ .Deferred中的嵌套调用

Question

我正在使用jQuery的$.Deferred函数处理多个嵌套调用。 当前代码无法正常工作。 我想在所有请求完成后触发一个函数。 但目前经过两次请求后，它到达console.log 。

 function ajac(){ var dfd = $.Deferred(); var api = require('modules/api'); for(var i=0;i<2;i++){ api.request("GET","https://t25501-s39032.sandbox.mozu.com/events/priceadjustment").then(function(res) { api.request("GET","https://t25501-s39032.sandbox.mozu.com/events/priceadjustment").then(function(res) { dfd.resolve(); }); }); } return dfd.promise(); } $.when(ajac()).then(function(){ console.log("reached"); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Answer 1

您遇到的问题是，即使循环表明您打算跟踪多个延迟，您最终还是要定义，解决和返回单个延迟。 $.when期望将多个递延值作为单独的参数传递。 为了使该示例正常工作，我提供了一个从jQuery文档中提取的模拟asyncEvent函数。 请参阅以下代码片段，以查看一切正常工作：

 function asyncEvent() { var dfd = jQuery.Deferred(); // Resolve after a random interval setTimeout(function() { dfd.resolve( "hurray" ); }, Math.floor( 400 + Math.random() * 2000 ) ); // Return the Promise so caller can't change the Deferred return dfd.promise(); } function makeAjac(i) { var dfd = $.Deferred() asyncEvent().then(function(res) { asyncEvent().then(function(res) { console.log(`request pair ${i} complete.`); dfd.resolve(); }); }); return dfd.promise(); } function ajac() { var promisesArray = []; for(var i=0;i<2;i++){ promisesArray.push(makeAjac(i)); } return promisesArray; } $.when.apply($, ajac()).then(function(){ console.log("reached"); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

我们在这里所做的就是将在for循环内执行的代码放入其自己的函数makeAjac ，该函数通过循环返回其特定迭代的承诺。 然后，在原始ajac我们将那些返回的promise放入我们的promisesArray ，然后从ajac返回。 最后，我们利用.apply来将数组中的promise作为单独的参数传递给$.when 。 正如您从运行代码段中看到的那样，此功能按预期运行。

Answer 2

单个承诺只能被解决或拒绝一次。 您需要返回不同的承诺才能解决所有的承诺。 像这样：

function ajac(){
  var allPromises = [];
  var api = require('modules/api');
  for(let i=0;i<2;i++){
      let dfd = $.Deferred();
      api.request("GET","https://t25501-s39032.sandbox.mozu.com/events/priceadjustment").then(function(res) {
          api.request("GET","https://t25501-s39032.sandbox.mozu.com/events/priceadjustment").then(function(res) {
            dfd.resolve();
          });
      });
      allPromises.push(dfd.promise());
  }
  return Promise.all(allPromises);
}
$.when(ajac()).then(function(){
  console.log("reached");
})

更好的方法是使用Observables（示例：RxJS）

您可以参考以下答案以了解词素与可观察变量之间的差异： https ://stackoverflow.com/a/37365955/6080889

Answer 3

您可以尝试以下方法：

您需要阅读以下链接： 使用多个递延承诺-JavaScript / jQuery

var callAPI=function(){
const promise = new Promise((resolve, reject) => {
         var api = require('modules/api');
         resolve(api.request("GET","https://t25501-s39032.sandbox.mozu.com/events/priceadjustment"));
  });
return promise;
}    


function getInfo(){
    const promise = new Promise((resolve, reject) => {
            var allPromise=[];
            for(var i=0;i<2;i++){
                  allPromises.push(callAPI());
            }
                  return Promise.all(allPromises);
     });
return promise;
}

getInfo().then((result)=>{
       console.log("reached",result);
});