确保第一个 ajax 函数在第二个之前完成答案

【问题标题】：Make sure first ajax function finishes before second one确保第一个 ajax 函数在第二个之前完成
【发布时间】：2020-02-22 12:07:05
【问题描述】：

我有一个 JavaScript 函数，它使用 jQuery 发出两个连续的 Ajax 请求。我想确保在调用第二个函数之前已经加载了第一个请求。有什么办法可以做到吗？

【问题讨论】：

是第二个 Ajax 调用需要等到第一个调用返回，还是第二个 callback 调用需要等待？（即在触发第二个 ajax 请求之前您是否需要等待，或者两者都可以一个接一个地触发，但是您要确保如果第二个首先返回，则它的回调被阻止，直到第一个返回）
在第一个函数完成之前，不应触发第二个函数。第一个函数创建一个表单元素，第二个函数获取该表单值并根据它进行一些计算。

标签： javascript jquery ajax

【解决方案1】：

要么在$.ajax 选项中指定async: false，要么在第一次调用的complete 回调中进行第二次ajax 调用。

【讨论】：

那不是async: false吗？
确实会。该死的负面逻辑。
async: false 效果很好。我调用这两个函数的顺序不同，所以它比回调方法更可取。

【解决方案2】：

$.post("script1.php", {data:"val"}, function(response) {
  $.post("script2.php", {data:response}, function(results) {
    // this second call will be initialized when the first finishes
  });
});

【讨论】：

【解决方案3】：

使用jQuery最简单的方法是这样的：

 $.ajax({
   type: "POST",
   url: "some.php",       
    success: function(msg){
       $.ajax({
         type: "POST",
         url: "some2.php",

         success: function(msg){
             alert( "End of second call" );
         }
      });
    }
 });

【讨论】：

【解决方案4】：

在第一个函数的回调中，进行第二次调用。

【讨论】：

【解决方案5】：

为了获得最佳结果，您可能应该在第一个函数的回调中调用第二个函数。

例如：

$.post("http://www.somewebsite.com/page.php", function(data) {
  // whatever
  function2();
});

【讨论】：

【解决方案6】：

一个示例实现：

function callback() {$('div#second_ajax_output').load('http://www.google.com');}
$('div#first_ajax_output').load('http://www.yahoo.com',callback);

【讨论】：

【解决方案7】：

简单的方法是在第一个请求返回时触发第二个请求（在完成回调中）。

如果您需要更复杂的方法，请查看AjaxQueue 插件。您可以通过这种方式对请求进行排队。

【讨论】：

【解决方案8】：

由于 jQuery 请求返回 thenables，在现代浏览器中，您可以 await 每次调用。例如：

async function fetchBoth() {
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
}

fetchBoth();

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await $.get('https://jsonplaceholder.typicode.com/todos/1');
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await $.get('https://jsonplaceholder.typicode.com/todos/2');
  console.log('got todo2', todo2);
}

fetchBoth();

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

不要使用async: false。同步ajax请求are deprecated，不应该使用；如果使用，用户可能会因此看到控制台警告。

请注意，await 的这种用法适用于任何类型的 Promise，而不是 ajax 请求，而不仅仅是 jQuery。例如：

async function fetchBoth() {
  console.log('start 1');
  const todo1 = await fetch('https://jsonplaceholder.typicode.com/todos/1').then(res => res.json());
  console.log('got todo1', todo1);
  console.log('start 2');
  const todo2 = await fetch('https://jsonplaceholder.typicode.com/todos/2').then(res => res.json());
  console.log('got todo2', todo2);
}

fetchBoth();

【讨论】：

【解决方案9】：

编辑：误读问题；我的错。如果您希望同时执行两个 AJAX 请求，但只有在两者都完成后才运行回调，那么您就是这样做的！

试试这个：

var completedCount = 0;
var callback = function()
{
    completedCount++;
    if (completedCount == 2)
    {
        // Do something.
    }
};

$.post('url-1', {}, callback);
$.post('url-2', {}, callback);

【讨论】：