系列的jQuery調用

我現在有一系列需要按照一定的順序來執行AJAX調用。沒有一個是完全可行的。系列的jQuery調用

但實質上所有的performSeriesofCalls確實是按照Call1 -> Call2 -> Call3 -> Call4 -> Call5的確切順序進行ajax調用。

performSeriesofCalls: function() { 
     doThisFirst(function() { 
      Service.call1(arg1,arg2).done(function (modelData) { 

       updateModel(modelData); 
       var saveId = modelData.Id1; 
       var discardId = modelData.id2; 

       Service.call2(saveId, arg4).done(function() { 

        Service.call3(discardId).done(function() { 

         Service.call4(saveId).done(function() { 

          Service.call5(saveId).done(function (savedModel) { 

           updateModel(savedModel); 
           updateMessage("Performed"); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }

看着例子here和Stackoverflow answer: ordering ajax calls並試圖重構爲以下使用jQuery.when()，但我想知道是否可以做的更好。

performSeriesofCalls: function() { 
      doThisFirst(function() { 
       Service.call1(arg1,arg2).done(function (modelData) { 

        updateModel(modelData); 
        var saveId = modelData.Id1; 
        var discardId = modelData.id2;; 

        jQuery.when(
         Service.call2(saveId, arg4) 

        ).done(function() { 
         jQuery.when(
          Service.call3(discardId), 
          Service.call4(saveId) 
         ).done(function() { 
          Service.call5(saveId).done(function (savedModel) { 
           updateModel(savedModel); 
           updateMessage("Performed"); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }

注意：Service.js包含實際的ajax請求爲了模塊化。在Service.js

樣品呼籲

/** 
* Update Status 
* @returns {jqXHR} From the jQuery.ajax() call 
*/ 
call2: function (quoteId, action) { 
    return jQuery.ajax({ 
     method: "POST", 
     url: serviceURL + "/endpoint/" + quoteId + "/action", 
     data: JSON.stringify(action), 
     contentType: "application/json" 
    }); 
}

來源

2016-12-07 daredadevil

請問您服務調用返回的承諾？ – Dekel

定義了「arg3」和「arg4」在哪裏？ – guest271314

@dekel更新了Service.js中的調用示例。 – daredadevil

只需使用then。

（確保傳遞給然後每函數返回一個承諾，否則將被視爲一個立即解決的承諾）。

您的代碼，重構：

doThisFirst(function() { 

    return Service.call1(arg1,arg2); 

}).then(function (modelData) { 

    updateModel(modelData); 
    var saveId = modelData.Id1; 
    var discardId = modelData.id2;; 
    return Service.call2(saveId, arg4) 

}).then(function() { 

    return jQuery.when(
     Service.call3(discardId), 
     Service.call4(saveId) 
    ); 

}).then(function() { 

    return Service.call5(saveId).done(function (savedModel) { 
     updateModel(savedModel); 
     updateMessage("Performed"); 
    }); 

}).then(function(){ 

    // whatever 

});

下面的代碼片段是如何then作品的視覺例如：

doProcess("A", 3).then(function(){ 
 
    return doProcess("B", 3); 
 
}).then(function(){ 
 
    return doProcess("C", 2); 
 
}).then(function(){ 
 
    return $.when(
 
    doProcess("D.1 (in parallel)", 5), 
 
    doProcess("D.2 (in parallel)", 3) 
 
); 
 
}).then(function(){ 
 
    return doProcess("E", 2); 
 
}).then(function(){ 
 
    $("#processlist").append("<h2>All done!</h2>"); 
 
}); 
 

 

 
function doProcess(name, time) { 
 

 
    var $domElem = $("<div/>", { 
 
    "class": "processelem" 
 
    }); 
 
    var $secondsSpan = $("<span/>"); 
 
    $domElem.append("Process " + name + ", finishing in "); 
 
    $domElem.append($secondsSpan); 
 
    $("#processlist").append($domElem); 
 
    
 
    var timeLeft = time; 
 
    $secondsSpan.text(timeLeft); 
 
    
 
    var def = $.Deferred(); 
 
    var decrement = function(){ 
 
    timeLeft--; 
 
    if(timeLeft >= 0){ 
 
     $secondsSpan.text(timeLeft); 
 
     setTimeout(decrement, 1000); 
 
    } else { 
 
     $domElem.text("Process " + name + " (finished)"); 
 
     $domElem.addClass("finished"); 
 
     def.resolve(); 
 
    } 
 
    } 
 
     
 
    decrement(); 
 
     
 
    return def.promise(); 
 

 
}

.finished { 
 
    color: gray; 
 
}

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

來源

2016-12-08 00:38:11 abl

系列的jQuery調用

回答

相關問題