انتقل إلى محتوى الدرس
الدرس 106
دورة جافا سكريبت

JS Promises

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

أقسام الدرس
6
الأمثلة
6
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,994
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

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

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

Promise Syntax

HTML
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 

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

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



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

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

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

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

Example Using Callback

HTML
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

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

Example Using Promise

HTML
let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

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

Example using Callback

HTML
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

HTML
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);}
);

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…