1
00:00:03,630 --> 00:00:08,225
كما تعلمنا بالفعل في الدرس السابق،

2
00:00:08,225 --> 00:00:15,020
بروتوكول HTTP تمكننا من التواصل بين العميل والخادم.

3
00:00:15,020 --> 00:00:19,770
لقد رأينا بعض التفاصيل حول بروتوكول HTTP بالفعل في الدرس السابق.

4
00:00:19,770 --> 00:00:25,440
في هذا الدرس، سنقوم باستكشاف الدعم الزاوي لـ HTTP.

5
00:00:25,440 --> 00:00:29,810
يدعم الزاوي هتب من خلال عميل هتب الزاوي.

6
00:00:29,810 --> 00:00:32,700
سننظر في كيفية الاستفادة من

7
00:00:32,700 --> 00:00:36,725
عميل HTTP Angular للاتصال بالعميل والخادم،

8
00:00:36,725 --> 00:00:38,925
في تطبيقنا Angular.

9
00:00:38,925 --> 00:00:42,045
التدريبان اللذان يتابعان هذه المحاضرة،

10
00:00:42,045 --> 00:00:45,650
سوف نستكشف الاستخدام العملي

11
00:00:45,650 --> 00:00:49,660
لعميل HTTP الزاوي داخل تطبيقنا الزاوي.

12
00:00:49,660 --> 00:00:56,020
دعونا ننظر إلى قليلا من تفاصيل عميل هتب في هذه المحاضرة.

13
00:00:56,020 --> 00:00:58,415
كما نتوقع، يعمل

14
00:00:58,415 --> 00:01:02,975
Angular على تعزيز بروتوكول HTTP لتمكين الاتصال بين

15
00:01:02,975 --> 00:01:08,000
عميلنا Angular والخادم القائم على HTTP.

16
00:01:08,000 --> 00:01:11,820
معظم المتصفحات الحديثة، وعادة ما تستخدم لدعم

17
00:01:11,820 --> 00:01:17,820
XMLHttpRequest أو طريقة XHR للتواصل مع الخادم.

18
00:01:17,820 --> 00:01:22,519
على نحو متزايد، تعتمد المتصفحات واجهة برمجة تطبيقات الجلب،

19
00:01:22,519 --> 00:01:26,900
وهو بديل حديث لـ XMLHttpRequest

20
00:01:26,900 --> 00:01:32,225
كوسيلة لتوفير التواصل بين المتصفح والخادم.

21
00:01:32,225 --> 00:01:39,960
يستفيد الزاوي من هذا للتواصل مع الخادم باستخدام عميل HTTP.

22
00:01:39,960 --> 00:01:48,450
سننظر في استخدام عميل HTTP وكيف يمكننا استخدام HttpClientModule،

23
00:01:48,450 --> 00:01:52,425
داخل تطبيقنا الزاوي لتمكين اتصال العميل والخادم.

24
00:01:52,425 --> 00:01:56,150
أي اتصال بين العميل والخادم كما نتوقع،

25
00:01:56,150 --> 00:01:57,770
سيكون غير متزامن في الطبيعة.

26
00:01:57,770 --> 00:02:00,410
لذلك، مما يعني أن العميل يحتاج

27
00:02:00,410 --> 00:02:03,470
إلى الانتظار حتى يتم تسليم البيانات من موقع الخادم.

28
00:02:03,470 --> 00:02:06,620
وبالتالي، يحتاج العميل الخاص بك

29
00:02:06,620 --> 00:02:12,420
إلى تكوين للتعامل مع هذا التأخير في الحصول على البيانات.

30
00:02:12,420 --> 00:02:16,295
في الوحدة السابقة نفسها،

31
00:02:16,295 --> 00:02:19,910
قمنا بالفعل بتكوين تطبيقات العميل لدينا

32
00:02:19,910 --> 00:02:24,160
لتكون قادرة على إظهار الدوار التقدم على واجهة المستخدم،

33
00:02:24,160 --> 00:02:28,795
لإبقاء المستخدم على علم بحقيقة أن هناك تأخير في الحصول على البيانات،

34
00:02:28,795 --> 00:02:31,985
قبل أن يتم عرض العرض.

35
00:02:31,985 --> 00:02:35,210
هذا يأتي لمساعدتنا في هذا الدرس،

36
00:02:35,210 --> 00:02:42,880
حيث من الواضح أننا يجب أن نتعامل مع التأخير للحصول على البيانات من موقع الخادم.

37
00:02:42,880 --> 00:02:47,000
الوصول إلى البيانات داخل تطبيق Angular الخاص بنا،

38
00:02:47,000 --> 00:02:52,150
فمن الأفضل دائمًا تفويض هذه المسؤولية إلى الخدمة.

39
00:02:52,150 --> 00:02:56,450
لذلك، نسمح للخدمة بالتعامل مع التفاعل مع الخادم،

40
00:02:56,450 --> 00:03:02,795
ثم يحصل المكون الخاص بك على البيانات عن طريق استدعاء أساليب الخدمة.

41
00:03:02,795 --> 00:03:08,405
تفاعل خدمة المكون الذي قمنا بإعداده بالفعل في الوحدة السابقة.

42
00:03:08,405 --> 00:03:09,970
لذلك، كل ما نحتاج إلى القيام به،

43
00:03:09,970 --> 00:03:16,700
هو تحديث خدماتنا للاستفادة من وحدة HTTP للتواصل مع الخادم،

44
00:03:16,700 --> 00:03:20,060
للحصول على البيانات من الخادم وبعد ذلك،

45
00:03:20,060 --> 00:03:26,645
توفير البيانات إلى المكون.

46
00:03:26,645 --> 00:03:30,980
سيقوم خادم HTTP نفسه بإرجاع البيانات إلى عميلنا

47
00:03:30,980 --> 00:03:37,245
وتقوم وحدة HTTP الخاصة بنا بإرجاع البيانات إلى خدمتنا في متابعة يمكن ملاحظتها.

48
00:03:37,245 --> 00:03:40,010
هذا يمكن ملاحظته، سيتم بعد ذلك معالجتها

49
00:03:40,010 --> 00:03:43,030
ثم إرجاعها كعنصر يمكن ملاحظته.

50
00:03:43,030 --> 00:03:46,760
هذا الجزء لدينا بالفعل الإعداد في الوحدة السابقة.

51
00:03:46,760 --> 00:03:51,380
لذلك، سوف نستفيد من ذلك لتمكيننا من

52
00:03:51,380 --> 00:03:56,315
الانزلاق بسرعة اتصال HTTP بين العميل والخادم،

53
00:03:56,315 --> 00:04:00,145
بين الخدمة وموقع الخادم،

54
00:04:00,145 --> 00:04:05,900
ومن ثم

55
00:04:05,900 --> 00:04:12,010
يمكن لبقية البنية التحتية الموجودة بالفعل في تطبيق Angular التعامل بسهولة مع التسليم لل عنصر الذي يمكن ملاحظته

56
00:04:12,010 --> 00:04:15,130
لمكوننا, و المكون الذي اشترك بالفعل في ذلك المراقب.

57
00:04:15,130 --> 00:04:18,200
التأثير الإضافي الذي سنتعامل معه

58
00:04:18,200 --> 00:04:21,040
هو كيفية التعامل مع الأخطاء.

59
00:04:21,040 --> 00:04:25,340
سنتحدث عن ذلك بمزيد من التفصيل في الشرائح اللاحقة.

60
00:04:25,340 --> 00:04:27,625
لذلك، كما ذكرت بالفعل،

61
00:04:27,625 --> 00:04:30,850
يقوم عميل HTTP بإرجاع ملاحظة.

62
00:04:30,850 --> 00:04:33,845
لذلك، عند استدعاء وحدة هتب،

63
00:04:33,845 --> 00:04:38,040
لذلك سوف إعداد الخدمة الخاصة بك للاستفادة من وحدة هتب،

64
00:04:38,040 --> 00:04:40,295
ومع وحدة هتب،

65
00:04:40,295 --> 00:04:46,290
فإنه يوفر لك مع العديد من الطرق التي تتطابق مع الحصول على،

66
00:04:46,290 --> 00:04:49,800
وضع، نشر، وحذف الأفعال من بروتوكول هتب.

67
00:04:49,800 --> 00:04:50,870
لذلك، يتم

68
00:04:50,870 --> 00:04:54,960
دعم أساليب الحصول على، وضع، نشر، وحذف تلقائيا من قبل وحدة هتب.

69
00:04:54,960 --> 00:04:59,165
لذلك، سوف تستفيد من هذه الأساليب لتكون قادرة على تنفيذ

70
00:04:59,165 --> 00:05:03,330
تلك العمليات معينة على موقع الخادم.

71
00:05:03,330 --> 00:05:06,365
لذلك، عند إصدار مكالمة الحصول على HTTP،

72
00:05:06,365 --> 00:05:13,195
فأنت تطلب تسليم البيانات من الخادم إلى العميل.

73
00:05:13,195 --> 00:05:18,170
سيقوم عميل HTTP بدوره بمعالجة الملاحظة التي يتم تسليمها من خلال وحدة HTTP Angular،

74
00:05:18,170 --> 00:05:22,470
ثم تسليم ذلك يمكن ملاحظته إلى المكون الخاص بنا.

75
00:05:22,470 --> 00:05:25,550
داخل المكون لدينا، ونحن بالفعل

76
00:05:25,550 --> 00:05:28,340
الاشتراك في الملاحظة التي يتم تسليمها من قبل خدمتنا،

77
00:05:28,340 --> 00:05:32,580
وبالتالي التعامل مع البيانات التي يتم إرسالها من خلال ملحوظ،

78
00:05:32,580 --> 00:05:35,500
هو مستقيم إلى حد ما بالنسبة لنا.

79
00:05:35,500 --> 00:05:38,900
إذا كان تطبيق Angular

80
00:05:38,900 --> 00:05:43,705
يتواصل مع خادم يقوم بإرجاع الاستجابة بتنسيق JSON،

81
00:05:43,705 --> 00:05:47,280
فإن عملاء HTTP Angular يحصلون على الطريقة نفسها

82
00:05:47,280 --> 00:05:51,750
يوزع استجابة JSON الخاصة بالخادم إلى كائن مجهول.

83
00:05:51,750 --> 00:05:58,070
العميل نفسه، لا يعرف بالضبط كيفية تفسير شكل هذا الكائن.

84
00:05:58,070 --> 00:06:04,220
لذلك، يمكننا مساعدة عميل HTTP عن طريق تحديد شكل الكائن،

85
00:06:04,220 --> 00:06:10,170
عن طريق تحديد تعريف لفئة جافا سكريبت،

86
00:06:10,170 --> 00:06:13,520
والتي تحدد شكل الكائن بحيث

87
00:06:13,520 --> 00:06:17,025
يمكن استهلاك الإخراج من الحصول بسهولة من قبل التطبيق.

88
00:06:17,025 --> 00:06:19,330
لذلك، في التمرين،

89
00:06:19,330 --> 00:06:20,500
سترى لي أعلن.

90
00:06:20,500 --> 00:06:23,560
على سبيل المثال، سوف نقول هذا.http.get،

91
00:06:23,560 --> 00:06:27,695
ومن ثم داخل الأقواس الزاوي،

92
00:06:27,695 --> 00:06:29,940
وأنا تحديد طبق هناك.

93
00:06:29,940 --> 00:06:31,555
لذلك، وبهذه الطريقة،

94
00:06:31,555 --> 00:06:37,400
سيتم تحويل البيانات الواردة لطلب الحصول من موقع الخادم إلى

95
00:06:37,400 --> 00:06:41,660
كائن طبق ومن ثم يمكن أن تستهلك على الفور

96
00:06:41,660 --> 00:06:47,185
من قبل المكون الخاص بي عندما يتم وضع المحتوى.

97
00:06:47,185 --> 00:06:48,990
الآن، إذا كنت بحاجة،

98
00:06:48,990 --> 00:06:54,315
يمكنك الوصول إلى الاستجابة الكاملة القادمة من موقع الخادم.

99
00:06:54,315 --> 00:06:57,810
ولكن هذا لن يكون إلا في ظل ظروف محددة،

100
00:06:57,810 --> 00:07:00,320
حيث تحتاج إلى الوصول إلى على سبيل المثال،

101
00:07:00,320 --> 00:07:05,820
رؤوس رسالة استجابة HTTP الواردة وما إلى ذلك.

102
00:07:05,820 --> 00:07:08,300
ولكن بالنسبة لمعظم الأغراض،

103
00:07:08,300 --> 00:07:11,380
فقط من خلال الإعلان عن شكل الكائن،

104
00:07:11,380 --> 00:07:16,100
يمكننا بسهولة الحصول على بيانات JSON تحليلها تلقائيًا بطريقة

105
00:07:16,100 --> 00:07:21,410
يمكن استهلاكها بواسطة تطبيق Angular الخاص بنا بسهولة أكبر.

106
00:07:21,410 --> 00:07:24,140
كما نتوقع، فإن الاتصال

107
00:07:24,140 --> 00:07:27,845
بين العميل والخادم لن يكون خاليًا من الأخطاء.

108
00:07:27,845 --> 00:07:32,060
الأخطاء تسير على المحاصيل لعدة أسباب مختلفة.

109
00:07:32,060 --> 00:07:36,740
قد يكون عدم تأسيس الاتصال بين العميل والخادم،

110
00:07:36,740 --> 00:07:40,130
قد يكون حقيقة أن الرد من الخادم يضيع،

111
00:07:40,130 --> 00:07:47,660
قد يكون حقيقة أن الخادم غير قادر على العثور على البيانات التي تبحث عنها،

112
00:07:47,660 --> 00:07:54,005
وهكذا يعود 404 يشير إلى أن الخادم

113
00:07:54,005 --> 00:08:00,515
هو غير قادر على توفير البيانات لك أو البيانات المفقودة على موقع الملقم وهكذا.

114
00:08:00,515 --> 00:08:04,070
لذلك، يحتاج عميلك للتعامل مع كل هذه الأخطاء.

115
00:08:04,070 --> 00:08:05,745
لذلك، ضمن خدمتنا،

116
00:08:05,745 --> 00:08:09,200
سنقوم بتكوين خدمتنا لتكون قادرة على التقاط هذا الخطأ.

117
00:08:09,200 --> 00:08:13,935
لذا، هذا هو المكان الذي

118
00:08:13,935 --> 00:08:17,870
يتيح لنا فيه استخدام طريقة catch التي يدعمها HTTP، التقاط الخطأ، ومعالجة هذا الخطأ،

119
00:08:17,870 --> 00:08:21,745
ثم إرسال رسالة الخطأ إلى المكون الخاص بنا،

120
00:08:21,745 --> 00:08:24,920
ثم السماح للمكون بالتعامل مع رسالة الخطأ

121
00:08:24,920 --> 00:08:28,340
بأي طريقة تبدو مناسبة.

122
00:08:28,340 --> 00:08:30,485
الآن، ضمن المكون لدينا على سبيل المثال،

123
00:08:30,485 --> 00:08:33,530
سوف نعرض معلومات الخطأ التي

124
00:08:33,530 --> 00:08:36,980
حصلنا عليها في رأينا للإشارة إلى المستخدم،

125
00:08:36,980 --> 00:08:40,755
أن خطأ حدث في الحصول على البيانات من موقع الخادم.

126
00:08:40,755 --> 00:08:43,210
لذلك، داخل الخدمة،

127
00:08:43,210 --> 00:08:45,015
نحن بحاجة إلى معالجة هذا الخطأ.

128
00:08:45,015 --> 00:08:48,710
الآن، عندما

129
00:08:48,710 --> 00:08:52,615
تتم معالجة معلومات الخطأ هذه التي تم الحصول عليها من موقع الخادم من خلال عميل HTTP داخل خدمتنا،

130
00:08:52,615 --> 00:08:54,815
ثم سنقوم بتحويل ذلك إلى سلسلة،

131
00:08:54,815 --> 00:08:59,905
وسيتم تمرير هذه السلسلة إلى المكون الخاص بنا باستخدام طريقة رمي يمكن ملاحظتها.

132
00:08:59,905 --> 00:09:02,785
لذا، تسمح لنا طريقة الرمي برمي خطأ.

133
00:09:02,785 --> 00:09:05,770
ثم لأنه في المكون لدينا نحن

134
00:09:05,770 --> 00:09:08,770
الاشتراك في هذا ملحوظ ضمن طريقة الاشتراك،

135
00:09:08,770 --> 00:09:10,520
ثم تحتاج إلى التعامل مع الخطأ.

136
00:09:10,520 --> 00:09:12,505
لذلك، في جزء الاشتراك،

137
00:09:12,505 --> 00:09:17,120
رأينا في وقت سابق وظيفة واحدة فقط يتم تحديدها للاشتراك

138
00:09:17,120 --> 00:09:19,820
، والتي تتعامل مع العملية العادية.

139
00:09:19,820 --> 00:09:21,490
ولكن جنبا إلى جنب مع ذلك،

140
00:09:21,490 --> 00:09:27,270
يمكننا أيضا توفير وظيفة ثانية التي سيتم تسليم الخطأ.

141
00:09:27,270 --> 00:09:32,450
لذلك، سترى لي تكوين جزء الاشتراك من المكون الخاص بي

142
00:09:32,450 --> 00:09:38,480
باستخدام وظيفة ثانية محددة ضمن طريقة الاشتراك هناك،

143
00:09:38,480 --> 00:09:44,475
كمثال يوضح هذا الرمز هنا.

144
00:09:44,475 --> 00:09:47,780
وبهذه الطريقة، سيتم القبض على الخطأ داخل

145
00:09:47,780 --> 00:09:50,890
المكون الخاص بي ثم رسالة الخطأ المناسبة،

146
00:09:50,890 --> 00:09:54,380
سيتم تسليم المعلومات للمستخدم داخل العرض.

147
00:09:54,380 --> 00:10:00,825
لذلك، سنرى ذلك كجزء من التمرين الثاني في هذا الدرس بالذات.

148
00:10:00,825 --> 00:10:07,010
مع هذا الفهم السريع لعميل HTTP،

149
00:10:07,010 --> 00:10:11,335
سننتقل الآن إلى التمارين حيث سنستخدم

150
00:10:11,335 --> 00:10:17,795
عميل HTTP Angular المقدم من خلال وحدة HTTP الخاصة بمكتبة HTTP Angular،

151
00:10:17,795 --> 00:10:22,740
لتمكيننا من التواصل مع خادمنا.