"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > وعود جافا سكريبت: الأساسيات التي تحتاج إلى معرفتها

وعود جافا سكريبت: الأساسيات التي تحتاج إلى معرفتها

تم النشر بتاريخ 2024-11-08
تصفح:877

JavaScript Promises: The Basics You Need to Know

مقدمة

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

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

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

ما هو الوعد؟

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

في جافا سكريبت، تعمل

الوعود بطريقة مماثلة. عندما تطلب من JavaScript القيام بشيء يستغرق وقتًا - مثل جلب البيانات من الخادم - فإنها تُرجع وعد. هذا الوعد لا يمنحك النتيجة على الفور. بدلاً من ذلك، يخبرك، " سأعود إليك عند انتهاء العمل. " خلال ذلك الوقت، يستمر تشغيل بقية التعليمات البرمجية الخاصة بك. بمجرد اكتمال المهمة، يكون الوعد إما:

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

يمثل

الوعد قيمة قد تكون متاحة الآن أو في المستقبل أو أبدًا. ولها ثلاث حالات:

  • معلق: المهمة لا تزال قيد التقدم، ولم يتم تحديد النتيجة النهائية (تم الوفاء بها أو رفضها) بعد.
  • تم التنفيذ: تم إكمال المهمة بنجاح، والنتيجة متاحة.
  • تم الرفض: فشلت المهمة، وهناك خطأ متاح للتعامل معه
1. خلق الوعد

لإنشاء

Promise، يمكنك استخدام مُنشئ Promise، والذي يأخذ وظيفة (تُعرف باسم المنفذ) لها معلمتين: الحل والرفض. يتم استدعاء وظيفة الحل عند تحقيق الوعد، بينما يتم استدعاء وظيفة الرفض عند الرفض.

const myPromise = new Promise((حل، رفض) => { // محاكاة مهمة غير متزامنة (على سبيل المثال، جلب البيانات) نجاح ثابت = صحيح؛ // محاكاة النجاح أو الفشل إذا (النجاح) { حل("اكتملت العملية بنجاح!"); // الوفاء بالوعد } آخر { رفض ("فشلت العملية.")؛ // رفض الوعد } });
const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});
2. حل الوعود ورفضها

بمجرد إنشاء

الوعد، يمكنك تحديد نتائجه عن طريق استدعاء القرار أو الرفض:

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

بمجرد إنشاء

وعد، فإن الخطوة التالية هي استهلاكه. توفر جافا سكريبت عدة طرق للتعامل مع نتائج الوعود: .then() و .catch() و .finally(). تخدم كل طريقة من هذه الطرق غرضًا محددًا وتسمح لك بإدارة نتائج العمليات غير المتزامنة بشكل فعال.

  • التعامل مع الوعود التي تم حلها باستخدام .then(): يتم استخدام الأسلوب .then() لتحديد ما يجب أن يحدث عند تحقيق الوعد. يتطلب الأمر وسيطتين اختياريتين: رد اتصال للقيمة التي تم حلها وأخرى للتعامل مع حالات الرفض.
const fetchData = () => { إرجاع وعد جديد ((الحل) => { setTimeout(() => { حل ("تم جلب البيانات بنجاح!")؛ }, 1000); }); }; جلب البيانات () .ثم(النتيجة => { console.log(result); // السجلات: تم جلب البيانات بنجاح! });
const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});
  • التعامل مع الرفض باستخدام .catch(): تم تصميم طريقة .catch() خصيصًا لمعالجة الأخطاء التي تحدث أثناء تنفيذ الوعد. وهذا يجعلها طريقة نظيفة للتعامل مع حالات الرفض.
const fetchWithError = () => { إرجاع وعد جديد ((حل، رفض) => { setTimeout(() => { رفض ("حدث خطأ أثناء جلب البيانات.")؛ // محاكاة الخطأ }, 1000); }); }; جلب مع خطأ () .ثم(النتيجة => { console.log(result); }) .catch(خطأ => { console.error(error); // السجلات: حدث خطأ أثناء جلب البيانات. });
const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});
  • إجراءات التنظيف النهائية باستخدام .finally(): يتيح لك الأسلوب .finally() تنفيذ التعليمات البرمجية بعد تسوية Promise، بغض النظر عما إذا كان قد تم استيفاءه أو رفضه. يعد هذا مفيدًا لإجراءات التنظيف أو المهام التي يجب تشغيلها في سيناريوهات النجاح والفشل.
جلب البيانات () .ثم(النتيجة => { console.log(result); // السجلات: تم جلب البيانات بنجاح! }) .catch(خطأ => { console.error(error); // التعامل مع الخطأ }) .أخيرًا(() => { console.log("لقد استقر الوعد."); // السجلات بعد النجاح أو الفشل });
const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});
للإيجاز:

    ثم (): استخدم هذه الطريقة للتعامل مع القيمة التي تم حلها للوعد.
  • Catch (): استخدم هذه الطريقة لمعالجة الأخطاء عند رفض الوعد.
  • أخيرًا (): تقوم هذه الطريقة بتشغيل التعليمات البرمجية بعد تسوية الوعد، بغض النظر عن النتيجة، مما يسمح بالتنظيف أو الإجراءات النهائية.
4. تسلسل الوعد

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

دعونا نلقي نظرة على المثال التالي:


const fetchUserData = () => { إرجاع وعد جديد ((الحل) => { setTimeout(() => { حل({ معرف المستخدم: 1، اسم المستخدم: "JohnDoe" }); }, 1000); }); }; const fetchPosts = (معرف المستخدم) => { إرجاع وعد جديد ((الحل) => { setTimeout(() => { حل(["المشاركة 1"، "المشاركة 2"، "المشاركة 3"]); // محاكاة المشاركات }, 1000); }); }; // تسلسل الوعود جلب بيانات المستخدم () .ثم (المستخدم => { console.log("تم جلب المستخدم:"، user); إرجاع fetchPosts(user.userId); // قم بتمرير معرف المستخدم إلى الوعد التالي }) .ثم(المشاركات => { console.log("تم جلب المشاركات:"،posts); }) .catch(خطأ => { console.error("خطأ:"، خطأ)؛ });
const myPromise = new Promise((resolve, reject) => {
  // Simulating an asynchronous task (e.g., fetching data)
  const success = true; // Simulate success or failure

  if (success) {
    resolve("Operation completed successfully!"); // Fulfill the promise
  } else {
    reject("Operation failed."); // Reject the promise
  }
});
في هذا المثال، تقوم الدالة fetchUserData بإرجاع

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

خاتمة

في الختام، تعد الوعود جزءًا مهمًا من جافا سكريبت الحديثة، مما يمكّن المطورين من التعامل مع العمليات غير المتزامنة بطريقة أكثر تنظيماً وكفاءة. باستخدام الوعود، يمكنك:

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

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

بيان الافراج تم إعادة نشر هذه المقالة على: https://dev.to/dev-v/javascript-promises-the-basics-you-need-to-know-8k2?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3