تحليل موجز لوحدة HttpClientModule في التعلم الزاوي

ستأخذك هذه المقالة إلى فهم وحدة HttpClientModule باللغة الزاويّة، وتقديم طريقة الطلب، ومعلمات الطلب، ومحتوى الاستجابة، والمعترضات، والوكيل الزاوي، والمعرفة الأخرى ذات الصلة.

تُستخدم هذه الوحدة لإرسال طلبات Http ، وتُرجع الطرق المستخدمة لإرسال الطلبات كائنات Observable . [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

1. بداية سريعة

1)، تقديم وحدة HttpClientModule

 // app.module.ts
استيراد { httpClientModule } من '@angular/common/http'؛
الواردات: [
httpClientModule
]

2) قم بإدخال كائن مثيل خدمة HttpClient لإرسال الطلبات

 // app.component.ts
استيراد {HttpClient} من '@angular/common/http'؛

فئة التصدير AppComponent {
	منشئ (http خاص: HttpClient) {}
}

3) إرسال الطلب

 استيراد {HttpClient} من "@angular/common/http"

فئة التصدير AppComponent تنفذ OnInit {
منشئ (http خاص: HttpClient) {}
نجونينيت () {
this.getUsers().subscribe(console.log)
}
الحصول على المستخدمين () {
قم بإرجاع هذا.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. طريقة الطلب

 this.http.get(url [, options]);
this.http.post(url, data [, options]);
this.http.delete(url [, options]);
this.http.put(url, data [, options]);

 this.http.get<Post[]>('/getAllPosts')
.subscribe(response => console.log(response))

3. طلب ​​المعلمات

1. فئة HttpParams

 تصدير إعلان فئة HttpParams {
builder(options?: HttpParamsOptions);
has(param: string): boolean;
الحصول على (المعلمة: سلسلة): سلسلة |.
getAll(param: string): string[] null;
المفاتيح (): سلسلة []؛
إلحاق (المعلمة: سلسلة، القيمة: سلسلة): HttpParams؛
set(param: string, value: string): HttpParams;
حذف (param: string, value?: string): HttpParams;
toString (): سلسلة؛
}

2. واجهة HttpParamsOptions

 أعلن واجهة HttpParamsOptions {
fromString ؟: سلسلة؛
من الكائن ؟: {
[param: string]: string |.ReadonlyArray<string>;
};
التشفير ؟: HttpParameterCodec;
}

3. أمثلة الاستخدام

 استيراد {HttpParams} من '@angular/common/http'؛

Let params = new HttpParams({ fromObject: {name: "zhangsan"، العمر: "20"}})
المعلمات = params.append("الجنس"، "ذكر")
دع المعلمات = جديد HttpParams({ fromString: "name=zhangsan&age=20"})

4. رأس الطلب

يتطلب إنشاء حقول رأس الطلب استخدام فئة HttpHeaders. هناك طرق مختلفة لتشغيل رؤوس الطلب ضمن كائن مثيل الفئة.

 تصدير إعلان فئة HttpHeaders {
منشئ (رؤوس ؟: سلسلة | {
[الاسم: سلسلة]: سلسلة | سلسلة []؛
});
لديه (الاسم: سلسلة): منطقي؛
الحصول على (الاسم: سلسلة): سلسلة |.
المفاتيح (): سلسلة []؛
getAll(name: string): string[] null;
إلحاق (الاسم: سلسلة، القيمة: سلسلة | سلسلة []): HttpHeaders؛
set(name: string, value: string | string[]): HttpHeaders;
حذف (الاسم: سلسلة، قيمة؟: سلسلة | سلسلة []): HttpHeaders؛
}

 Let headers = new HttpHeaders({ test: "Hello" })

5. محتوى الاستجابة

 أعلن النوع HttpObserve = 'body' |.
// يقرأ الرد نص الاستجابة الكامل // يقرأ النص البيانات التي يعيدها الخادم

 هذا.http.get(
"https://jsonplaceholder.typicode.com/users"،
{لاحظ: "الجسم" }
).الاشتراك(console.log)

6. المعترض

تعد أدوات الاعتراض طريقة لالتقاط طلبات واستجابات HTTP وتعديلها عالميًا في تطبيقات Angular. (رمز، خطأ)

سوف يعترض المعترض الطلبات المقدمة باستخدام وحدة HttpClientModule فقط.

ng g interceptor <name>

6.1 طلب الاعتراض

 @Injectable()
فئة التصدير AuthInterceptor تنفذ HttpInterceptor {
منشئ () {}
	// اعتراض طريقة الاعتراض (
// غير معروف يحدد نوع طلب نص (نص) الطلب: HttpRequest<unknown>,
التالي: HttpHandler
// غير معروف يحدد نوع محتوى الاستجابة (النص): Observable<HttpEvent<unknown>> {
// استنساخ وتعديل رأس الطلب const req = request.clone({
رؤوس المجموعة: {
التفويض: "الحامل xxxxxxx"
}
})
// قم بتمرير رأس الطلب المعدل مرة أخرى إلى التطبيق من خلال وظيفة رد الاتصال return next.handle(req)
}
}

6.2 اعتراض الاستجابة

 @Injectable()
فئة التصدير AuthInterceptor تنفذ HttpInterceptor {
منشئ () {}
	// اعتراض طريقة الاعتراض (
الطلب: HttpRequest<غير معروف>،
التالي: HttpHandler
): يمكن ملاحظتها<any> {
العودة next.handle(request).pipe(
إعادة المحاولة (2)،
كاتش إيررور ((خطأ: HttpErrorResponse) => throwError(خطأ))
)
}
}

6.3 الحقن الاعتراضي

 استيراد { AuthInterceptor } من "./auth.interceptor"
استيراد { HTTP_INTERCEPTORS } من "@angular/common/http"

@NgModule({
مقدمي الخدمة: [
{
توفير: HTTP_INTERCEPTORS،
فئة الاستخدام: AuthInterceptor،
متعدد: صحيح
}
]
})

7. الوكيل الزاوي

1. قم بإنشاء ملف proxy.conf.json في الدليل الجذر للمشروع وأضف الكود التالي

 {
"/واجهة برمجة التطبيقات/*": {
"الهدف": "http://localhost:3070",
"آمن": كاذب،
"changeOrigin": صحيح
}
}

• /api/*: الطلبات التي تبدأ بـ /api المقدمة في التطبيق تمر عبر هذا الوكيل

• الهدف: عنوان URL من جانب الخادم

• آمن: إذا كان بروتوكول عنوان URL من جانب الخادم هو https، فيجب أن يكون هذا العنصر صحيحًا

• ChangeOrigin: إذا لم يكن الخادم مضيفًا محليًا، فيجب أن يكون هذا العنصر صحيحًا

2. حدد ملف تكوين الوكيل (الطريقة الأولى)

 "البرامج النصية": {
"start": "ngserv --proxy-config proxy.conf.json"،
}

3. حدد ملف تكوين الوكيل (الطريقة الثانية)

 "يخدم": {
"خيارات": {
"proxyConfig": "proxy.conf.json"
}, 

تُستخدم هذه الوحدة لإرسال طلبات Http ، وتُرجع الطرق المستخدمة لإرسال الطلبات كائنات Observable .