在所有先前的ajax調用完成后觸發ajax調用

Question

可以說我有如下功能：

function A(){
    func B();
    ajax call last;
}

func B(){
   if some condition1
       func C();
   if some condition2
       func D();
   if some condition3
       func E();
}

func C(){
     some ajax cal 1
}

func D(){
     ajax call 2
}

func E(){
     ajax call 3
}

我的問題是，僅當所有先前的ajax調用均已完成時才應觸發ajax調用last，即ajax調用1、2、3。

Answer 1

如果您使用的是jQuery，則可以基於promise來訪問各種調用。 調用$.ajax返回一個promise ，可用於推遲后續調用。 調用when請參閱jQuery的文檔（ 此處為docs）。

在$.ajax調用完成后when執行函數when使用。 您可以對$.ajax這樣的單個調用或多次調用使用相同的技術。

根據您的問題，我不確定您要如何鏈接這些呼叫，但這是根據您的代碼進行的嘗試（未經測試，但這應該可以使您走上正確的軌道）：

func B()
{
    var callC = null;
    var callD = null;
    var callE = null;

    if (condition1)
        callC = $.ajax("/call/1");

    if (condition2)
        callD =  $.ajax("/call/2");

    if (condition3)
        callE =  $.ajax("/call/3");

    $.when(callC, callD, callE).then($.ajax("/call/last"));
}

.then將在3個AJAX調用完成后執行 ，無論它們成功與否。 如果只想在所有調用都返回成功后繼續，則還要查看.done 。

Answer 2

嘗試利用return ， .then()

function A() {
    return B();
}

function B() {
   if (some_condition1) {
       return C();
   };
   if (some_condition2) {
       return D();
   };
   if (some_condition3) {
       return E();
   };
}

function C() {
     // some ajax call 1
     return $.ajax()
}

function D() {
     // ajax call 2
     return $.ajax()
}

function E() {
     // ajax call 3
     return $.ajax()
}

A().then(function() {
  // ajax call last;
  return $.ajax()
});