الابتداء مع وعود JavaScript
كود غير متزامن مفيد لأداء المهام التي هي استهلاك الوقت لكن ، بالطبع ، هو لا تخلو من سلبيات. يستخدم رمز المتزامن وظائف رد الاتصال لمعالجة نتائجها ، ولكن وظائف رد الاتصال لا يمكن إرجاع القيم يمكن أن وظائف جافا سكريبت نموذجي.
وبالتالي ، فإنها لا تأخذ فقط قدرتنا على السيطرة على تنفيذ الوظيفة ولكن أيضا جعل معالجة الأخطاء قليلا من المتاعب. هذا هو المكان الذي وعد
موضوع يأتي ، لأنه يهدف إلى ملء بعض الحفر في الترميز غير المتزامن.
وعد
هو من الناحية الفنية كائن داخلي قياسي في جافا سكريبت ، وهذا يعني أنه يأتي المدمج في جافا سكريبت. يتم استخدامه لتمثيل النتيجة النهائية للكتلة البرمجية غير المتزامنة (أو سبب فشل الكود) ولديه طرق للتحكم في تنفيذ التعليمات البرمجية غير المتزامنة.
بناء الجملة
يمكننا خلق مثيل لل وعد
موضوع باستخدام الجديد
الكلمة:
وعد جديد (وظيفة (حل ، رفض) ) ؛
الوظيفة مرت كمعلمة إلى وعد()
منشئ يعرف باسم المنفذ. انها تحمل رمز غير متزامن و لديه اثنين من المعلمات لل وظيفة
نوع, يشار إليها باسم حل
و رفض
وظائف (أكثر على هذه قريبا).
ولايات وعد
موضوع
ال الحالة الأولية من وعد
كائن يسمى قيد الانتظار. في هذه الحالة ، نتيجة الحساب غير المتزامن غير موجود.
تتغير الحالة المعلقة الأولية إلى استيفاء الدولة عندما يكون الحساب ناجح. ال نتيجة الحساب متاح في هذه الحالة.
في حالة حساب غير متزامن فشل, ال وعد
كائن ينتقل إلى مرفوض الدولة من الأولي قيد الانتظار حالة. في هذه الحالة ، فإن سبب فشل الحساب (أي رسالة الخطأ) متاحة.
للذهاب من قيد الانتظار إلى استيفاء حالة, حل()
يسمى. للذهاب من قيد الانتظار إلى مرفوض حالة, رفض()
يسمى.
ال ثم
و قبض على
أساليب
عندما الدولة يتغير من قيد الانتظار إلى استيفاء, معالج الحدث لل وعد
شاء ثم
طريقة يتم تنفيذ. وعندما الدولة يتغير من قيد الانتظار إلى مرفوض, معالج الحدث لل وعد
شاء قبض على
طريقة يتم تنفيذ.
مثال 1
“غير Promisified” الشفرة
افترض أن هناك hello.txt
ملف يحتوي على “مرحبا” كلمة. إليك كيفية إرسال طلب أجاكس إلى جلب هذا الملف و عرض محتواه, بدون استخدام وعد
موضوع:
دالة getTxt () let xhr = new XMLHttpRequest ()؛ xhr.open ('GET'، 'hello.txt')؛ xhr.overrideMimeType ( 'نص / عادي')؛ xhr.send ()؛ xhr.onload = function () try switch (this.status) case 200: document.write (this.response)؛ استراحة؛ الحالة 404: رمي "الملف غير موجود" ؛ الافتراضي: رمي "فشل في جلب الملف" ؛ catch (err) console.log (err)؛ getTxt () ؛
إذا كان محتوى الملف قد تم جلب بنجاح, أي. رمز حالة الاستجابة هو 200, نص الاستجابة هو مكتوب في الوثيقة. إذا كان الملف هو غير موجود (الحالة 404), ا “لم يتم العثور على الملف” يتم طرح رسالة خطأ. خلاف ذلك ، رسالة خطأ عامة مما يدل على فشل جلب الملف.
“Promisified” الشفرة
دعنا الآن وعد الكود أعلاه:
دالة getTxt () return new Promise (وظيفة (حل ، رفض) let xhr = جديد XMLHttpRequest ()؛ xhr.open ('GET'، 'hello.txt')؛ xhr.overrideMimeType ('text / plain')؛ xhr.send ()؛ xhr.onload = function () switch (this.status) case 200: solution (this.response) ؛ الحالة 404: رفض ('لم يتم العثور على الملف') ؛ الافتراضي: رفض ('فشل في جلب الملف ') ؛ ؛) ؛ getTxt (). ثم (function (txt) document.write (txt)؛). catch (function (err) console.log (err)؛)؛
ال getTxt ()
تم ترميز الوظيفة الآن إلى إرجاع مثيل جديد من وعد
موضوع, وظيفة المنفذ الخاص به يحمل رمز غير متزامن من قبل.
عندما رمز حالة الاستجابة هو 200, ال وعد
هو استيفاء بواسطة دعوة حل()
(يتم تمرير الاستجابة كمعلمة حل()
). عندما رمز الحالة هو 404 أو غيرها ، وعد
هو مرفوض استخدام رفض()
(مع رسالة الخطأ المناسبة كمعلمة رفض()
).
ال الحدث معالجات لل ثم()
و قبض على()
أساليب من وعد
وجوه هي وأضاف في النهاية.
عندما وعد
هو استيفاء, معالج لل ثم()
يتم تشغيل الطريقة. حجه هو المعلمة مرت من حل()
. داخل معالج الحدث ، يكون نص الاستجابة (الذي تم استلامه كوسيطة) مكتوب في الوثيقة.
عندما وعد
هو مرفوض, معالج الحدث لل قبض على()
يتم تشغيل الطريقة, تسجيل الخطأ.
ال الميزة الرئيسية من الإصدار أعلاه من وعد برمز هو معالجة الأخطاء. بدلاً من طرح استثناءات غير معلّمة حولها - كما في الإصدار غير الموعود - رسائل الفشل المناسبة يتم إرجاع وتسجيل.
ولكن ، ليس فقط عودة من رسائل الفشل ولكن أيضا من نتيجة لحساب غير متزامن يمكن أن يكون مفيدا حقا بالنسبة لنا. لنرى ذلك ، سنحتاج إلى توسيع مثالنا.
مثال 2
“غير Promisified” الشفرة
بدلا من مجرد عرض النص من hello.txt
, أريد أن الجمع بينه وبين “العالمية” كلمة وعرضه على الشاشة بعد مهلة من 2 ثانية. إليك الكود الذي أستخدمه:
دالة getTxt () let xhr = new XMLHttpRequest ()؛ xhr.open ('GET'، 'hello.txt')؛ xhr.overrideMimeType ( 'نص / عادي')؛ xhr.send ()؛ xhr.onload = function () try switch (this.status) case 200: document.write (concatTxt (this.response))؛ استراحة؛ الحالة 404: رمي "الملف غير موجود" ؛ الافتراضي: رمي "فشل في جلب الملف" ؛ catch (err) console.log (err)؛ دالة concatTxt (res) setTimeout (function () return (res + 'World')، 2000)؛ getTxt () ؛
على رمز الحالة 200 ، و concatTxt ()
وظيفة تسمى ل سلسل نص الاستجابة مع “العالمية” كلمة قبل كتابتها في وثيقة.
لكن هذا الكود لن تعمل كما تريد. ال setTimeout ()
وظيفة رد الاتصال لا يمكن إرجاع السلسلة المتسلسلة. ما سيتم طباعته على الوثيقة هو غير محدد
لان هذا ماذا concatTxt ()
عائدات.
“Promisified” الشفرة
لذلك ، لجعل رمز العمل ، دعونا وعد الكود أعلاه, بما فيها concatTxt ()
:
دالة getTxt () return new Promise (وظيفة (حل ، رفض) let xhr = جديد XMLHttpRequest ()؛ xhr.open ('GET'، 'hello.txt')؛ xhr.overrideMimeType ('text / plain')؛ xhr.send ()؛ xhr.onload = function () switch (this.status) case 200: solution (this.response) ؛ الحالة 404: رفض ('لم يتم العثور على الملف') ؛ الافتراضي: رفض ('فشل في جلب الملف ') ؛ ؛) ؛ وظيفة concatTxt (txt) إرجاع وعد جديد (وظيفة (حل ، رفض) setTimeout (function () قرار (txt + 'World')؛ ، 2000) ؛) ؛ getTxt (). ثم ((txt) => return concatTxt (txt)؛). ثم ((txt) => document.write (txt)؛). catch ((err) => console. سجل (يخطئ) ؛) ؛
تماما مثل getTxt ()
, ال concatTxt ()
وظيفة أيضا إرجاع جديد وعد
موضوع بدلا من النص المتسلسل ال وعد
عاد بواسطة concatTxt ()
هو حل داخل وظيفة رد الاتصال من setTimeout ()
.
بالقرب من نهاية الرمز أعلاه ، معالج الحدث الأول ثم()
طريقة تشغيل عندما وعد
من getTxt ()
هو استيفاء, أي عندما يكون الملف تم جلبه بنجاح. داخل هذا المعالج, concatTxt ()
يسمى و ال وعد
عاد بواسطة concatTxt ()
يتم إرجاع.
معالج الحدث الثاني ثم()
طريقة تشغيل عندما وعد
عاد بواسطة concatTxt ()
هو استيفاء, بمعنى انتهت مهلة ثانيتين و حل()
يسمى مع سلسلة متسلسلة كمعلمة لها.
أخيرا, قبض على()
يمسك جميع الاستثناءات ورسائل الفشل من كلا الوعود.
في هذا الإصدار وعد ، و “مرحبا بالعالم” سوف تكون سلسلة طبع بنجاح إلى المستند.