如何執行多個Ajax調用等功能於一體的呼叫

Question

只是好奇Ajax調用，所以我有要求不同Url endpoints多個AJAX調用的功能，但我覺得有時候一個呼叫失敗和其他人獲得成功。

說我有這些功能，我知道這兩個電話的工作時，我安慰他們登錄，它返回我，我需要然而，一旦在頁面加載這些調用將觸發值。

function xs() { 
$.ajax({ 
    url: 'api/endpoint1?loc="space"', 
    method: 'GET' 
    ... 
}) 
} 
function xd() { 
$.ajax({ 
    url: 'api/endpoint2?name="x"', 
    method: 'GET' 
    ... 
}) 
} 

如何觸發這些功能，我把這個文件說calls.js在我的HTML，這將觸發Ajax調用。但有時只有其中一個會取得成功，有時甚至兩個。

function init() { 
xs(); 
xd(); 
} 
init(); 

所以只是想知道如果有處理多一個更好的辦法AJAX呼籲特別是如果你有超過2

Answer 1

如果您希望執行第二個請求不管第一（成功或失敗）的結果，通過jqXHR的done稱它爲：

function xs() { 
$.ajax({ 
    url: 'api/endpoint1?loc="space"', 
    method: 'GET' 
    ... 
}).done(function(){ 
    $.ajax({ 
     url: 'api/endpoint2?name="x"', 
     method: 'GET' 
     ... 
    }); 
    }); 
}); 

否則，考慮承諾使用Promise.all()：

你可以閱讀更多到承諾here

init(){ 

    Promise.all([ 
     $.ajax({ 
      url: 'api/endpoint1?loc="space"', 
      method: 'GET' 
      ... 
     }), 
     $.ajax({ 
      url: 'api/endpoint2?name="x"', 
      method: 'GET' 
      ... 
     }) 
    ]).then(function(){ 
     //Some other code - Won't run until both requests have finished 
    });  
} 

Answer 2

把你的第二個ajax呼叫的成功裏面/完成的第一功能，它會執行肯定

Answer 3

var i = 0; 
function xs() { 
$.ajax({ 
url: 'api/endpoint1?loc="space"', 
method: 'GET', 
success: function(data){ 
if(i == 0){ 
    i++; 
    xd(); 
} 

} 
}); 
} 

function xd() { 
$.ajax({ 
url: 'api/endpoint2?name="x"', 
method: 'GET', 
success: function(data){ 
if(i == 0){ 
    i++; 
    xs(); 
} 
} 
}); 
} 

Answer 4

function xs() { 
    $.ajax({ 
     url: 'api/endpoint1?loc="space"', 
     method: 'GET' 
     ... 
     success: function() { 
      $.ajax({ 
       url: 'api/endpoint2?name="x"', 
       method: 'GET' 
       ... 
      }) 
     } 
    }) 
} 

function init() { 
xs(); 
} 
init(); 

Answer 5

你可以看到，如果它在你的前端或與Chrome瀏覽器的檢查後端的一個問題。在XHR的網絡標籤過濾器中。如果你沒有看到這兩個電話，那麼這是一個前端問題，如果不是這可能是響應的問題。

另一方面，您可以控制何時啓動呼叫。例如：

使用文檔準備：

$(function(){ 
 
\t //jQuery code here 
 
})

或使用的承諾，直到收到使用promise.all（）的數據，您可以執行這兩個等待

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

Answer 6

使用RxJS，你將能夠實現你所描述的內容，也就是說，如果我理解正確，並行啓動多個異步調用，然後在所有調用完成時執行一個操作。

有一個（我查了一下，而不良記錄最後一次）的功能，稱爲forkJoin只是這一點。下面是一個示例（寫在打字稿，但你的想法）：

/** 
    * Get some Lists of Values. 
    */ 
    public getLovs(codes: string[], lang: string) { 
    return Observable.forkJoin(
     codes.map(code => { return this.getLov(code, lang); }) 
    ); 
    } 

在這段代碼，getLov返回可觀察到的（這是某種進化無極）。當所有的異步調用都被執行時，getLovs函數本身會返回一個Observable。由此產生的Observable是由每個異步調用結果組成的數組。很有用。