تسلسل ثلاث مكالمات غير متزامنة مع وعود jQuery

في البرمجة غير المتزامنة، من الشائع إجراء مكالمات متعددة إلى واجهة برمجة التطبيقات (API) أو الخادم على التوالي. للتعامل مع هذه الاستدعاءات بكفاءة، من المستحسن ربطها معًا، مما يضمن اكتمال كل مكالمة قبل تنفيذ المكالمة التالية. باستخدام وعود jQuery، يمكن إنجاز عملية التسلسل هذه بسهولة.

خذ بعين الاعتبار السيناريو التالي، حيث يجب إجراء ثلاث مكالمات HTTP بالتسلسل، ويجب تمرير البيانات من استدعاء إلى آخر:

function first() {
    ajax();
}

function second() {
    ajax();
}

function third() {
    ajax();
}

function main() {
    first().then(second).then(third);
}

في هذا المثال، القصد هو إجراء مكالمة أولى، والانتظار حتى تنتهي، ثم إجراء مكالمة ثانية باستخدام نتيجة المكالمة الأولى، وأخيرًا إجراء مكالمة ثالثة باستخدام نتيجة المكالمة الأولى. المكالمة الثانية. ومع ذلك، لن يعمل هذا الرمز كما هو متوقع. لتسلسل هذه الاستدعاءات بشكل صحيح، يعد الاستخدام الصحيح لوعود jQuery أمرًا ضروريًا.

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);
});

يوفر هذا الكود حلاً جزئيًا، ولكن لم يتم بعد تحقيق التسلسل لثلاث وظائف. يكمن مفتاح تسلسل الاستدعاءات المتعددة في إرجاع كائن jqXHR الذي تم إرجاعه بواسطة $.ajax() في كل دالة. هذه الكائنات متوافقة مع الوعد ويمكن ربطها بالتسلسل باستخدام .then()/.done()/.fail()/.always().

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);
}

في هذه التعليمات البرمجية المعدلة، يمثل كائن jqXHR الذي يتم إرجاعه بواسطة كل استدعاء $.ajax() الوعد الخاص بالوظيفة المعنية. يتيح ذلك ربط الوظائف بشكل تسلسلي، مع تمرير مخرجات إحدى الوظائف كمدخل إلى الوظيفة التالية.

تنشأ بيانات الوسائط وtextStatus وjqXHR من استدعاء $.ajax() في الوظيفة السابقة . على سبيل المثال، يغذي الأول () الثاني () والثاني () يغذي الثالث ()، ويمرر أي بيانات ذات صلة.

لرؤية هذا التسلسل أثناء العمل، عرض توضيحي مباشر باستخدام $.when('foo') ) لتقديم وعد تم الوفاء به يتم توفيره أدناه.