javascript - 带有异步 : false and return data 的 jQuery Ajax

Question

我正在构建一个基于浏览器的应用程序。 在 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 是正确的方法，对吧？

谢谢，

Answer 1

$.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 是一个已弃用的选项，因此您不能依赖它来工作。它还会锁定浏览器，直到服务器响应为止，这会带来非常糟糕的用户体验。最好使用回调函数或 promise 在 AJAX 请求完成时执行操作。 Here's a short summary of the promises concept这可能会有用。

---

剩下最后一个大问题:我们如何将这些调用链接在一起，以便 getShips() 取决于 getFleets() 和 manager 的结果.draw() 取决于两者？只需两次调用，您就可以仅使用回调来摆脱困境； getShips 的成功回调调用 getFleets，getFleets 的回调调用 manager.draw。这是使 A → B → C 依赖链正常工作的最简单方法——但我们也可以使用 jQuery's promises ，这可能会使我们的代码更易于理解。

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

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

接下来，让我们更新 getShips 以对该数据发出 AJAX 请求，并返回一个 promise ，返回组合数据:

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

这有点棘手； $.ajax 返回最终解析为我们的船舶数据的 promise 。完成后，我们将调用 .done 中的函数返回合并后的数据。 .done 也返回一个 promise – 所以 getShips 现在返回一个最终将返回合并数据的 promise。

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

window.onload = function() { 
    ajax.getFleets()
        .done(ajax.getShips)
        .done(manager.draw);
}