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

我对ajax调用很好奇，所以我有多个ajax调用函数，可以调用不同的

Url端点

，但我发现有时一个调用失败，其他调用成功

假设我有这些函数，并且我知道在控制台记录它们时这两个调用都起作用，它会返回我需要的值，但是这些调用会在页面加载后触发

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();

---

因此，我想知道是否有更好的方法来处理多个

AJAX

调用，特别是如果您有两个以上的调用。

将第二个

AJAX

调用放在第一个函数的success/complete函数中，它肯定会执行。

您可以通过铬。在“网络”选项卡中，按XHR筛选。如果您没有看到两个呼叫，那么这是前端问题，如果没有，则可能是响应问题

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();
 }
}
});
}

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

使用准备好的文档：

$（函数（）{
//这里是jQuery代码
})

如果您希望第二个请求执行，而不管第一个请求的结果如何（成功或失败），请通过

jqXHR

的

完成调用它：

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

否则，请使用
Promise.all（）
查看承诺：

你可以阅读更多关于承诺的内容

使用，您将能够实现您所描述的，也就是说，如果我理解正确的话，并行启动几个异步调用，然后在所有调用完成后执行一个操作

就为了这个，有一个叫做
forkJoin
的特性（上次我检查时文档记录得相当糟糕）。下面是一个示例（用TypeScript编写，但你已经明白了）：

在这段代码中，
getLov
返回一个可观察的（这是一种进化的承诺）。当执行了所有异步调用时，
getLovs
函数本身返回一个可观察值。生成的可观察对象是一个数组，由每个异步调用的结果组成。非常有用。
这个问题不清楚。你到底错过了什么？@Liam很抱歉，这是一个打字错误，我只是觉得奇怪，我的一些ajax调用失败，而其他调用成功。假设
函数xs（）
在第一次加载中失败，那么它将在第二次加载中获得成功，但是
函数xd（）
将失败。您可以在xs（）成功/失败中插入xd（）。最佳实践是执行一个ajax调用，并在后端执行其他业务逻辑（如果一个调用其他业务逻辑失败等），我建议查看承诺-不，我不需要依赖一个是否成功，因为理论上，像我这样单独调用它们会使我在这两方面都获得成功。但出于某种奇怪的原因，它不会执行链式调用，这不是上面函数的想法，否则我会这样做。我想让他们一次全部执行。加上这应该是一个评论而不是一个答案。这将永远循环…你现在我意识到现在试试这个代码是的，这同样糟糕。这会更有意义。你现在也有了比赛条件。你先打哪一个电话，还是两个都打？请解释一下你的代码。仅代码的答案不太有用我的逻辑是，当var i=0时，调用函数，当它的1时，调用函数，然后不调用函数。我认为这个逻辑是正确的。我的想法是一次调用它们，而不依赖第一个函数来成功。理论上，他们都应该接到成功的电话，因为他们是单独接到电话的。这有助于你更进一步吗？我不想回答第一次呼叫是否成功，请参阅上面的其他评论。他没有要求RxJs解决方案。没有必要包含这个库来解决这个问题，这样做会造成巨大的过度杀伤力好吧，所以你会否决一个有效的解决方案，但你不会否决一个像上面那样永远循环的解决方案。此外，据我所知，在这个线程中，除了我的答案外，没有一个答案允许按照OP的要求并行启动多个异步调用。实际上，我对这两个都投了反对票……如果OP想要的是这样的话（虽然不清楚，但很好……）如果不增加一个图书馆，完全有可能做到这一点。我也不是要你否决另一个图书馆。当然OP并没有特别要求RxJs解决方案，他要求的是一个能根据他的要求工作的解决方案。
function xs() {
 $.ajax({
    url: 'api/endpoint1?loc="space"',
    method: 'GET'
    ...
 }).done(function(){
     $.ajax({
         url: 'api/endpoint2?name="x"',
         method: 'GET'
         ...
     });
   });
});

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
    });     
}

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