Promise جافا سكربت

"I Promise a Result!"

"Producing code" (كود الإنتاج) هو الكود الذي يتطلب بعض الوقت

"Consuming code" (الكود المستهلك) هو الكود الذي يجب أن ينتظر النتيجة

Promise هو عنوان JavaScript يربط الكود المولد والكود المستهلك

عنوان Promise في JavaScript

يحتوي عنوان Promise في JavaScript على كود الإنتاج والاستدعاءات للاستهلاك:

نحوPromise

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (قد يتطلب بعض الوقت)
  myResolve(); // عند النجاح
  myReject();  // عند الخطأ
});
// "Consuming Code" (يجب أن ينتظر الالتزام بالتزامن)
myPromise.then(
  function(value) { /* الكود عند النجاح */ },
  function(error) { /* الكود عند الخطأ */ }
);

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

النتيجة الاستدعاء
نجاح myResolve(قيمة النتيجة)
الخطأ myReject(عنصر خطأ)

خصائص عنوان Promise

يمكن أن يكون عنوان Promise في JavaScript:

  • Pending
  • Fulfilled
  • Rejected

يستند عنوان Promise إلى خصائصين:state و result.

عندما يكون عنوان Promise "pending" (يعمل) تكون النتيجة غير محددة.

عندما يكون عنوان Promise "fulfilled"، تكون النتيجة هي قيمة.

عندما يكون عنوان Promise "rejected"، تكون النتيجة هي عنصر خطأ.

myPromise.state myPromise.result
"pending" غير محدد
"fulfilled" قيمة النتيجة
"rejected" عنصر الخطأ

لا يمكنك الوصول إلى خصائص Promise state و result.

عليك استخدام طريقة Promise لمعالجة Promise.

كيفية استخدام Promise

إليك كيفية استخدام Promise:

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

Promise.then() لديه参数ين، الأول هو callback للنجاح، والثاني هو callback للفشل.

كلاهما اختياريين، لذا يمكنك إضافة callback للنجاح أو الفشل.

مثال

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// توليد الكود (قد يستغرق بعض الوقت)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

جرب بنفسك

مثال على Promise في JavaScript

لإظهار استخدام Promise، سنستخدم مثال callback من الفصل السابق:

  • انتظار انتهاء الوقت
  • انتظار الملف

انتظار انتهاء الوقت

استخدام أمثلة الـ callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

جرب بنفسك

استخدام أمثلة Promise

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

جرب بنفسك

انتظار الملف

استخدام أمثلة الـ 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);

جرب بنفسك

استخدام أمثلة Promise

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

جرب بنفسك

دعم المتصفحات

ECMAScript 2015، يُعرف أيضًا بـ ES6، أضاف كائنات Promise لـ JavaScript.

الجدول أدناه يوضح إصدارات المتصفحات التي تدعم كائنات Promise بشكل كامل:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
فبراير 2014 يوليو 2015 أبريل 2014 سبتمبر 2014 مارس 2014