การวิเคราะห์โดยย่อของโมดูล HttpClientModule ในการเรียนรู้เชิงมุม

บทความนี้จะพาคุณมาทำความเข้าใจกับโมดูล HttpClientModule ในรูปแบบเชิงมุม และแนะนำวิธีการร้องขอ พารามิเตอร์คำขอ เนื้อหาการตอบสนอง ตัวดักจับ Angular Proxy และความรู้อื่นๆ ที่เกี่ยวข้อง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ

โมดูลนี้ใช้เพื่อส่งคำขอ Http และวิธีการที่ใช้ในการส่งคำขอส่งคืนวัตถุ Observable [บทช่วยสอนที่เกี่ยวข้องที่แนะนำ: "บทช่วยสอนเชิงมุม"]

1. เริ่มต้นอย่างรวดเร็ว

1) แนะนำโมดูล HttpClientModule

 // app.module.ts
นำเข้า { httpClientModule } จาก '@ เชิงมุม/common/http';
นำเข้า: [
httpClientModule
-

2) ฉีดวัตถุอินสแตนซ์บริการ HttpClient เพื่อส่งคำขอ

 // app.component.ts
นำเข้า { HttpClient } จาก '@ เชิงมุม/common/http';

ส่งออกคลาส AppComponent {
	ตัวสร้าง (http ส่วนตัว: HttpClient) {}
-

3) ส่งคำขอ

 นำเข้า { HttpClient } จาก "@เชิงมุม/common/http"

คลาสส่งออก AppComponent ใช้ OnInit {
ตัวสร้าง (http ส่วนตัว: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
-
getUsers() {
ส่งคืน this.http.get("https://jsonplaceholder.typicode.com/users")
-
-

2. วิธีการขอ

 this.http.get(url [, ตัวเลือก]);
this.http.post(url, ข้อมูล [, ตัวเลือก]);
this.http.delete(url [, ตัวเลือก]);
this.http.put(url, ข้อมูล [, ตัวเลือก]);

 this.http.get<โพสต์[]>('/getAllPosts')
.subscribe(response => console.log(response))

3. ขอพารามิเตอร์

1. คลาส HttpParams

 ส่งออกประกาศคลาส HttpParams {
ตัวสร้าง (ตัวเลือก?: HttpParamsOptions);
มี (พารามิเตอร์: สตริง): บูลีน;
รับ (พารามิเตอร์: สตริง): สตริง | .null;
getAll (พารามิเตอร์: สตริง): สตริง [] | .
คีย์(): สตริง[];
ผนวก (พารามิเตอร์: สตริง ค่า: สตริง): HttpParams;
ชุด (พารามิเตอร์: สตริง ค่า: สตริง): HttpParams;
ลบ (พารามิเตอร์: สตริง, ค่า?: สตริง): HttpParams;
toString(): สตริง;
-

2. อินเทอร์เฟซ HttpParamsOptions

 ประกาศอินเทอร์เฟซ HttpParamsOptions {
จากสตริง?: สตริง;
จากวัตถุ?: {
[พารามิเตอร์: สตริง]: สตริง | . ReadonlyArray<string>;
-
ตัวเข้ารหัส?: HttpParameterCodec;
-

3. ตัวอย่างการใช้งาน

 นำเข้า { HttpParams } จาก '@ เชิงมุม/common/http';

ให้ params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("เพศ", "ชาย")
ให้ params = new HttpParams({ fromString: "name=zhangsan&age=20"})

4. ส่วนหัวคำขอ

การสร้างฟิลด์ส่วนหัวของคำขอจำเป็นต้องใช้คลาส HttpHeaders มีหลายวิธีในการดำเนินการส่วนหัวของคำขอภายใต้ออบเจ็กต์อินสแตนซ์ของคลาส

 ส่งออกประกาศคลาส HttpHeaders {
ตัวสร้าง (ส่วนหัว?: string | {
[ชื่อ: สตริง]: สตริง | .สตริง[];
-
มี (ชื่อ: สตริง): บูลีน;
รับ (ชื่อ: สตริง): สตริง | .null;
คีย์(): สตริง[];
getAll (ชื่อ: สตริง): สตริง [] | .
ผนวก (ชื่อ: สตริง, ค่า: สตริง | สตริง []): HttpHeaders;
ชุด (ชื่อ: สตริง ค่า: สตริง | สตริง []): HttpHeaders;
ลบ (ชื่อ: สตริง, ค่า?: สตริง | สตริง []): HttpHeaders;
-

 ให้ headers = new HttpHeaders({ test: "Hello" })

5. เนื้อหาคำตอบ

 ประกาศประเภท HttpObserve = 'body' | .
// การตอบสนองอ่านเนื้อหาการตอบสนองที่สมบูรณ์ // เนื้อหาอ่านข้อมูลที่ส่งคืนโดยเซิร์ฟเวอร์

 นี้.http.get(
"https://jsonplaceholder.typicode.com/users",
{ สังเกต: "ร่างกาย" }
).สมัครสมาชิก(console.log)

6. เครื่องสกัดกั้น

Interceptors เป็นวิธีการจับภาพและแก้ไขคำขอ HTTP และการตอบกลับในแอปพลิเคชันเชิงมุมทั่วโลก (โทเค็น ข้อผิดพลาด)

Interceptor จะสกัดกั้นคำขอที่ทำโดยใช้โมดูล HttpClientModule เท่านั้น

ng g interceptor <name>

6.1 ขอสกัดกั้น

 @ฉีด()
ส่งออกคลาส AuthInterceptor ใช้ HttpInterceptor {
ตัวสร้าง () {}
	//สกัดกั้นวิธีการสกัดกั้น(
// ไม่ทราบระบุประเภทของคำขอเนื้อหา (เนื้อหา) คำขอ: HttpRequest<unknown>,
ถัดไป: HttpHandler
// ไม่ทราบ ระบุประเภทของเนื้อหาการตอบสนอง (เนื้อหา)): Observable<HttpEvent<unknown>> {
// โคลนและแก้ไขส่วนหัวของคำขอ const req = request.clone({
ตั้งค่าส่วนหัว: {
การอนุญาต: "ผู้ถือ xxxxxxx"
-
-
// ส่งส่วนหัวคำขอที่แก้ไขกลับไปยังแอปพลิเคชันผ่านฟังก์ชันโทรกลับ return next.handle(req)
-
-

6.2 การสกัดกั้นการตอบสนอง

 @ฉีด()
ส่งออกคลาส AuthInterceptor ใช้ HttpInterceptor {
ตัวสร้าง () {}
	//สกัดกั้นวิธีการสกัดกั้น(
คำขอ: HttpRequest<ไม่ทราบ>,
ถัดไป: HttpHandler
): สังเกตได้<ใด ๆ> {
กลับ next.handle (คำขอ) .pipe (
ลองอีกครั้ง (2)
catchError ((ข้อผิดพลาด: HttpErrorResponse) => ThrowError (ข้อผิดพลาด))
-
-
-

6.3 การฉีดสกัดกั้น

 นำเข้า { AuthInterceptor } จาก "./auth.interceptor"
นำเข้า { HTTP_INTERCEPTORS } จาก "@เชิงมุม/ทั่วไป/http"

@NgModule({
ผู้ให้บริการ: [
-
ให้: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
หลาย: จริง
-
-
-

7. พร็อกซีเชิงมุม

1. สร้างไฟล์ proxy.conf.json ในไดเร็กทอรีรากของโปรเจ็กต์และเพิ่มโค้ดต่อไปนี้

 -
"/api/*": {
"เป้าหมาย": "http://localhost:3070",
"ปลอดภัย": เท็จ
"changeOrigin": จริง
-
-

• /api/*: คำขอที่ขึ้นต้นด้วย /api ที่สร้างในแอปพลิเคชันต้องผ่านพรอกซีนี้

• เป้าหมาย: URL ฝั่งเซิร์ฟเวอร์

• ปลอดภัย: หากโปรโตคอลของ URL ฝั่งเซิร์ฟเวอร์คือ https รายการนี้จะต้องเป็นจริง

• changeOrigin: หากเซิร์ฟเวอร์ไม่ใช่ localhost รายการนี้จะต้องเป็นจริง

2. ระบุไฟล์การกำหนดค่าพร็อกซี (วิธีที่ 1)

 "สคริปต์": {
"start": "ng ให้บริการ --proxy-config proxy.conf.json",
-

3. ระบุไฟล์การกำหนดค่าพร็อกซี (วิธีที่ 2)

 "ให้บริการ": {
"ตัวเลือก": {
"proxyConfig": "proxy.conf.json"
- 

โมดูลนี้ใช้เพื่อส่งคำขอ Http และวิธีการที่ใช้ในการส่งคำขอส่งคืนวัตถุ Observable