javascript - 尝试将 jquery $.when() & .done() 与 2x $.ajax 调用一起使用，但 did() 立即被调用

Question

这个问题已经有答案了:

How do I return the response from an asynchronous call? (42 个回答)

已关闭 5 年前。

我正在尝试使用 jQuery 同时(异步)进行 2x Ajax 调用，如下所示:

function displayAccount() {
    $.when(doGet("accounts/1", null),
           doGet("orders/1", null))
        .done(displayAccountSuccess);
}

function displayAccountSuccess(accountJson, ordersJson) {
  console.Info(accountJson);
  console.Info(ordersJson);
}

当我这样做时，displayAccountSuccess在 2x doGet 之前调用被调用/处理。当然，两个方法参数的值为 undefined .

很明显我的doGet没有返回 promise :(

对于该方法...

function doGet(endpoint, queryString)
{
    var url = ApiWebsite + "/" + endpoint;
    if (queryString)
    {
        url += "?" + queryString;
    } 

    var authorizationHeader = isAuthenticated()
        ? "bearer " + localStorage.getItem(LocalStorageJwt)
        : "";

    $.ajax({
        url: url,
        headers: {
            authorization: authorizationHeader
          }
    })
    .done(function(json)
    {
         return json; 
    })
    .fail(function(data1, data2){ 
        displayError("fail");
    }).promise();
}

好吧 - 现在这就是有趣的:) ajajx.done方法确实有正确的 json 响应!所以我认为我正在将该 json 数据返回给调用者。

现在，如果我更改代码:

$.ajax(....

到

return $.ajax(....

when.done(..)函数被延迟，并且仅在 2x ajax 调用完成后调用!耶! ..但是...该数据的VALUE是一个包含3项的数组..data, successTest, jqXHR :( 当然，我可以从数组槽 0 ( accountJson[0] ) 获取 json 值，但这意味着我不理解这里的一些非常基本的东西 :(

我希望我的done()方法将只接受 2x json 对象，而不是完整的 SUCCESS(或失败)数组。

我希望这是有道理的:脸红:

Answer 1

使用 then 返回一个 Promise 并过滤返回的内容

function doGet(endpoint, queryString)
{
    var url = ApiWebsite + "/" + endpoint;
    if (queryString)
    {
        url += "?" + queryString;
    } 

    var authorizationHeader = isAuthenticated()
        ? "bearer " + localStorage.getItem(LocalStorageJwt)
        : "";

    return $.ajax({
        url: url,
        headers: {
            authorization: authorizationHeader
          }
    })
    .then(function(json) {
         return json; 
    }, function(){ 
        displayError("fail");
    });
}

<小时/>

问题是 done() 返回实际的延迟对象，因此您在后续的 .done 回调中将始终获得相同的参数。您无法从中返回。

then 将返回一个新的 Promise，因此它返回的内容将从该点开始在链中使用。

查看一个小演示 ( https://jsfiddle.net/5cm3grg3/ )，它展示了您的问题，然后取消注释 then 部分以查看其是否正常工作。