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'
    ...
 })
}

我如何触发这些功能，我在html中调用此文件说calls.js，这将触发ajax调用。但有时只有一个会取得成功，有时两者都会取得成功。

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

所以，只是想知道如果你有超过2个问题，是否有更好的方法来处理多个AJAX来电。

Answer 1

如果您希望第二个请求执行 ，无论 第一个结果（成功或失败），请将其命名为 通过jqXHR的{{1}}：

done

否则，请使用function xs() { $.ajax({ url: 'api/endpoint1?loc="space"', method: 'GET' ... }).done(function(){ $.ajax({ url: 'api/endpoint2?name="x"', method: 'GET' ... }); }); });：
查看承诺
您可以阅读更多承诺Internationalization

Promise.all()

Answer 2

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 3

您可以使用Chrome的检查器查看前端或后端是否存在问题。在“网络”选项卡中按XHR过滤。如果你没有看到这两个电话那么这是一个前端问题，如果不是它可能是响应的问题。

另一方面，您可以控制何时启动呼叫。例如：

准备好文件：

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

或使用promises，您可以执行这两个并等到使用promise.all（）

接收数据

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

Answer 4

将第二个ajax调用放在第一个的成功/完成函数中，它肯定会执行

Answer 5

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 6

使用RxJS，您将能够实现您所描述的内容，如果我理解正确的话，并行启动多个异步调用，然后在所有调用完成后执行操作。

为此，有一个名为forkJoin的功能（我上次检查的记录相当糟糕）。这是一个示例（用TypeScript编写，但你明白了）：

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

在这段代码中，getLov返回一个Observable（它是某种进化的Promise）。执行所有异步调用时，getLovs函数本身返回一个Observable。生成的Observable是一个数组，由每个异步调用的结果组成。非常有用。

如何在一次调用中执行多个ajax调用函数

6 个答案: