如何使用 jQuery Promises 連結多個非同步呼叫？

使用 jQuery Promises 連結三個非同步呼叫

在非同步程式設計中，連續多次呼叫 API 或伺服器是很常見的。為了有效地處理這些調用，最好將它們連結在一起，確保每個調用在執行下一個調用之前完成。有了 jQuery Promise，這個連結過程就可以輕鬆完成。

考慮以下場景，其中需要依次進行三個HTTP 調用，並且需要將資料從一個調用傳遞到另一個調用：

<code class="javascript">function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}</code>

在此範例中，目的是進行第一次調用，等待其完成，然後使用第一次調用的結果進行第二次調用，最後使用第一次調用的結果進行第三次調用第二次通話。但是，此程式碼不會按預期工作。要正確連結這些調用，需要正確使用 jQuery Promise。

<code class="javascript">function first() {
    var deferred = $.Deferred();
    $.ajax({
        "success": function(resp) {
            deferred.resolve(resp);
        },
    });
    return deferred.promise();
}

function second(foo) {
    $.ajax({
        "success": function(resp) {
            // do something with the resp
        },
        "error": function(resp) {
            // handle the error
        },
    });
}

first().then(function(foo) {
    second(foo);
});</code>

此程式碼提供了部分解決方案，但仍然沒有實現三個函數的連結。連結多個呼叫的關鍵在於傳回每個函數中 $.ajax() 傳回的 jqXHR 物件。這些物件是 Promise 相容的，並且可以使用 .then()/.done()/.fail()/.always() 進行連結。

<code class="javascript">function first() {
    return $.ajax(...);
}

function second(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function third(data, textStatus, jqXHR) {
    return $.ajax(...);
}

function main() {
    first().then(second).then(third);
}</code>

在此修訂後的程式碼中，由傳回的 jqXHR 物件每個 $.ajax() 呼叫代表對應函數的 Promise。這允許函數按順序鏈接，一個函數的輸出作為輸入傳遞給下一個函數。

參數 data、textStatus 和 jqXHR 來自前一個函數中的 $.ajax() 呼叫。例如，first() 提供 secondary()，second() 提供third()，傳遞任何相關資料。

要查看此連結的實際效果，請使用 $.when('foo' 進行現場演示）以兌現承諾，如下所示。

以上是如何使用 jQuery Promises 連結多個非同步呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！