شرح لطريقة عمل الوعد promise في جافاسكريبت

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

أولاً سأوضح لك فكرة  الوعود Promises.

يمكنك التفكير في الوعود Promises في JavaScript على أنّها الوعود في الحياة الحقيقية.

لنفرض أنّ طفلًا صغيرًا طلب من والده أن يشتري له لُعبةً ما و أخبره والده أنه يعده بأن يصنع له اللعبة إذا وجد مواد صنعها في الأسواق. و ذهب الأب للبحث عن هذه المواد أي أنّ الوعد الآن قيد التنفيذ (Pending) ، فإذا وجد الأب المواد سيشتريها و يصنع اللعبة للطفل و بذلك يكون قد وفّى بوعده أي تكون حالة الوعد الآن هي fulfilled أو resolved، أمّا إذا لم يجد هذه المواد فلن يشتريها و بالتالي لن يتمكن من صنع اللعبة أي لا يكون قد وفى بوعده أي تكون حالته rejected. 

نفس هذا الأمر ينطبق على الوعود Promise برمجيًا.

مثال لما يشبه الأمور التي نفعلها في الحياة الواقعية - في الحياة البرمجية:

”شيفرة مُنتِجة“ أي أنّها تُنفّذ أمرًا ما وتأخذ وقت. مثل الأكواد التي تقوم بتحميل البيانات عبر الشبكة. هذا الأب "في المثال السابق".

”شيفرة مُستهلِكة“  أي أنّها تطلب ناتج  ”الشيفرة المُنتِجة“  ما إن يُصبح جاهزًا. وهناك عديد من الدوال تحتاج إلى هذا الناتج. هذا الطفل ”في المثال السابق ينتظر اللعبة“.

الوعد (Promise) هو كائن في جافاسكربت يقوم بالربط بين ”الشيفرة المُنتِجة“ و”الشيفرة المُستهلِكة“. في الحياة العملية، الوعد هو ”انتظار صنع اللعبة“. يمكن أن تأخذ ”الشيفرة المُنتِجة“ ما تلزم من وقت لتُقدّم لنا النتيجة التي وعدتنا بها، وسيقوم الوعد بتجهيزها لنا لأيّة شيفرة طلبتها متى جهزت.

و صيغة الباني لكائنات الوعود تكون كما يلي:

let promise = new Promise(function(resolve, reject) {
  // ‫المُنفِّذ (الشيفرة المُنتجة، مثل ”الأب“)
});

تُسمى الدالة التي يتم تمريرها إلى new Promise ”بالمُنفِّذ“. فمتى صُنع الوعد new Promise تعمل الدالة تلقائيًا. يحتوي هذا المُنفِّذ على الشيفرة المُنتجِة، ويمكن أن تُقدّم لنا في النهاية ناتجًا. في مثالنا، فالمُنفِّذ هذا هو ”الأب“.

و تُقدّم جافاسكربت الوسيطين resolve و reject وهما ردود نداء.

لا نضع الشيفرة التي نريد تنفيذها إلا داخل المُنفِّذ. و عليه مهمّة استدعاء resolve أو reject أي عليه أن يقوم بنداء/استدعاء  أحد ردود النداء resolve أو reject:

• resolve(value)‎: لو اكتملت المهمّة بنجاح. 
• reject(error)‎: لو حدث خطأ.

و كائن الوعد promise الذي أعاده الباني new Promise له خاصيتين داخليتين، و هما:

• الحالة state: و تبدأ حالة الوعد بالقيمة "pending" وبعدها تنتقل إلى "fulfilled" متى تم استدعاء resolve، أو إلى "rejected" متى تم استدعاء reject.
• الناتج result: و يبدأ أولًا غير معرّف undefined، وبعدها يتغيّر إلى value متى تم استدعاء resolve(value)‎ أو يتغيّر إلى error متى تم استدعاء reject(error)‎.

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

و set time out هي دالة تقوم بتنفيذ دالة معينة بعد مرور زمن محدد، وهي مفيدة لعمل جدولة مزمنية مثلا، ومثلها الدالة set interval التي تكرر نفسها اي تستدعي الدالة كل X ثانية مثلا.. يمكننا استخدام هتين الدالتين عندما نستطيع التحكم بالزمن وعمل جدولة زمنية. هنا نستخدمها لتحديث الرسائل أو الاشعارات مثلا كل 5 ثواني..

أما promise  هي غرض برمجي، ينفذ مهمة ما وهذه المهمة غير متزامنة اي لانعرف قيود زمنية لها، وتكون بشكل دالة، مثل جلب بيانات من المخدم، او تحميل صورة أو ملف..، وهنا لا نعلم بالضبط الزمن اللازم لانتهاء هذه العملية، أي ممكن تأخذ 1 ميلي ثانية، أو حتى 100 ثانية، هنا لايمكننا توقع متى تنتهي من التنفيذ.

ثم بعد انتهاء المهمة الاساسية بنجاح، يقوم promise باستدعاء دالة resolve والتي مثلا تعرض لنا نتيجة مفادها نجاح تحميل او رفع بيانات أو عرض البيانات نفسها.. وإن حدث فشل في الاتصال أو في أي جزء، تستدعي promise دالة reject التي تعطينا رسالة خطأ وتشرح مالذي حصل..

السلام عليكم ,
الpromise هو feature أساسية في الجافاسكريبت , و هو أساسي للتعامل مع الevents و الأشياء التي تحتاج الى وقت ليتم تنفيذها مثل ما ذكرت setTimeout  ,  و احضار بيانات من قاعدة البيانات على سبيل المثال .
و فائدة الpromise أنه ابسط من استعمال الcallback و كتابتة أسهل .

و يتم انشاء الpromise في ابسط صورة كالتالي :
 

const myPromise = new Promise((resolve, reject) => {
    // الشيفرة الرئيسية هنا
    // إذا تمت العملية بنجاح
    resolve("نجاح!");

    // إذا حدث خطأ
     reject("حدث خطأ!");
});

في الpromise يوجد 3 حالات و هم :
 

قيد التنفيذ (Pending): الحالة الابتدائية للـ Promise. لا يتم تحقيقها ولا يتم رفضها بعد.

تم التحقيق (Fulfilled): الحالة التي تحدث عندما تكتمل العملية الغير متزامنة بنجاح. النتيجة متاحة، ويمكنك الوصول إليها باستخدام طريقة then.

تم الرفض (Rejected): الحالة التي تحدث عند فشل العملية الغير متزامنة. السبب في الفشل متاح، ويمكنك التعامل معه باستخدام طريقة catch.

و يتم التعامل معه كالتالي :
 

myPromise
    .then((result) => {
        console.log("تم بنجاح:", result);
    })
    .catch((error) => {
        console.error("حدث خطأ:", error);
    });

يمكنك استخدام .then للتعامل مع نتيجة ال Promise عندما تنجح، و .catch للتعامل مع الأخطاء عند فشلها.
و يمنك أيضا ان شاء سلاسل كالتالي :
 

promise1()
    .then(result1 => {
        return promise2(result1);
    })
    .then(result2 => {
        // استخدم result2 هنا
    })
    .catch(error => {
        console.error("حدث خطأ:", error);
    });

و استعمال async و await هو الشكل الأحدث و الأسلس و الأكثر انتشارا لأنة يسهل العملية أكثر من أي وقت مضى 
مثال :

// دالة تقوم بإرجاع Promise بعد فترة زمنية معينة
function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// دالة async تستخدم await لاستنظار إكمال الPromise
async function exampleAsyncFunction() {
  console.log("قبل الانتظار");
  
  // استخدام await لاستنظار إكمال الPromise
  await wait(2000);
  
  console.log("بعد الانتظار");
}

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