Eine kurze Analyse des HttpClientModule-Moduls beim Angular Learning

In diesem Artikel lernen Sie das HttpClientModule-Modul in Angular kennen und stellen die Anforderungsmethode, Anforderungsparameter, Antwortinhalte, Interceptoren, Angular Proxy und andere verwandte Kenntnisse vor.

Dieses Modul wird zum Senden von Http -Anfragen verwendet, und die zum Senden von Anfragen verwendeten Methoden geben Observable Objekte zurück. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]

1. Schnellstart

1), stellen Sie das HttpClientModule-Modul vor

 // app.module.ts
import { httpClientModule } from '@angular/common/http';
Importe: [
httpClientModule
]

2) Fügen Sie das HttpClient-Dienstinstanzobjekt zum Senden von Anforderungen ein

 // app.component.ts
import { HttpClient } from '@angular/common/http';

Exportklasse AppComponent {
	Konstruktor (privater http: HttpClient) {}
}

3), Anfrage senden

 importiere { HttpClient } aus „@angular/common/http“

Die Exportklasse AppComponent implementiert OnInit {
Konstruktor (privater http: HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsers() {
return this.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Anforderungsmethode

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

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

3. Parameter anfordern

1. HttpParams-Klasse

 Export-Deklarationsklasse HttpParams {
Konstruktor(optionen?: HttpParamsOptions);
has(param: string): boolean;
get(param: string): string |.
getAll(param: string): string[] |.
Schlüssel(): string[];
append(param: string, value: string): HttpParams;
set(param: string, value: string): HttpParams;
delete(param: string, value?: string): HttpParams;
toString(): string;
}

2. HttpParamsOptions-Schnittstelle

 Deklarieren Sie die Schnittstelle HttpParamsOptions {
fromString?: string;
fromObject?: {
[param: string]: string |. ReadonlyArray<string>;
};
Encoder?: HttpParameterCodec;
}

3. Anwendungsbeispiele

 import { HttpParams } from '@angular/common/http';

let params = new HttpParams({ fromObject: {name: "zhangsan", age: "20"}})
params = params.append("sex", "male")
let params = new HttpParams({ fromString: "name=zhangsan&age=20"})

4. Header anfordern

Die Erstellung von Anforderungsheaderfeldern erfordert die Verwendung der Klasse HttpHeaders. Es gibt verschiedene Methoden zum Bearbeiten von Anforderungsheadern unter dem Klasseninstanzobjekt.

 Export-Deklarationsklasse HttpHeaders {
Konstruktor(Header?: string | {
[Name: Zeichenfolge]: Zeichenfolge |. Zeichenfolge[];
});
has(name: string): boolean;
get(name: string): string |. null;
Schlüssel(): string[];
getAll(name: string): string[] |.
append(name: string, value: string | string[]): HttpHeaders;
set(name: string, value: string | string[]): HttpHeaders;
delete(name: string, value?: string | string[]): HttpHeaders;
}

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

5. Inhalt der Antwort

 deklarieren Sie den Typ HttpObserve = 'body' |.
// Antwort liest den vollständigen Antworttext. // Text liest die vom Server zurückgegebenen Daten

 this.http.get(
„https://jsonplaceholder.typicode.com/users“,
{ beobachten: „Körper“ }
).subscribe(console.log)

6. Abfangjäger

Interceptoren sind eine Möglichkeit, HTTP-Anfragen und -Antworten in Angular-Anwendungen global zu erfassen und zu ändern. (Token, Fehler)

Der Interceptor fängt nur Anfragen ab, die mit dem HttpClientModule-Modul gestellt werden.

ng g interceptor <name>

6.1 Abfangen anfordern

 @Injectable()
Die Exportklasse AuthInterceptor implementiert HttpInterceptor {
Konstruktor() {}
	//Abfangmethode abfangen(
// unbekannt gibt den Typ des Anforderungskörpers (body) an: HttpRequest<unknown>,
Weiter: HttpHandler
// unbekannt gibt den Typ des Antwortinhalts (Körper) an): Observable<HttpEvent<unknown>> {
// Klonen und ändern Sie den Anforderungsheader const req = request.clone({
setHeaders: {
Autorisierung: „Bearer xxxxxxx“
}
})
// Den geänderten Anforderungsheader über die Rückruffunktion an die Anwendung zurückgeben return next.handle(req)
}
}

6.2 Abfangen von Antworten

 @Injectable()
Die Exportklasse AuthInterceptor implementiert HttpInterceptor {
Konstruktor() {}
	//Abfangmethode abfangen(
Anfrage: HttpRequest<unbekannt>,
Weiter: HttpHandler
): Observable<any> {
return next.handle(request).pipe(
erneut versuchen(2),
CatchError((error: HttpErrorResponse) => throwError(error))
)
}
}

6.3 Interceptor-Injektion

 importiere { AuthInterceptor } aus „./auth.interceptor“
{ HTTP_INTERCEPTORS } aus „@angular/common/http“ importieren

@NgModule({
Anbieter: [
{
bereitstellen: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: wahr
}
]
})

7. Angular-Proxy

1. Erstellen Sie die Datei „proxy.conf.json“ im Stammverzeichnis des Projekts und fügen Sie den folgenden Code hinzu

 {
"/api/*": {
„target“: „http://localhost:3070“,
„sicher“: falsch,
„changeOrigin“: wahr
}
}

• /api/*: Anfragen, die in der Anwendung mit /api beginnen, werden über diesen Proxy geleitet

• Ziel: serverseitige URL

• sicher: Wenn das Protokoll der serverseitigen URL https ist, muss dieses Element wahr sein

• changeOrigin: Wenn der Server nicht localhost ist, muss dieses Element wahr sein

2. Proxy-Konfigurationsdatei angeben (Methode 1)

 "Skripte": {
„start“: „ng Serve --proxy-config Proxy.conf.json“,
}

3. Proxy-Konfigurationsdatei angeben (Methode 2)

 "Aufschlag": {
"Optionen": {
„proxyConfig“: „proxy.conf.json“
}, 

Dieses Modul wird zum Senden von Http -Anfragen verwendet, und die zum Senden von Anfragen verwendeten Methoden geben Observable Objekte zurück.