jQuery Ajax with async: false 并返回数据

jQuery Ajax with async: false and return data

本文关键字：返回 数据 false Ajax with async jQuery      更新时间：2023-09-26

我正在构建一个基于浏览器的应用程序。在window.load上，我调用了一个jquery AJAX GET函数，它应该从服务器获取一些游戏数据。一旦数据在那里，我就会将这些数据解析到我的JavaScript中并构建一些东西。出于这个原因，我将异步设置为 false。

现在看看这个函数，我想在 ajax.success 上调用另一个函数，但我想使用新返回的数据以及发送到这个函数的数据作为参数（来自另一个异步 ajax 调用）。我该怎么做？谢谢

window.onload = function(){
    ajax.getFleets();
    ajax.getShips(fleets);
    manager.draw() // can only draw if both ajax functions have received data !)
}
getShips: function(fleets){
    $.ajax({
        type: "GET",
        url: "getGameData.php",
        datatype: "json",
        data: {
            type: "ships"
            },      
        error: ajax.error,
        success: ajax.mergeData, //want to pass fleets and returnData to this function
        async: false
    });
},

另外，一般来说，使用 async： false 是正确的方法，对吧？

谢谢

$.ajax将向回调函数传递 AJAX 请求的结果，因此您可以使用简单的匿名函数来获取这两个部分。假设你已经定义了如下的回调函数： 

ajax = {};
ajax.mergeData = function(fleets, ajaxResult) { 
    console.log(fleets);
    console.log(ajaxResult);
};

您可以将回调函数定义为：

function(result) { ajax.mergeData(fleets, result); }
综

上所述，您的getShips函数将如下所示：

ajax.getShips = function(fleets) {
    $.ajax({
        type: "GET",
        url: "getGameData.php",
        datatype: "json",
        data: {
            type: "ships"
            },      
        error: ajax.error,
        success: function(result) { ajax.mergeData(fleets, result); }
    });
};

回答您的第二个问题：async: false是一个已弃用的选项，因此您不能依赖它来工作。它还会锁定浏览器，直到服务器响应，这会导致非常糟糕的用户体验。最好使用回调函数或承诺在 AJAX 请求完成时执行操作。以下是可能有用的承诺概念的简短摘要。

这就留下了最后一个大问题：我们如何将这些调用链接在一起，以便getShips()依赖于getFleets()的结果，而manager.draw()依赖于两者？只需两次调用，您就可以仅使用回调; getShips ' 成功回调调用getFleets，getFleets ' 回调调用manager.draw。这是让 A → B → C 依赖链工作的最简单方法——但我们也可以使用 jQuery 的承诺，这可能会使我们的代码更容易理解。

首先，我们更改getFleets以返回调用$.ajax的结果： 

ajax = {};
ajax.getFleets = function() { 
    return $.ajax({ /* Details elided here */ });
}

接下来，让我们更新getShips以对该数据发出 AJAX 请求，并返回返回组合数据的承诺： 

ajax.getShips = function(fleets) { 
    return $.ajax({ /* Details elided again */ })
            .done(function(ajaxResult) { return mergeData(fleets, ajaxResult); });
 };

这有点棘手; $.ajax返回一个承诺，该承诺最终将解析为我们的船舶数据。当它发生时，我们将在.done中调用返回合并数据的函数。而且该.done也返回一个承诺 - 因此getShips现在返回一个最终将返回合并数据的承诺。

所以现在我们可以编写我们的 window.onload 函数来将所有这些链接在一起，并且仅在所有数据可用时才调用manager.draw： 

window.onload = function() { 
    ajax.getFleets()
        .done(ajax.getShips)
        .done(manager.draw);
}
相关文章：