Bagaimana untuk Merangkai Berbilang Panggilan Asynchronous menggunakan jQuery Promises?

Merangkai Tiga Panggilan Asynchronous dengan Janji jQuery

Dalam pengaturcaraan tak segerak, adalah perkara biasa untuk membuat berbilang panggilan ke API atau pelayan secara berturut-turut. Untuk mengendalikan panggilan ini dengan cekap, adalah wajar untuk merantainya bersama-sama, memastikan setiap panggilan selesai sebelum panggilan seterusnya dilaksanakan. Dengan janji jQuery, proses rantaian ini boleh dicapai dengan mudah.

Pertimbangkan senario berikut, di mana tiga panggilan HTTP perlu dibuat mengikut turutan dan data perlu dihantar dari satu panggilan ke panggilan yang lain:

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

function second() {
    ajax();
}

function third() {
    ajax();
}

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

Dalam contoh ini, niatnya adalah untuk membuat panggilan pertama, tunggu sehingga selesai, kemudian buat panggilan kedua menggunakan hasil panggilan pertama, dan akhirnya buat panggilan ketiga menggunakan keputusan panggilan kedua. Walau bagaimanapun, kod ini tidak akan berfungsi seperti yang diharapkan. Untuk merantai panggilan ini dengan betul, penggunaan janji jQuery yang betul diperlukan.

<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>

Kod ini menyediakan penyelesaian separa, tetapi rantaian untuk tiga fungsi masih tidak tercapai. Kunci untuk merantai berbilang panggilan terletak pada mengembalikan objek jqXHR yang dikembalikan oleh $.ajax() dalam setiap fungsi. Objek ini serasi Promise dan boleh dirantai menggunakan .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>

Dalam kod yang disemak ini, objek jqXHR dikembalikan oleh setiap panggilan $.ajax() mewakili Janji fungsi masing-masing. Ini membolehkan fungsi dirantai secara berurutan, dengan output satu fungsi dihantar sebagai input kepada yang seterusnya.

Data argumen, textStatus dan jqXHR timbul daripada panggilan $.ajax() dalam fungsi sebelumnya . Sebagai contoh, first() suapan second(), dan second() suapan third(), menyampaikan mana-mana data yang berkaitan.

Untuk melihat rantaian ini dalam tindakan, tunjuk cara langsung menggunakan $.when('foo' ) untuk menunaikan janji disediakan di bawah.

Atas ialah kandungan terperinci Bagaimana untuk Merangkai Berbilang Panggilan Asynchronous menggunakan jQuery Promises?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!