التعامل مع (Callbacks) وتجنب "جحيم الاستدعاءات" (Callback Hell)

مرحباً بكم! سنتعلم اليوم كيفية استخدام الـ Callbacks بفعالية لفهم البرمجة غير المتزامنة، وكيفية تجنب الوقوع في "جحيم الاستدعاءات" الذي يؤدي إلى تعقيد الشيفرة وصعوبة صيانتها.

الخطوة 1: فهم أساسيات الـ Callbacks

الـ Callback هو دالة يتم تمريرها كمعامل لدالة أخرى، ليتم استدعاؤها لاحقاً عند اكتمال عملية معينة. هذا يسمح لنا بالتعامل مع العمليات غير المتزامنة.

ملاحظة تقنية: تُستخدم الـ Callbacks بشكل أساسي في JavaScript للتعامل مع العمليات التي تستغرق وقتاً، مثل قراءة الملفات، طلبات الشبكة، أو مؤقتات الزمن.

لنبدأ بمثال بسيط لدالة تأخذ Callback:

// دالة تحاكي عملية غير متزامنة (مثل جلب بيانات من قاعدة بيانات)
function fetchData(callback) {
    console.log("بدء جلب البيانات...");
    // محاكاة تأخير زمني باستخدام setTimeout
    setTimeout(() => {
        const data = "البيانات التي تم جلبها بنجاح!";
        console.log("تم جلب البيانات.");
        // استدعاء الـ callback مع البيانات
        callback(data);
    }, 2000); // تأخير لمدة ثانيتين
}

// استخدام الدالة fetchData مع callback
fetchData(function(result) {
    console.log("البيانات المستلمة في الـ Callback:", result);
});

الخطوة 2: مواجهة "جحيم الاستدعاءات" (Callback Hell)

يحدث "جحيم الاستدعاءات" عندما تتداخل العديد من الـ Callbacks داخل بعضها البعض، مما يجعل الشيفرة صعبة القراءة والفهم والصيانة. يحدث هذا عادةً عند وجود سلسلة من العمليات غير المتزامنة التي تعتمد على نتائج بعضها البعض.

مثال على "جحيم الاستدعاءات":

function step1(callback) {
    setTimeout(() => {
        console.log("الخطوة 1 مكتملة.");
        callback(null, "نتيجة الخطوة 1");
    }, 1000);
}

function step2(dataFromStep1, callback) {
    setTimeout(() => {
        console.log("الخطوة 2 مكتملة باستخدام:", dataFromStep1);
        callback(null, "نتيجة الخطوة 2");
    }, 1500);
}

function step3(dataFromStep2, callback) {
    setTimeout(() => {
        console.log("الخطوة 3 مكتملة باستخدام:", dataFromStep2);
        callback(null, "العملية النهائية مكتملة!");
    }, 500);
}

// مثال على Callback Hell
console.log("بدء سلسلة العمليات (Callback Hell):");
step1((err, result1) => { // الخطوة الأولى
    if (err) return console.error(err);
    step2(result1, (err, result2) => { // الخطوة الثانية تعتمد على الأولى
        if (err) return console.error(err);
        step3(result2, (err, finalResult) => { // الخطوة الثالثة تعتمد على الثانية
            if (err) return console.error(err);
            console.log("النتيجة النهائية من Callback Hell:", finalResult);
        });
    });
});

الخطوة 3: تجنب "جحيم الاستدعاءات" باستخدام الـ Promises

الـ Promises هي طريقة حديثة وفعالة للتعامل مع العمليات غير المتزامنة في JavaScript، وتساعد بشكل كبير في تجنب "جحيم الاستدعاءات" عن طريق توفير واجهة أكثر قابلية للقراءة.

ملاحظة تقنية: الـ Promise هي كائن يمثل القيمة النهائية لعملية غير متزامنة. يمكن أن تكون في إحدى الحالات: Pending (معلقة)، Fulfilled (مكتملة بنجاح)، أو Rejected (فاشلة).

لنحول المثال السابق إلى استخدام الـ Promises:

// تحويل الدوال إلى استخدام Promises
function promiseStep1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 1 مكتملة (Promise).");
            resolve("نتيجة الخطوة 1 من Promise"); // تمرير النتيجة بنجاح
        }, 1000);
    });
}

function promiseStep2(dataFromStep1) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 2 مكتملة (Promise) باستخدام:", dataFromStep1);
            resolve("نتيجة الخطوة 2 من Promise"); // تمرير النتيجة بنجاح
        }, 1500);
    });
}

function promiseStep3(dataFromStep2) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 3 مكتملة (Promise) باستخدام:", dataFromStep2);
            resolve("العملية النهائية مكتملة بنجاح!"); // تمرير النتيجة بنجاح
        }, 500);
    });
}

// استخدام الـ Promises لتجنب Callback Hell
console.log("\nبدء سلسلة العمليات (باستخدام Promises):");
promiseStep1()
    .then(result1 => promiseStep2(result1)) // ربط الخطوات باستخدام .then()
    .then(result2 => promiseStep3(result2))
    .then(finalResult => {
        console.log("النتيجة النهائية من Promises:", finalResult);
    })
    .catch(error => { // معالجة الأخطاء في مكان واحد
        console.error("حدث خطأ في سلسلة الـ Promises:", error);
    });

الخطوة 4: (Async/Await) لشيفرة أكثر وضوحاً

تعتبر async/await طريقة بناء جملة (syntactic sugar) فوق الـ Promises، مما يجعل الشيفرة غير المتزامنة تبدو وكأنها متزامنة، مما يزيد من وضوحها وقابليتها للقراءة بشكل كبير.

ملاحظة تقنية: الكلمة المفتاحية async تجعل الدالة تعيد Promise تلقائياً. الكلمة المفتاحية await يمكن استخدامها فقط داخل دالة async وتوقف تنفيذ الدالة حتى يتم حل الـ Promise التي تنتظرها.

لنطبق async/await على نفس المثال:

// استخدام الدوال التي تعيد Promises
// (نفس الدوال promiseStep1, promiseStep2, promiseStep3 من الخطوة السابقة)

// استخدام async/await لتسلسل العمليات
async function runSequence() {
    console.log("\nبدء سلسلة العمليات (باستخدام Async/Await):");
    try {
        const result1 = await promiseStep1(); // انتظار اكتمال promiseStep1
        const result2 = await promiseStep2(result1); // انتظار اكتمال promiseStep2
        const finalResult = await promiseStep3(result2); // انتظار اكتمال promiseStep3
        console.log("النتيجة النهائية من Async/Await:", finalResult);
    } catch (error) {
        console.error("حدث خطأ في سلسلة Async/Await:", error); // معالجة الأخطاء
    }
}

// استدعاء الدالة async
runSequence();

الكود النهائي الكامل

هذا هو السكربت الكامل الذي يجمع كل الأمثلة ويظهر تطور التعامل مع العمليات غير المتزامنة.

// -------------------------------------------------------------
// مثال 1: فهم أساسيات الـ Callbacks
// -------------------------------------------------------------

// دالة تحاكي عملية غير متزامنة (مثل جلب بيانات من قاعدة بيانات)
function fetchData(callback) {
    console.log("بدء جلب البيانات...");
    // محاكاة تأخير زمني باستخدام setTimeout
    setTimeout(() => {
        const data = "البيانات التي تم جلبها بنجاح!";
        console.log("تم جلب البيانات.");
        // استدعاء الـ callback مع البيانات
        callback(data);
    }, 2000); // تأخير لمدة ثانيتين
}

console.log("--- مثال Callbacks بسيط ---");
// استخدام الدالة fetchData مع callback
fetchData(function(result) {
    console.log("البيانات المستلمة في الـ Callback:", result);
});

// -------------------------------------------------------------
// مثال 2: مواجهة "جحيم الاستدعاءات" (Callback Hell)
// -------------------------------------------------------------

function step1(callback) {
    setTimeout(() => {
        console.log("الخطوة 1 مكتملة.");
        callback(null, "نتيجة الخطوة 1");
    }, 1000);
}

function step2(dataFromStep1, callback) {
    setTimeout(() => {
        console.log("الخطوة 2 مكتملة باستخدام:", dataFromStep1);
        callback(null, "نتيجة الخطوة 2");
    }, 1500);
}

function step3(dataFromStep2, callback) {
    setTimeout(() => {
        console.log("الخطوة 3 مكتملة باستخدام:", dataFromStep2);
        callback(null, "العملية النهائية مكتملة!");
    }, 500);
}

// التأخير لبدء هذا المثال بعد انتهاء المثال الأول (2 ثانية)
setTimeout(() => {
    console.log("\n--- مثال Callback Hell ---");
    console.log("بدء سلسلة العمليات (Callback Hell):");
    step1((err, result1) => { // الخطوة الأولى
        if (err) return console.error(err);
        step2(result1, (err, result2) => { // الخطوة الثانية تعتمد على الأولى
            if (err) return console.error(err);
            step3(result2, (err, finalResult) => { // الخطوة الثالثة تعتمد على الثانية
                if (err) return console.error(err);
                console.log("النتيجة النهائية من Callback Hell:", finalResult);
            });
        });
    });
}, 2500);

// -------------------------------------------------------------
// مثال 3: تجنب "جحيم الاستدعاءات" باستخدام الـ Promises
// -------------------------------------------------------------

// تحويل الدوال إلى استخدام Promises
function promiseStep1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 1 مكتملة (Promise).");
            resolve("نتيجة الخطوة 1 من Promise"); // تمرير النتيجة بنجاح
        }, 1000);
    });
}

function promiseStep2(dataFromStep1) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 2 مكتملة (Promise) باستخدام:", dataFromStep1);
            resolve("نتيجة الخطوة 2 من Promise"); // تمرير النتيجة بنجاح
        }, 1500);
    });
}

function promiseStep3(dataFromStep2) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("الخطوة 3 مكتملة (Promise) باستخدام:", dataFromStep2);
            resolve("العملية النهائية مكتملة بنجاح!"); // تمرير النتيجة بنجاح
        }, 500);
    });
}

// التأخير لبدء هذا المثال بعد انتهاء المثال الثاني (2.5 + 3.5 = 6 ثوانٍ تقريباً)
setTimeout(() => {
    console.log("\n--- مثال Promises ---");
    console.log("بدء سلسلة العمليات (باستخدام Promises):");
    promiseStep1()
        .then(result1 => promiseStep2(result1)) // ربط الخطوات باستخدام .then()
        .then(result2 => promiseStep3(result2))
        .then(finalResult => {
            console.log("النتيجة النهائية من Promises:", finalResult);
        })
        .catch(error => { // معالجة الأخطاء في مكان واحد
            console.error("حدث خطأ في سلسلة الـ Promises:", error);
        });
}, 6500);

// -------------------------------------------------------------
// مثال 4: (Async/Await) لشيفرة أكثر وضوحاً
// -------------------------------------------------------------

// استخدام الدوال التي تعيد Promises (نفس الدوال promiseStep1, promiseStep2, promiseStep3)

// استخدام async/await لتسلسل العمليات
async function runSequence() {
    console.log("\n--- مثال Async/Await ---");
    console.log("بدء سلسلة العمليات (باستخدام Async/Await):");
    try {
        const result1 = await promiseStep1(); // انتظار اكتمال promiseStep1
        const result2 = await promiseStep2(result1); // انتظار اكتمال promiseStep2
        const finalResult = await promiseStep3(result2); // انتظار اكتمال promiseStep3
        console.log("النتيجة النهائية من Async/Await:", finalResult);
    } catch (error) {
        console.error("حدث خطأ في سلسلة Async/Await:", error); // معالجة الأخطاء
    }
}

// استدعاء الدالة async بعد فترة زمنية لعدم تداخل المخرجات (6.5 + 3.5 = 10 ثوانٍ تقريباً)
setTimeout(runSequence, 10500);

النتيجة المتوقعة

عند تشغيل السكربت في بيئة Node.js، ستلاحظ سلسلة من المخرجات في سطر الأوامر (Console) توضح تسلسل العمليات غير المتزامنة. ستظهر المخرجات بترتيب زمني، حيث يبدأ كل قسم (Callbacks، Callback Hell، Promises، Async/Await) بعلامة مميزة. ستشاهد كيف تتداخل العمليات في "جحيم الاستدعاءات" مقارنة بالبنية الأكثر وضوحاً التي توفرها الـ Promises و async/await.

مثال على جزء من المخرجات:

--- مثال Callbacks بسيط ---
بدء جلب البيانات...
تم جلب البيانات.
البيانات المستلمة في الـ Callback: البيانات التي تم جلبها بنجاح!

--- مثال Callback Hell ---
بدء سلسلة العمليات (Callback Hell):
الخطوة 1 مكتملة.
الخطوة 2 مكتملة باستخدام: نتيجة الخطوة 1
الخطوة 3 مكتملة باستخدام: نتيجة الخطوة 2
النتيجة النهائية من Callback Hell: العملية النهائية مكتملة!

--- مثال Promises ---
بدء سلسلة العمليات (باستخدام Promises):
الخطوة 1 مكتملة (Promise).
الخطوة 2 مكتملة (Promise) باستخدام: نتيجة الخطوة 1 من Promise
الخطوة 3 مكتملة (Promise) باستخدام: نتيجة الخطوة 2 من Promise
النتيجة النهائية من Promises: العملية النهائية مكتملة بنجاح!

--- مثال Async/Await ---
بدء سلسلة العمليات (باستخدام Async/Await):
الخطوة 1 مكتملة (Promise).
الخطوة 2 مكتملة (Promise) باستخدام: نتيجة الخطوة 1 من Promise
الخطوة 3 مكتملة (Promise) باستخدام: نتيجة الخطوة 2 من Promise
النتيجة النهائية من Async/Await: العملية النهائية مكتملة بنجاح!

← السابقالفهرسالتالي →