المبرمج ايهاب منصور، مطور و مبرمج واجهات أمامية باستخدام ReactJS

فهم الوعود (Promises) و Async/Await في جافاسكريبت

في عالم البرمجة الحديثة، تعتبر جافاسكريبت واحدة من أكثر اللغات استخدامًا، خاصة في تطوير تطبيقات الويب. ومع تزايد تعقيد البرمجة، كان من الضروري معالجة مسألة العمليات غير المتزامنة. في هذه المقالة، سنتناول مفهوم الوعود (Promises) وأسلوب Async/Await، وكيف يمكن استخدامهما لتحسين تجربة البرمجة.

ما هي الوعود (Promises)؟

الوعود هي كائنات تمثل نتيجة عملية غير متزامنة. يمكن أن تكون النتيجة إما ناجحة أو فاشلة. توفر الوعود وسيلة للتعامل مع العمليات غير المتزامنة بطريقة أكثر وضوحًا وتنظيمًا.

حالة الوعود

الوعود لها ثلاث حالات:

معلقة (Pending): الحالة الابتدائية، يعني أن العملية لم تكتمل بعد.
مكتملة (Fulfilled): يعني أن العملية اكتملت بنجاح.
مرفوضة (Rejected): يعني أن العملية فشلت.

إنشاء وعد

يمكننا إنشاء وعد باستخدام الكلمة الأساسية new Promise، كما يلي:

const myPromise = new Promise((resolve, reject) => {
    // عملية غير متزامنة
});

هنا، resolve وreject هما دالتان يتم استدعاؤهما لتمثيل نجاح أو فشل العملية.

استخدام الوعود

لاستخدام الوعد، نقوم بـ:

myPromise.then((result) => {
    // تنفيذ عند النجاح
}).catch((error) => {
    // تنفيذ عند الفشل
});

مثال على الوعود

إليك مثال بسيط على كيفية استخدام الوعود:

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = { name: 'John Doe', age: 30 };
            resolve(data); // نجاح
        }, 2000);
    });
};

fetchData()
    .then((data) => {
        console.log(data); // { name: 'John Doe', age: 30 }
    })
    .catch((error) => {
        console.error(error);
    });

ما هو Async/Await؟

Async/Await هو بناء جديد في جافاسكريبت يسهل التعامل مع الوعود. يستخدم Async/Await لتحسين وضوح الكود وتقليل التعقيد.

استخدام الكلمة الأساسية Async

عندما نستخدم الكلمة الأساسية async، فإن الدالة التي نعلن عنها ستعود دائمًا بوعد، حتى لو كانت القيم المعادة ليست وعودًا فعلية.

إليك كيفية إعلان دالة Async:

const myAsyncFunction = async () => {
    // تشغيل بعض التعليمات البرمجية
};

استخدام الكلمة الأساسية Await

تستخدم الكلمة الأساسية await لانتظار وعد قبل تنفيذ التعليمات البرمجية التالية. يجب استخدام await داخل دالة asynchronous فقط.

إليك مثال:

const fetchData = async () => {
    const data = await myPromise; // انتظر حتى يكتمل الوعد
    console.log(data);
};

fetchData();

مثال على استخدام Async/Await

دعنا نأخذ مثالًا على كيفية استخدام Async/Await:

const fetchData = () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ name: 'Jane Doe', age: 25 });
        }, 2000);
    });
};

const fetchUserData = async () => {
    const userData = await fetchData();
    console.log(userData); // { name: 'Jane Doe', age: 25 }
};

fetchUserData();

مقارنة بين الوعود و Async/Await

لعل الفرق الأساسي

فهم الوعود و Async/Await في JavaScript