JavaScript

JS Promises

في هذا الدرس سوف نتعرف علي ال Promise وهو عبارة عن عنصر نستخدمه في تنفيذ كود مع الانتظار الي ان يتم تنفيذ كود اخر 

التاريخ

13 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

978

المواضيع

24
الشروحات chevron_left JS Promises chevron_left JavaScript

JS Promises

</> JS Promises

Promise : هو عبارة عن عنصر نستخدمه في تنفيذ كود مع الانتظار الي ان يتم تنفيذ كود اخر وتتكون عملية ال promise من شقين اساسين وهم 

  • Producing code : وهو الكود الذي يقوم بأرجاع نتيجة معينة 
  • Consuming code : وهو الكود الذي سوف ينظر الحصول علي النتيجة ليتم تنفيذه

- نستطيع استخدام ال Promise عن طريق استخدام ال object التالي "Promise "  وهي يأخذ اثنين من ال arguments وهما كل من ال "Producing code " وال " Consuming code " 

Promise Syntax
let myPromise = new Promise(function(myResolve, myReject) {
/* "Producing Code" (May take some time) */

  myResolve(); /* when successful */
  myReject();  /* when error */
});

/* "Consuming Code" (Must wait for a fulfilled Promise) */
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

عندما يتم تنفيذ الكود وارجاع نتيجة فسوف يتم تنفيذ دالة معينة بناء علي هذه النتيجة من احدي النتيجتين التاليتين 

  • success  : في حالة كانت هذه هي النتيجة فسوف يتم تنفيذ الدالة ( )myResolve 
  • Error : في حالة كانت هذه هي النتيجة فسوف يتم تنفيذ الدالة ( )myReject 

</> Promise Object Properties

يمكن ان يكون ال object ا "promise " احدي الحالات التالية 

  • Pending ( قيد تنفيذ الكود ) وتكون النتيجة "undefined" 
  • Fulfilled ( تم تنفيذه ) وتكون النتيجة عبارة عن قيمة "value "
  • Rejected ( تم رفضه ) تكون النتيجة عبارة عن "error "
myPromise.state myPromise.result
"pending" undefined
"fulfilled" a result value
"rejected" error object

</> How To Use Promise

اولا نقوم بتحديد الدالة التي سوف نستخدم خلالها ال Promise ونقوم بتحديد دالتين يتم تنفيذ احداهم تبعا لنتيجة تنفيذ الدالة التي نستخدم معها ال promise

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

تأخذ الدالة ( )Promise.then اثنين من ال arguments وهما عبارة عن callback functions احداهم يتم تنفيذها في حالة تم تنفيذ الدالة الاساسية بنجاح والاخري في حالة خطأ تنفيذها 

JavaScript Promise Examples

</> JavaScript Promise Examples

ولتوضيح مفهوم ال Promise بشكل افضل سوف نقوم باستخدام ال callback ونقارنها بال Promise لنعرف الفرق وسوف نستخدم حالتين في التنفيذ وهما 

  • انتظار فترة زمنية معينة 
  • انتظار  ملف معين 

</> Waiting for a Timeout

Example Using Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
Example Using Promise
let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

</> Waiting for a file

Example using Callback
function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}

getFile(myDisplayer);
Example
let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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