وعود جافا سكريبت
"أتعهد بنتيجة!"
"إنتاج رمز" هو رمز قد يستغرق بعض الوقت
"رمز الاستهلاك" هو رمز يجب انتظار النتيجة
الوعد هو كائن JavaScript يربط إنتاج التعليمات البرمجية والتعليمات البرمجية المستهلكة
كائن وعد JavaScript
يحتوي كائن JavaScript Promise على كل من التعليمات البرمجية المنتجة واستدعاءات الشفرة المستهلكة:
الوعد النحوي
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 */ }
);
عندما تحصل شفرة الإنتاج على النتيجة ، يجب أن تستدعي أحد نداءين:
| نتيجة | يتصل |
|---|---|
| نجاح | myResolve (قيمة النتيجة) |
| خطأ | myReject (كائن خطأ) |
وعد خصائص الكائن
يمكن أن يكون كائن JavaScript Promise:
- قيد الانتظار
- استيفاء
- مرفوض
يدعم كائن الوعد خاصيتين: الحالة والنتيجة .
بينما يكون كائن الوعد "معلقًا" (يعمل) ، تكون النتيجة غير محددة.
عندما يتم "الوفاء" بجسم الوعد ، تكون النتيجة قيمة.
عندما يتم "رفض" كائن الوعد ، تكون النتيجة كائن خطأ.
| myPromise.state | بلدي الوعد.نتيجة |
|---|---|
| "ريثما" | غير معرف |
| "استيفاء" | قيمة النتيجة |
| "مرفوض" | كائن خطأ |
لا يمكنك الوصول إلى حالة خصائص الوعد والنتيجة .
يجب عليك استخدام طريقة الوعد للتعامل مع الوعود.
وعد كيف
إليك كيفية استخدام الوعد:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then () تأخذ حجتين ، رد اتصال للنجاح وأخرى للفشل.
كلاهما اختياري ، لذا يمكنك إضافة رد اتصال للنجاح أو الفشل فقط.
مثال
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
أمثلة على وعد JavaScript
لتوضيح استخدام الوعود ، سنستخدم أمثلة رد الاتصال من الفصل السابق:
- في انتظار مهلة
- في انتظار ملف
في انتظار مهلة
مثال باستخدام Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
مثال باستخدام الوعد
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 ، كائن JavaScript Promise.
يحدد الجدول التالي إصدار المستعرض الأول مع دعم كامل لكائنات الوعد:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |