برنامج وعد JavaScript التعليمي: الحل والرفض والتسلسل في JS و ES6

الوعود هي إحدى الطرق التي يمكننا بها التعامل مع العمليات غير المتزامنة في JavaScript. يعاني الكثير من الناس من فهم كيفية عمل الوعود ، لذلك سأحاول في هذا المنشور شرحهم بكل بساطة قدر الإمكان.

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

المتطلبات المسبقة: لفهم هذه المقالة بشكل أفضل ، تحقق من المنشور الآخر حول عمليات رد نداء JavaScript.

ما هو الوعد؟

الوعد في JavaScript يشبه الوعد في الحياة الواقعية. عندما نقطع وعدًا في الحياة الواقعية ، فهذا ضمان أننا سنفعل شيئًا ما في المستقبل. لأنه لا يمكن تقديم الوعود إلا للمستقبل.

الوعد له نتيجتان محتملتان: إما أن يتم الوفاء به عندما يحين الوقت أو لا.

هذا هو نفس الشيء بالنسبة للوعود في JavaScript. عندما نحدد الوعد في JavaScript ، فسيتم حله عندما يحين الوقت ، أو سيتم رفضه.

وعود في JavaScript

بادئ ذي بدء ، الوعد شيء. هناك ثلاث حالات لكائن الوعد:

  • معلق: الحالة الأولية ، قبل نجاح الوعد أو فشله
  • تم الحل: تم الوفاء بالوعد
  • مرفوض: فشل الوعد

على سبيل المثال ، عندما نطلب البيانات من الخادم باستخدام الوعد ، فسيكون ذلك في وضع الانتظار حتى نتلقى بياناتنا.

إذا توصلنا إلى الحصول على المعلومات من الخادم ، فسيتم حل الوعد بنجاح. ولكن إذا لم نحصل على المعلومات ، فسيكون الوعد في حالة الرفض.

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

إذا كنت تفضل ذلك ، يمكنك أيضًا مشاهدة إصدار الفيديو أدناه:

ما هو الفرق بين Callbacks و Promises؟

يتمثل الاختلاف الرئيسي بين وظائف رد الاتصال والوعود في أننا نرفق رد اتصال بالوعد بدلاً من تمريره. لذلك ما زلنا نستخدم وظائف رد الاتصال مع الوعود ، ولكن بطريقة مختلفة (التسلسل).

هذه من أعظم مزايا استخدام الوعود ، لكن لماذا؟

ما هو التسلسل؟

تم استخدام وظائف رد الاتصال وحدها للعمليات غير المتزامنة في JavaScript لسنوات عديدة. ولكن في بعض الحالات ، قد يكون استخدام الوعود خيارًا أفضل.

إذا كان هناك العديد من العمليات غير المتزامنة التي يتعين القيام بها وإذا حاولنا استخدام عمليات الاسترجاعات القديمة الجيدة لها ، فسنجد أنفسنا سريعًا داخل موقف يسمى Callback hell:

firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);

ومع ذلك ، إذا تعاملنا مع نفس العملية مع Promises ، نظرًا لأنه يمكننا إرفاق عمليات الاسترجاعات بدلاً من تمريرها ، فإن نفس الكود أعلاه يبدو أنظف وأسهل في القراءة هذه المرة:

firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);

يوضح الكود أعلاه كيف يمكن ربط عمليات الاسترجاعات المتعددة واحدة تلو الأخرى. التسلسل هو أحد أفضل ميزات الوعود.

إنشاء واستخدام الوعد خطوة بخطوة

أولاً ، نستخدم المُنشئ لإنشاء كائن Promise:

const myPromise = new Promise();

يتطلب الأمر معلمتين ، واحدة للنجاح (حل) وواحدة للفشل (رفض):

const myPromise = new Promise((resolve, reject) => { // condition });

أخيرًا ، سيكون هناك شرط. إذا تم الوفاء بالشرط ، فسيتم حل الوعد ، وإلا فسيتم رفضه:

const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });

لذلك أنشأنا أول وعد لنا. لنستخدمه الآن.

ثم () للوعود المحسومة:

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

myPromise.then();

يتم استدعاء طريقة then () بعد حل الوعد. ثم يمكننا أن نقرر ما يجب فعله بالوعد المصمم.

على سبيل المثال ، دعنا نسجل الرسالة إلى وحدة التحكم التي حصلنا عليها من الوعد:

myPromise.then((message) => { console.log(message); });

catch () للوعود المرفوضة:

ومع ذلك ، فإن طريقة () إذن هي فقط للوعود التي تم حلها. ماذا لو فشل الوعد؟ بعد ذلك ، نحتاج إلى استخدام طريقة catch ().

وبالمثل نرفق طريقة then (). يمكننا أيضًا إرفاق طريقة catch () مباشرةً بعد ذلك ():

myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });

لذلك إذا تم رفض الوعد ، فسوف يقفز إلى طريقة catch () وهذه المرة سنرى رسالة مختلفة على وحدة التحكم.

يتم إحتوائه

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

هذا المنشور هو مجرد مقدمة للوعود ، وآمل أن تجده مفيدًا في الحصول على فكرة حول وعود JavaScript وكيفية استخدامها.

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في زيارة قناة Youtube الخاصة بي لمزيد من المعلومات.

شكرا لقرائتك!