[MUSIC]
التواصل بين العميل والخادم هو أبدا صفقة منتهية.
لإعادة صياغة المثل الشهير،
هناك العديد من جعبة بين العميل والخادم.
فكيف نتعامل مع الأخطاء عندما تنشأ،
عندما نتواصل بين العميل والخادم؟
دعونا نتحدث عن ذلك في هذا التمرين.
عندما يقوم الخادم بإنشاء استجابة، أو عميل HTTP،
أثناء الاتصال بالخادم، يواجه خطأ ثم ينشئ
استجابة خطأ، يتم تسليم هذا في شكل استجابة خطأ HTTP.
الآن، هذه الاستجابة، نريد أن نكون قادرين على معالجتها ومن
ثم تحويلها إلى سلسلة رسائل استجابة، والتي
يمكن تسليمها إلى العميل بحيث يمكن للعميل عرض هذا على الشاشة.
لذلك لتمكيننا من القيام بذلك،
سنقوم بإنشاء خدمة جديدة تسمى رسالة HTTP العملية في هذا، هذا هو المجلد.
لذلك للقيام بذلك، في نوع موجه
نانوغرام، خدمات خدمة/بروسيشتبمسغ،
وتوليد خدمة بروسيشتبمسغ.
الآن، بمجرد إنشاء الخدمة، سنقوم ثم المضي قدما
وإضافتها إلى وحدة التطبيق.
ثم سنضيف طريقة إلى خدمة ProcesShttpmsg.
الآن بعد أن أنشأنا خدمة بروسيشتبمسغ،
دعونا المضي قدما ومن ثم إضافة ذلك إلى ملف app.module.ts.
حتى الذهاب إلى ملف app.module.ts،
اسمحوا لي استيراد خدمة بروسيشتبمسغ،
من '. /الخدمات/العملية-httpmsg.service '.
لذلك بمجرد أن يتم استيرادها، فإننا سوف تكون قادرة على استخدام ذلك في طلبنا.
لذلك دعونا المضي قدما وإضافة ذلك إلى مقدمي الخدمات لدينا.
حتى الذهاب إلى مقدمي الخدمات لدينا،
اسمحوا لي أن أضيف في بروسيشتبمسغسرفيس إلى مقدمي الخدمات.
أول شيء سنقوم به هو تضمين طريقة جديدة في
ProcesshttpmsgService تسمى أخطاء التعامل،
والتي سوف تأخذ الرعاية من معالجة الأخطاء عند ظهورها.
وبعد ذلك سوف نستفيد منها في الخدمات حيث نصل إلى الخادم.
للبدء، دعونا أولا استيراد،
ThrowError من، rxjs،
وهذا يساعدنا على رمي في الخطأ كلما نشأ ذلك.
ثم نقوم باستيراد هتبروريسبونس من،
الزاوي/المشتركة/هتب.
ثم سنبدأ في تصميم طريقة HandleError
، وهذا يأخذ، كمعلمة، خطأ يمكن أن يكون استجابة،
وهو استجابة خطأ من الخادم،
أو أي سبب آخر أن الخطأ ينشأ.
حتى ضمن هذه الطريقة هاندلرور، ماذا يفترض أن نفعل؟
دعونا نحاول إنشاء رسالة تلخص ما هو الخطأ كل شيء.
لذلك سنقوم بتضمين متغير سلسلة جديد هنا.
إذا كان
error.error مثيل ErroRevent، لذلك إذا كان هذا حدث خطأ يحدث،
فسيتضمن error.error.message معلومات.
لذلك سنقوم بتعيين رسالة الخطأ إلى
error.error.message.
إذا لم يكن هذا هو الحال، فهذا يعني أن هذا يأتي من جانب الخادم،
وهكذا في هذه الحالة، يتم إنشاء رسالة الخطأ بالقول تساوي backquotes،
لاحظ backquotes هنا، ثم $ {error.status}.
لذلك نحن نستخرج معلومات الحالة من هناك.
وبعد ذلك، - Error.StatusText،
إذا كان StatusText موجودًا، أو
ستكون سلسلة فارغة هناك.
وبعد ذلك سوف نقوم أيضًا بتضمين error.error نفسه،
كائن الخطأ الكامل نفسه، هناك في السلسلة.
ثم استخدم ذلك كرسالة خطأ لدينا.
الآن، مرة واحدة لدينا رسالة الخطأ،
ثم سنكون قادرين على استخدام ثروورور
لإرجاع خطأ يمكن ملاحظته إلى التطبيق لدينا.
إذن ما يعنيه هذا هو رمي خطأ في هذه المرحلة،
مع تضمين رسالة الخطأ هناك.
لذلك يتم إنشاء سلسلة رسالة الخطأ هذه استنادًا إلى المعلومات
التي نحصل عليها هنا، إما لأن جانب الخادم استجاب بخطأ أو
قد يكون الخطأ من أسباب أخرى.
لذلك في كلتا الحالتين، سنقوم بإنشاء رسالة خطأ ثم إعادتها.
الآن، أين يمكننا الاستفادة من هذا الخطأ مقبض؟
الآن، ضمن خدماتنا، على سبيل المثال ملف dishservice.ts،
رأينا ذلك في وقت سابق عندما قلنا هذا HTTP الحصول، ثم قلنا الخريطة،
ثم افترضنا أن الاستجابة هي دائما استجابة إيجابية.
ولكن لنفترض أن استجابتهم ليست إيجابية،
ثم تقوم بإرجاع خطأ، ثم نحتاج إلى التقاط هذا الخطأ.
لمساعدتنا في هذا، نقوم باستيراد مشغل CatchError من rxjs،
ثم نقوم أيضًا باستيراد ProcesshttpmsgService
الذي أنشأه للتو في
خدمة الطبق الخاصة بنا حتى نتمكن من استخدام طريقة خطأ المقبض من هناك.
لذلك نحن استيراد هذا من. /عملية-httpmsg.service.
ثم، النزول إلى منشئ،
ونحن الآن حقن خدمة رسالة هتب العملية في
منشئ، جنبا إلى جنب مع عميل هتب.
حتى نتمكن من الاستفادة من هذه الخدمة،
وخاصة طريقة خطأ مقبض الخدمة للتعامل مع الأخطاء
التي يتم إرجاعها من قبل عميل HTTP لدينا هناك.
الآن، بمجرد تكوين المنشئ،
ثم للتعامل مع الخطأ في طريقة getDubishes
على سبيل المثال، سنقوم الأنابيب إلى طريقة CatchErrors.
ثم استدعاء الأسلوب HandleError بعد
هذا.ProcesshttpmsgService ضمن أسلوب CatchError.
بهذه الطريقة عندما يقوم عميل HTTP بإرجاع خطأ، فسيتم معالجة هذا
وسيتم استخراج رسالة الخطأ المناسبة.
وبعد ذلك سينتهي الأمر برمي الخطأ من خلال
طريقة HandleError عند هذه النقطة.
وبالمثل، دعونا نفعل الشيء نفسه
لأساليب getDish و getFeatureDish أيضا.
الآن، عندما يتعلق الأمر بطريقة معرفات getDish،
نظرًا لأن طريقة معرفات getDish تستفيد من طريقة getDishs،.
لذلك لا نحتاج إلى استدعاء HandleError بشكل صريح لأنه في حالة حدوث أي خطأ،
فإن طريقة getDuses قد حولت بالفعل هذا الخطأ إلى سلسلة خطأ.
لذلك نحن بحاجة فقط للقبض على الخطأ ثم إرجاع الخطأ من GetDish معرفات.
عادة، لن نصل حتى إلى هذه النقطة إذا حدث خطأ، لأن
طريقة getDuses كانت ستتعامل مع الخطأ بشكل مناسب في هذه المرحلة.
لذلك مرة واحدة قمنا بتكوين خدمة الطبق بشكل مناسب،
ثم سنكون قادرين على الاستفادة من
طريقة CatchError للتعامل مع الأخطاء التي تنشأ.
الآن بعد أن قمنا بتحديث خدمتنا لتكون قادرة على التعامل مع الأخطاء.
كيف نتعامل مع هذا داخل مكوننا بأنفسهم؟
حتى داخل مكون، لذلك على سبيل المثال، عندما نذهب إلى مكون القائمة.
ما ندركه هو أنه عندما نقوم بالاشتراك،
كنا نتوقع أن يتم تسليم الأطباق لنا.
الآن، فمن الممكن أن تعليمات من الأطباق،
سيتم تسليم الخطأ من قبل رمي ملحوظ ومن
ثم أن يؤدي إلى رسالة الخطأ المتاحة لنا.
لذلك، للتعامل مع هذا الوضع، وسوف أعرض
متغير جديد يسمى إرميس في مكون القائمة الذي هو من نوع سلسلة.
ثم توفر طريقة الاشتراك نفسها طريقة للتعامل مع الأخطاء.
وبالتالي فإن طريقة الاشتراك، في الوقت الحالي قمنا بتحديد وظيفة واحدة فقط هنا.
يمكننا أيضا تحديد وظيفة ثانية والتي
سيتم استدعاؤها عندما ينتج الخطأ.
حتى في هذه الحالة، يمكنني توفير وظيفة خطأ ثانية قائلا،
إرميس، وهي القيمة التي تم إرجاعها في
عندما يتم رمي ملحوظ من قبل ديشسرفيس.
حتى في هذه الحالة، أود أن أقول this.Errmess = إرميس، وهذا كل شيء.
حتى هنا ما يحدث هو أنه عندما
يتم إرجاع الملاحظة من قبل ديشسرفيس هو قيمة،
ثم سيتم التعامل معها من قبل الجزء الأول.
إذا تم إرجاع الملاحظة مع رمي يمكن ملاحظتها،
ثم سيتم تنفيذ هذه الوظيفة.
وفي هذه الوظيفة، نحن نأخذ رسالة الخطأ
ثم التقاط رسالة الخطأ هذه في سلسلة إرميس هذه التي لدينا هنا.
حتى الآن لدينا رسالة الخطأ المتاحة لنا، حتى
نتمكن من عرض رسالة الخطأ هذه على عرض عنصر القائمة هذا.
فكيف يمكننا عرض هذا في عرض مكونات القائمة؟
حتى الذهاب إلى ملف قالب مكونات القائمة، وهنا نرى أنه إذا كانت الأطباق ليست فارغة،
ثم نحن عرض القائمة مع جميع الأطباق.
إذا كانت الأطباق فارغة ثم يتم عرض هذا الدوار هناك.
الآن، سوف نضيف في واحد آخر هنا،
حتى لو كان إرميس التي لدينا،
المتغير، ليست فارغة، ثم أيضا
يجب أن تكون مخفية الدوار وبعد ذلك،
وأخيرا، إضافة في ديف واحد أكثر مع نجيف.
لذلك ما يفعله هذا هو أنه سيتم عرض هذا الغوص الأخير في
حالة وجود أخطاء، ورسالة الخطأ.
يتم إعداد سلسلة إرميسي إلى رسالة الخطأ.
لذلك في هذه الحالة، سنقول ببساطة خطأ h2،
وبعد ذلك سأقوم فقط بعرض تلك السلسلة،
سلسلة داخل العرض هناك، هذا كل شيء.
يمكنك القيام بطريقة أكثر تفصيلاً لعرض رسالة الخطأ إذا كنت
ترغب في ذلك.
ولكن كل ما سأقوم به هو إذا كان هناك خطأ،
وسوف تظهر ببساطة خطأ على الشاشة ومن ثم عرض إرميس.
يمكنك حتى نمط ذلك عن طريق تغيير اللون إلى الأحمر
وهلم جرا، ولكن سأترك فقط من هذا القبيل هناك.
لذلك، مع هذا، سوف ينتهي بنا المطاف عرض رسالة الخطأ في طريقة العرض هنا.
ويمكن أيضا أن تستخدم نفس الإجراء مع مكون الطبق
وأيضا المكون المنزل حيث نحن الوصول إلى خدمة الطبق.
حتى الذهاب إلى مكون الطبق، وأنا ذاهب الى القيام بالضبط نفس الشيء،
وذلك داخل عنصر الطبق وسوف تشمل، إرميس هنا.
ثم هنا في الاشتراك،
وهذا هو المكان الذي نتلقى قيمة الطبق.
وبالتالي فإن الجزء الأول،
ما قمنا بتضمينه بالفعل سيتم استدعاؤه إذا كان يمكن ملاحظته إرجاع قيمة.
ولكن إذا لم تقم بإرجاع قيمة، فنحن بحاجة إلى التعامل مع رسالة الخطأ.
وسنستخدم بالضبط نفس
وظيفة رسالة الخطأ التي حددناها في وقت سابق في مكون القائمة.
لذلك، سوف نقول أن هذا.errmess
= إرميس هنا.
هذا كل شيء، لذلك يتم تحديث مكون الطبق الخاص بي الآن.
لذلك أنا بحاجة إلى تحديث ملف قالب مكون الطبق.
حتى الذهاب إلى ملف القالب،
ونحن نرى أننا سوف يتم عرض الطبق إذا طبق ليست فارغة.
ثم أسفل هنا، ونحن نتعامل مع الوضع
حيث سنعرض الدوار إذا كان الطبق فارغًا.
لذلك اسمحوا لي أن أضيف أيضا، إذا كانت رسالة الخطأ ليست فارغة ثم يجب أن
يكون عرض رسالة خطأ بدلا من الطبق هنا، أليس كذلك؟
لذلك، اسمحوا لي أن المضي قدما
ونسخ التعليمات البرمجية من مكون القائمة.
أنا ذاهب إلى استخدام بالضبط نفس التعليمات البرمجية
لملف قالب مكونات تفاصيل الطبق أيضا.
لذا، هناك
اسمحوا لي أن المضي قدما وإدراج هذا الرمز هنا.
لذلك نرى أنه إذا لم يكن ErMess فارغًا،
فسيتم عرض هذا الخطأ في العرض هناك.
الآن نفس الشيء،
والذهاب إلى مكون المنزل نحن بحاجة للذهاب من خلال نفس الإجراء.
الآن داخل مكون المنزل، بالطبع، لدينا طبق، ترقية، وقائد.
لذلك أنا ذاهب لتحديد منفصلة، سلاسل
لكل واحد منهم لأن الخطأ يمكن أن تنشأ من أي واحد من الثلاثة.
الآن نحن نتعامل فقط مع الطبق الذي يتم جلبه من جانب الخادم
الاثنان المتبقيان سأتوقع منك أن تفعل ذلك كجزء من المهمة النهائية
لذلك سنقوم، سأقول سلسلة إرميسي الطبق ومن ثم النزول إلى التعليمات البرمجية هنا.
وفي الشفرة هنا،
سنقول ببساطة خطأ.
هذا الطبق إرميسي = أي
إرميسي، هذا كل شيء.
وبالمثل، قم بتحديث ملفات قالب المكونات الرئيسية.
والذهاب إلى ملف قالب مكونات المنزل،
ونحن نرى أن لدينا سلة طبق المعروضة هناك،
حتى الآن لهذا واحد يجب أن أقول أو طبق إرميس.
ثم، أسفل هنا، وسوف تشمل التعليمات البرمجية
التي قمت بنسخها من مكون القائمة،
ومن ثم قمت بتحديثه إلى طبق إرميس هنا.
وأيضًا، قم بتحديث هذا إلى DisherrMess هنا، هذا كل شيء.
دعونا حفظ التغييرات.
الذهاب إلى المتصفح، ترى أن كل شيء يعمل تماما كما كان من قبل.
المنزل، مكون القائمة وأيضا عنصر التفاصيل طبق دون أي مشكلة.
والسؤال الآن هو، كيف نسبب أخطاء؟
لتسبب الأخطاء، إحدى الطرق الممكنة التي يمكننا التعامل معها هي أننا نذهب
والبحث عن معلومات غير موجودة من الخادم.
اسمحوا لي أن أذهب إلى خدمة الطبق ثم يسبب
مشكلتي الأولى في ديشسرفيس هنا.
لذلك بالنسبة للطبق المميز بدلا من الأطباق، اسمحوا لي أن أرتكب خطأ
وأقول ديشيس ثم حفظ التغيير.
من الواضح أن هذا يعني أن عنوان url هذا غير موجود.
لذا، ماذا سيحدث إذا كان الوصول إلى الخادم؟
الذهاب إلى المتصفح عندما ننتقل الآن،
ترى أن الطبق لا يتم عرضه هنا.
وتقول هنا خطأ 404 لم يتم العثور عليها.
وذلك لأننا نحاول الوصول إلى معلومات الطبق
في عنوان URL غير موجود على جانب الخادم.
لذلك ترى كيف يتم عرض رسالة الخطأ هنا.
بالطبع، يمكنك أن تكون أكثر نزوة والقيام بالمزيد من العمل حول هذا ومن
ثم عرض رسالة الخطأ بطريقة أكثر معنى.
ولكن يتم تمييز المبدأ الأساسي هنا قائلا أنه
يمكنك إظهار رسالة خطأ إذا لم يتم تنفيذ شيء بشكل صحيح
عند محاولة الوصول إلى المعلومات من جانب الخادم الخاص بك.
بالطبع، هذا خطأ تم إنشاؤه بشكل مصطنع في طلبي.
للتسبب في نوع آخر من الخطأ، لقد ذهبت إلى نافذة المحطة الطرفية الخاصة بي
ثم إيقاف تشغيل الخادم لمعرفة ما سيفعله تطبيق Angular الخاص بي في هذه الحالة.
لذلك بعد إيقاف تشغيل الخادم،
دعونا نرى ما سيعرض المكون الرئيسي في وجهة نظره.
لذا، فانتقل إلى المكون الرئيسي، نرى الآن أنه نظرًا لأن
تطبيقي Angular غير قادر على الوصول إلى الخادم، فقد تسبب في حدوث خطأ مرة أخرى.
ثم يظهر هذه السلسلة هناك للإشارة إلى حدوث بعض الأخطاء.
بالطبع، هذه سلسلة خفية،
لا تنقل أي شيء ذي مغزى حول مصدر الخطأ.
ولكن هذا كل ما يمكننا الحصول على محاولة للوصول إلى الخادم في هذا التطبيق.
نفس الشيء، إذا ذهبت إلى القائمة، سترى نفس النوع من الشيء الذي يتم
عرضه، لأن الخادم غير متوفر، وبالتالي
لا يمكن جلب معلومات الطبق من الخادم.
مع هذا نكمل هذا التمرين.
في هذا التمرين، تعلمنا كيفية التعامل مع
الأخطاء التي تنشأ أثناء اتصال خادم العميل في تطبيق Angular الخاص بنا.
هذا هو الوقت المناسب بالنسبة لك للقيام git الالتزام مع الرسالة http الجزء الثاني.
[ موسيقى]