等到三个 ajax 调用解决触发函数（延迟？）

Posted 2023-02-19

【中文标题】等到三个 ajax 调用解决触发函数（延迟？）

【英文标题】：Wait until three ajax calls have resolved to fire function (defer?)

【发布时间】：2016-05-13 12:00:33

【问题描述】：

我需要等到三个 ajax 调用完成后再开始另一个函数。我已经尝试使用 jquery deferred promise https://api.jquery.com/deferred.promise/ 但我的作业在延迟数据加载之前返回。在触发函数之前，我需要强制完成这三个 ajax 调用。我不拘泥于使用延迟，这似乎是合乎逻辑的方式。

我正在使用数据表，需要在将数据加载到其中之前完成 ajax 调用。

"ajax":
        "url": API_ROOT + "jobs?available=true&max_results=500",
        "dataSrc": function(data)
            function all_loaded()
                var dfd = $.Deferred();
                var mats_loaded, fins_loaded, pros_loaded;
                setTimeout(function()
                $.ajax(
                    url: API_ROOT + "finishes?max_results=500",
                    dataType: 'json',
                    error: function()
                        console.log("Error getting finishes");
                    ,
                    success: function(data) 
                        finishes = data._items;
                        fins_loaded = true;
                        check_all_loaded();
                    
                );
                ,2000);
​
                $.ajax(
                    url: API_ROOT + "processes?max_results=500",
                    dataType: 'json',
                    error: function()
                        console.error("Error getting processes");
                    ,
                    success: function(data) 
                        processes = data._items;
                        pros_loaded = true;
                        check_all_loaded();
                    
                );
​
                $.ajax(
                    url: API_ROOT + "materials?max_results=500",
                    dataType: 'json',
                    error: function()
                        console.log("Error getting materials");
                    ,
                    success: function(data) 
                        materials = data._items;
                        mats_loaded = true;
                        check_all_loaded();
                    
                );
​
                check_all_loaded = function()
                    if (mats_loaded && fins_loaded && pros_loaded)
                        dfd.resolve("Loaded");
                    
                
​
                return dfd.promise();
            
​
            $.when( all_loaded()).then(function()
                var jobs = data._items;
                //a bunch of other stuff
                return jobs;
            );
        
    

.when 最终触发，这不是问题，问题在于 .when 没有返回任何数据，因为 Ajax 调用尚未完成。本质上，我们需要 .when 来停止执行所有 js，直到 promise 被解决。

抱歉，代码太长了，我只是想完整一下，并想说明我有三个单独的 Ajax 调用。谢谢你的想法。

【问题讨论】：

我认为三个ajax调用都完成了。您能否在您的then 回调中访问materials、finishes 和processes，而不是data，看看它是否有效。可能是data 对象的范围问题。

【参考方案1】：

您需要使用 javascript 来源的数据初始化数据表（请参阅data 选项）之后您的 Ajax 调用完成，而不是直接使用 Ajax 来源的数据和 ajax 选项。 p>

例如：

var ajax1 = $.ajax( /*...*/ );
var ajax2 = $.ajax( /*...*/ );
var ajax3 = $.ajax( /*...*/ );

// When all Ajax requests were successful
$.when(ajax1, ajax2, ajax3).done(function(a1, a2, a3)
   // a1, a2 and a3 are arguments resolved 
   // for the ajax1, ajax2 and ajax3 Ajax requests, respectively.

   // Each argument is an array with the following structure:
   // [ data, statusText, jqXHR ]

   // Merge data from three Ajax calls
   var data = a1[0]._items.concat(a2[0]._items, a3[0]._items);

   // IMPORTANT:
   // Initialize data table once all Ajax requests are successful
   $('#example').DataTable( 
     data: data,
     // ... other options ...
   );
);

【讨论】：

谢谢，这是最终与我正在使用的数据表一起工作的答案。

【参考方案2】：

您可以使用 $.when 并传递您需要等待的所有 ajax 调用。

例子：

var ajax1 = $.ajax(..)
var ajax2 = $.ajax(..)
var ajax3 = $.ajax(..)
$.when(ajax1, ajax2, ajax3).then(function()
 oncomplete code here...
);

【讨论】：

我喜欢！我唯一要添加的是$.when(ajax1, ajax2, ajax3).then( successFunction(), failureFunction())。在代码的其他地方定义successFunction() 和failureFunction()。

是的，这是下一步，这样您将拥有更清晰的代码。

这行不通，因为为data 选项定义的函数必须返回值，该值是来自所有三个调用的数据。使用您的解决方案是不可能的，因为数据在回调中可用。

是的，这只是迈向答案的一步。为了让他获取数据，回调应该将响应保存到另一个变量，该变量可以通过 $.when 访问。

或者更确切地说，回调可以已经被删除，并在何时移入:)