Analisis singkat modul HttpClientModule dalam pembelajaran sudut

Artikel ini akan membawa Anda memahami modul HttpClientModule dalam sudut, dan memperkenalkan metode permintaan, parameter permintaan, konten respons, interseptor, Proxy Sudut, dan pengetahuan terkait lainnya.

Modul ini digunakan untuk mengirim permintaan Http , dan metode yang digunakan untuk mengirim permintaan mengembalikan objek Observable . [Tutorial terkait yang direkomendasikan: "tutorial sudut"]

1. Mulai cepat

1), perkenalkan modul HttpClientModule

 // aplikasi.modul.ts
impor { httpClientModule } dari '@angular/common/http';
impor: [
httpClientModule
]

2) Menyuntikkan objek instance layanan HttpClient untuk mengirim permintaan

 // aplikasi.component.ts
impor { HttpClient } dari '@angular/common/http';

kelas ekspor Komponen Aplikasi {
	konstruktor(http pribadi: HttpClient) {}
}

3), kirim permintaan

 impor { HttpClient } dari "@angular/common/http"

kelas ekspor AppComponent mengimplementasikan OnInit {
konstruktor(http pribadi: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
dapatkanPengguna() {
kembalikan ini.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Metode permintaan

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

 ini.http.dapatkan<Post[]>('/getAllPosts')
.berlangganan(respons => console.log(respons))

3. Parameter permintaan

1. Kelas HttpParams

 ekspor mendeklarasikan kelas HttpParams {
konstruktor(pilihan?: HttpParamsOptions);
memiliki(param: string): boolean;
dapatkan(param: string): string |.
getAll(param: string): string[] |.
kunci(): string[];
tambahkan(param: string, nilai: string): HttpParams;
set(param: string, nilai: string): HttpParams;
hapus(param: string, nilai?: string): HttpParams;
toString(): rangkaian;
}

2. Antarmuka HttpParamsOptions

 mendeklarasikan antarmuka HttpParamsOptions {
dariString?: string;
dari Objek?: {
[param: string]: string |.ReadonlyArray<string>;
};
pembuat enkode?: HttpParameterCodec;
}

3. Contoh penggunaan

 impor { HttpParams } dari '@angular/common/http';

biarkan params = new HttpParams({ fromObject: {nama: "zhangsan", usia: "20"}})
params = params.append("jenis kelamin", "pria")
biarkan params = new HttpParams({ fromString: "name=zhangsan&age=20"})

4. Judul permintaan

Pembuatan kolom header permintaan memerlukan penggunaan kelas HttpHeaders. Ada berbagai metode untuk mengoperasikan header permintaan di bawah objek instance kelas.

 ekspor mendeklarasikan kelas HttpHeaders {
konstruktor(header?: string | {
[nama: tali]: tali |. tali[];
});
memiliki(nama: string): boolean;
dapatkan(nama: string): string |.
kunci(): string[];
getAll(nama: string): string[] |.
tambahkan(nama: string, nilai: string | string[]): HttpHeaders;
set(nama: string, nilai: string | string[]): HttpHeaders;
hapus(nama: string, nilai?: string | string[]): HttpHeaders;
}

 biarkan headers = new HttpHeaders({ test: "Halo" })

5. Konten tanggapan

 mendeklarasikan tipe HttpObserve = 'body' |.
// respon membaca isi respon secara lengkap // isi membaca data yang dikembalikan oleh server

 ini.http.dapatkan(
"https://jsonplaceholder.typicode.com/users",
{ amati: "tubuh" }
).berlangganan(konsol.log)

6. Pencegat

Pencegat adalah cara menangkap dan memodifikasi permintaan dan respons HTTP secara global dalam aplikasi Angular. (Token, Kesalahan)

Pencegat hanya akan mencegat permintaan yang dibuat menggunakan modul HttpClientModule.

ng g interceptor <name>

6.1 Meminta intersepsi

 @Dapat Disuntik()
kelas ekspor AuthInterceptor mengimplementasikan HttpInterceptor {
konstruktor() {}
	//Metode intersepsi mencegat(
// unknown menentukan jenis badan permintaan (body) permintaan: HttpRequest<unknown>,
berikutnya: HttpHandler
// unknown menentukan jenis konten respons (isi)): Observable<HttpEvent<unknown>> {
// Kloning dan ubah header permintaan const req = request.clone({
setHeader: {
Otorisasi: "Pembawa xxxxxxx"
}
})
// Teruskan header permintaan yang telah diubah kembali ke aplikasi melalui fungsi callback return next.handle(req)
}
}

6.2 Intersepsi respons

 @Dapat Disuntik()
kelas ekspor AuthInterceptor mengimplementasikan HttpInterceptor {
konstruktor() {}
	//Metode intersepsi mencegat(
permintaan: HttpRequest<tidak diketahui>,
berikutnya: HttpHandler
): Dapat diamati<any> {
kembali berikutnya.pegangan(permintaan).pipa(
coba lagi(2),
catchError((kesalahan: HttpErrorResponse) => throwError(kesalahan))
)
}
}

6.3 Injeksi pencegat

 impor { AuthInterceptor } dari "./auth.interceptor"
impor { HTTP_INTERCEPTORS } dari "@angular/common/http"

@NgModule({
penyedia: [
{
berikan: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: benar
}
]
})

7. Proksi Sudut

1. Buat file proxy.conf.json di direktori root proyek dan tambahkan kode berikut

 {
"/api/*": {
"target": "http://localhost:3070",
"aman": salah,
"changeOrigin": benar
}
}

• /api/*: Permintaan yang dimulai dengan /api yang dibuat di aplikasi melewati proxy ini

• target: URL sisi server

• aman: Jika protokol URL sisi server adalah https, item ini harus benar

• changeOrigin: Jika server bukan localhost, item ini harus benar

2. Tentukan file konfigurasi proxy (metode 1)

 "skrip": {
"mulai": "ng serve --proxy-config proxy.conf.json",
}

3. Tentukan file konfigurasi proxy (metode 2)

 "melayani": {
"pilihan": {
"proxyConfig": "proxy.conf.json"
}, 

Modul ini digunakan untuk mengirim permintaan Http , dan metode yang digunakan untuk mengirim permintaan mengembalikan objek Observable .