كما تعلمنا بالفعل في الدرس السابق،
بروتوكول HTTP تمكننا من التواصل بين العميل والخادم.
لقد رأينا بعض التفاصيل حول بروتوكول HTTP بالفعل في الدرس السابق.
في هذا الدرس، سنقوم باستكشاف الدعم الزاوي لـ HTTP.
يدعم الزاوي هتب من خلال عميل هتب الزاوي.
سننظر في كيفية الاستفادة من
عميل HTTP Angular للاتصال بالعميل والخادم،
في تطبيقنا Angular.
التدريبان اللذان يتابعان هذه المحاضرة،
سوف نستكشف الاستخدام العملي
لعميل HTTP الزاوي داخل تطبيقنا الزاوي.
دعونا ننظر إلى قليلا من تفاصيل عميل هتب في هذه المحاضرة.
كما نتوقع، يعمل
Angular على تعزيز بروتوكول HTTP لتمكين الاتصال بين
عميلنا Angular والخادم القائم على HTTP.
معظم المتصفحات الحديثة، وعادة ما تستخدم لدعم
XMLHttpRequest أو طريقة XHR للتواصل مع الخادم.
على نحو متزايد، تعتمد المتصفحات واجهة برمجة تطبيقات الجلب،
وهو بديل حديث لـ XMLHttpRequest
كوسيلة لتوفير التواصل بين المتصفح والخادم.
يستفيد الزاوي من هذا للتواصل مع الخادم باستخدام عميل HTTP.
سننظر في استخدام عميل HTTP وكيف يمكننا استخدام HttpClientModule،
داخل تطبيقنا الزاوي لتمكين اتصال العميل والخادم.
أي اتصال بين العميل والخادم كما نتوقع،
سيكون غير متزامن في الطبيعة.
لذلك، مما يعني أن العميل يحتاج
إلى الانتظار حتى يتم تسليم البيانات من موقع الخادم.
وبالتالي، يحتاج العميل الخاص بك
إلى تكوين للتعامل مع هذا التأخير في الحصول على البيانات.
في الوحدة السابقة نفسها،
قمنا بالفعل بتكوين تطبيقات العميل لدينا
لتكون قادرة على إظهار الدوار التقدم على واجهة المستخدم،
لإبقاء المستخدم على علم بحقيقة أن هناك تأخير في الحصول على البيانات،
قبل أن يتم عرض العرض.
هذا يأتي لمساعدتنا في هذا الدرس،
حيث من الواضح أننا يجب أن نتعامل مع التأخير للحصول على البيانات من موقع الخادم.
الوصول إلى البيانات داخل تطبيق Angular الخاص بنا،
فمن الأفضل دائمًا تفويض هذه المسؤولية إلى الخدمة.
لذلك، نسمح للخدمة بالتعامل مع التفاعل مع الخادم،
ثم يحصل المكون الخاص بك على البيانات عن طريق استدعاء أساليب الخدمة.
تفاعل خدمة المكون الذي قمنا بإعداده بالفعل في الوحدة السابقة.
لذلك، كل ما نحتاج إلى القيام به،
هو تحديث خدماتنا للاستفادة من وحدة HTTP للتواصل مع الخادم،
للحصول على البيانات من الخادم وبعد ذلك،
توفير البيانات إلى المكون.
سيقوم خادم HTTP نفسه بإرجاع البيانات إلى عميلنا
وتقوم وحدة HTTP الخاصة بنا بإرجاع البيانات إلى خدمتنا في متابعة يمكن ملاحظتها.
هذا يمكن ملاحظته، سيتم بعد ذلك معالجتها
ثم إرجاعها كعنصر يمكن ملاحظته.
هذا الجزء لدينا بالفعل الإعداد في الوحدة السابقة.
لذلك، سوف نستفيد من ذلك لتمكيننا من
الانزلاق بسرعة اتصال HTTP بين العميل والخادم،
بين الخدمة وموقع الخادم،
ومن ثم
يمكن لبقية البنية التحتية الموجودة بالفعل في تطبيق Angular التعامل بسهولة مع التسليم لل عنصر الذي يمكن ملاحظته
لمكوننا, و المكون الذي اشترك بالفعل في ذلك المراقب.
التأثير الإضافي الذي سنتعامل معه
هو كيفية التعامل مع الأخطاء.
سنتحدث عن ذلك بمزيد من التفصيل في الشرائح اللاحقة.
لذلك، كما ذكرت بالفعل،
يقوم عميل HTTP بإرجاع ملاحظة.
لذلك، عند استدعاء وحدة هتب،
لذلك سوف إعداد الخدمة الخاصة بك للاستفادة من وحدة هتب،
ومع وحدة هتب،
فإنه يوفر لك مع العديد من الطرق التي تتطابق مع الحصول على،
وضع، نشر، وحذف الأفعال من بروتوكول هتب.
لذلك، يتم
دعم أساليب الحصول على، وضع، نشر، وحذف تلقائيا من قبل وحدة هتب.
لذلك، سوف تستفيد من هذه الأساليب لتكون قادرة على تنفيذ
تلك العمليات معينة على موقع الخادم.
لذلك، عند إصدار مكالمة الحصول على HTTP،
فأنت تطلب تسليم البيانات من الخادم إلى العميل.
سيقوم عميل HTTP بدوره بمعالجة الملاحظة التي يتم تسليمها من خلال وحدة HTTP Angular،
ثم تسليم ذلك يمكن ملاحظته إلى المكون الخاص بنا.
داخل المكون لدينا، ونحن بالفعل
الاشتراك في الملاحظة التي يتم تسليمها من قبل خدمتنا،
وبالتالي التعامل مع البيانات التي يتم إرسالها من خلال ملحوظ،
هو مستقيم إلى حد ما بالنسبة لنا.
إذا كان تطبيق Angular
يتواصل مع خادم يقوم بإرجاع الاستجابة بتنسيق JSON،
فإن عملاء HTTP Angular يحصلون على الطريقة نفسها
يوزع استجابة JSON الخاصة بالخادم إلى كائن مجهول.
العميل نفسه، لا يعرف بالضبط كيفية تفسير شكل هذا الكائن.
لذلك، يمكننا مساعدة عميل HTTP عن طريق تحديد شكل الكائن،
عن طريق تحديد تعريف لفئة جافا سكريبت،
والتي تحدد شكل الكائن بحيث
يمكن استهلاك الإخراج من الحصول بسهولة من قبل التطبيق.
لذلك، في التمرين،
سترى لي أعلن.
على سبيل المثال، سوف نقول هذا.http.get،
ومن ثم داخل الأقواس الزاوي،
وأنا تحديد طبق هناك.
لذلك، وبهذه الطريقة،
سيتم تحويل البيانات الواردة لطلب الحصول من موقع الخادم إلى
كائن طبق ومن ثم يمكن أن تستهلك على الفور
من قبل المكون الخاص بي عندما يتم وضع المحتوى.
الآن، إذا كنت بحاجة،
يمكنك الوصول إلى الاستجابة الكاملة القادمة من موقع الخادم.
ولكن هذا لن يكون إلا في ظل ظروف محددة،
حيث تحتاج إلى الوصول إلى على سبيل المثال،
رؤوس رسالة استجابة HTTP الواردة وما إلى ذلك.
ولكن بالنسبة لمعظم الأغراض،
فقط من خلال الإعلان عن شكل الكائن،
يمكننا بسهولة الحصول على بيانات JSON تحليلها تلقائيًا بطريقة
يمكن استهلاكها بواسطة تطبيق Angular الخاص بنا بسهولة أكبر.
كما نتوقع، فإن الاتصال
بين العميل والخادم لن يكون خاليًا من الأخطاء.
الأخطاء تسير على المحاصيل لعدة أسباب مختلفة.
قد يكون عدم تأسيس الاتصال بين العميل والخادم،
قد يكون حقيقة أن الرد من الخادم يضيع،
قد يكون حقيقة أن الخادم غير قادر على العثور على البيانات التي تبحث عنها،
وهكذا يعود 404 يشير إلى أن الخادم
هو غير قادر على توفير البيانات لك أو البيانات المفقودة على موقع الملقم وهكذا.
لذلك، يحتاج عميلك للتعامل مع كل هذه الأخطاء.
لذلك، ضمن خدمتنا،
سنقوم بتكوين خدمتنا لتكون قادرة على التقاط هذا الخطأ.
لذا، هذا هو المكان الذي
يتيح لنا فيه استخدام طريقة catch التي يدعمها HTTP، التقاط الخطأ، ومعالجة هذا الخطأ،
ثم إرسال رسالة الخطأ إلى المكون الخاص بنا،
ثم السماح للمكون بالتعامل مع رسالة الخطأ
بأي طريقة تبدو مناسبة.
الآن، ضمن المكون لدينا على سبيل المثال،
سوف نعرض معلومات الخطأ التي
حصلنا عليها في رأينا للإشارة إلى المستخدم،
أن خطأ حدث في الحصول على البيانات من موقع الخادم.
لذلك، داخل الخدمة،
نحن بحاجة إلى معالجة هذا الخطأ.
الآن، عندما
تتم معالجة معلومات الخطأ هذه التي تم الحصول عليها من موقع الخادم من خلال عميل HTTP داخل خدمتنا،
ثم سنقوم بتحويل ذلك إلى سلسلة،
وسيتم تمرير هذه السلسلة إلى المكون الخاص بنا باستخدام طريقة رمي يمكن ملاحظتها.
لذا، تسمح لنا طريقة الرمي برمي خطأ.
ثم لأنه في المكون لدينا نحن
الاشتراك في هذا ملحوظ ضمن طريقة الاشتراك،
ثم تحتاج إلى التعامل مع الخطأ.
لذلك، في جزء الاشتراك،
رأينا في وقت سابق وظيفة واحدة فقط يتم تحديدها للاشتراك
، والتي تتعامل مع العملية العادية.
ولكن جنبا إلى جنب مع ذلك،
يمكننا أيضا توفير وظيفة ثانية التي سيتم تسليم الخطأ.
لذلك، سترى لي تكوين جزء الاشتراك من المكون الخاص بي
باستخدام وظيفة ثانية محددة ضمن طريقة الاشتراك هناك،
كمثال يوضح هذا الرمز هنا.
وبهذه الطريقة، سيتم القبض على الخطأ داخل
المكون الخاص بي ثم رسالة الخطأ المناسبة،
سيتم تسليم المعلومات للمستخدم داخل العرض.
لذلك، سنرى ذلك كجزء من التمرين الثاني في هذا الدرس بالذات.
مع هذا الفهم السريع لعميل HTTP،
سننتقل الآن إلى التمارين حيث سنستخدم
عميل HTTP Angular المقدم من خلال وحدة HTTP الخاصة بمكتبة HTTP Angular،
لتمكيننا من التواصل مع خادمنا.