Une brève analyse du module HttpClientModule dans l'apprentissage angulaire

Cet article vous amènera à comprendre le module HttpClientModule en angulaire et à présenter la méthode de requête, les paramètres de requête, le contenu de la réponse, les intercepteurs, Angular Proxy et d'autres connaissances connexes. J'espère que cela vous sera utile !

Ce module est utilisé pour envoyer des requêtes Http , et les méthodes utilisées pour envoyer des requêtes renvoient des objets Observable . [Tutoriels associés recommandés : "tutoriel angulaire"]

1. Démarrage rapide

1), présentez le module HttpClientModule

 // app.module.ts
importer { httpClientModule } depuis '@angular/common/http' ;
importations : [
httpClientModule
]

2) Injecter l'objet d'instance de service HttpClient pour l'envoi de requêtes

 // app.component.ts
importer { HttpClient } depuis '@angular/common/http' ;

classe d'exportation AppComponent {
	constructeur (http privé : HttpClient) {}
}

3), envoyer la demande

 importer { HttpClient } depuis "@angular/common/http"

classe d'exportation AppComponent implémente OnInit {
constructeur (http privé : HttpClient) {}
ngOnInit() {
this.getUsers().subscribe(console.log)
}
getUsers() {
renvoyer this.http.get("https://jsonplaceholder.typicode.com/users")
}
}

2. Méthode de demande

 this.http.get(url [, options]);
this.http.post(url, données [, options]);
this.http.delete(url [, options]);
this.http.put(url, données [, options]);

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

3. Paramètres de la demande

1. Classe HttpParams

 export déclare la classe HttpParams {
constructeur (options ? : HttpParamsOptions);
has(param: string): booléen;
get(param: chaîne): chaîne null;
getAll(param: chaîne): chaîne[] null;
clés() : chaîne[];
append(param : chaîne, valeur : chaîne) : HttpParams ;
set(param : chaîne, valeur : chaîne) : HttpParams ;
delete(param : chaîne, valeur ? : chaîne) : HttpParams ;
toString() : chaîne ;
}

2. Interface HttpParamsOptions

 déclarer l'interface HttpParamsOptions {
fromString? : chaîne ;
depuisObjet ? : {
[param : chaîne] : chaîne | ReadonlyArray<string> ;
} ;
encodeur ? : HttpParameterCodec ;
}

3. Exemples d'utilisation

 importer { HttpParams } depuis '@angular/common/http' ;

let params = new HttpParams({ fromObject : {name : "zhangsan", age : "20"}})
params = params.append("sexe", "mâle")
let params = new HttpParams({ fromString : "name=zhangsan&age=20"})

4. En-tête de demande

La création de champs d'en-tête de requête nécessite l'utilisation de la classe HttpHeaders. Il existe différentes méthodes pour exploiter les en-têtes de requête sous l'objet d'instance de classe.

 export déclare la classe HttpHeaders {
constructeur (en-têtes ? : chaîne | {
[nom : chaîne] : chaîne | chaîne[];
});
has(nom : chaîne) : booléen ;
get(nom : chaîne) : chaîne null ;
clés() : chaîne[];
getAll(nom : chaîne) : chaîne[] | null ;
append(nom : chaîne, valeur : chaîne | chaîne[]) : HttpHeaders ;
set(nom : chaîne, valeur : chaîne | chaîne[]) : HttpHeaders ;
delete(nom : chaîne, valeur ? : chaîne | chaîne[]) : HttpHeaders ;
}

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

5. Contenu de la réponse

 déclarer le type HttpObserve = 'body' | 'response';
// la réponse lit le corps complet de la réponse // le corps lit les données renvoyées par le serveur

 ceci.http.get(
"https://jsonplaceholder.typicode.com/users",
{ observer : "corps" }
).subscribe(console.log)

6. Intercepteur

Les intercepteurs sont un moyen de capturer et de modifier globalement les requêtes et réponses HTTP dans les applications angulaires. (Jeton, erreur)

L'intercepteur n'interceptera que les requêtes effectuées à l'aide du module HttpClientModule.

ng g interceptor <name>

6.1 Interception des demandes

 @Injectable()
classe d'exportation AuthInterceptor implémente HttpInterceptor {
constructeur() {}
	//Interception de la méthode d'interception(
// inconnu spécifie le type de corps de la requête (body) : HttpRequest<unknown>,
suivant : HttpHandler
// inconnu spécifie le type de contenu de la réponse (corps)) : Observable<HttpEvent<unknown>> {
// Cloner et modifier l'en-tête de la requête const req = request.clone({
setHeaders : {
Autorisation : « Porteur xxxxxxx »
}
})
// Renvoie l'en-tête de requête modifié à l'application via la fonction de rappel return next.handle(req)
}
}

6.2 Interception de réponse

 @Injectable()
classe d'exportation AuthInterceptor implémente HttpInterceptor {
constructeur() {}
	//Interception de la méthode d'interception(
requête : HttpRequest<inconnu>,
suivant : HttpHandler
): Observable<any> {
retourner next.handle(request).pipe(
réessayez (2),
catchError((erreur : HttpErrorResponse) => throwError(erreur))
)
}
}

6.3 Injection d'intercepteur

 importer { AuthInterceptor } depuis "./auth.interceptor"
importer { HTTP_INTERCEPTORS } depuis "@angular/common/http"

@NgModule({
fournisseurs : [
{
fournir : HTTP_INTERCEPTORS,
useClass : AuthInterceptor,
multi : vrai
}
]
})

7. Proxy angulaire

1. Créez le fichier proxy.conf.json dans le répertoire racine du projet et ajoutez le code suivant

 {
"/api/*": {
"cible": "http://localhost:3070",
"sécurisé" : faux,
"changeOrigin": vrai
}
}

• /api/* : Les requêtes commençant par /api effectuées dans l'application passent par ce proxy

• cible : URL côté serveur

• sécurisé : si le protocole de l'URL côté serveur est https, cet élément doit être vrai

• changeOrigin : si le serveur n'est pas localhost, cet élément doit être vrai

2. Spécifiez le fichier de configuration du proxy (méthode 1)

 "scripts": {
"start": "ng serve --proxy-config proxy.conf.json",
}

3. Spécifiez le fichier de configuration du proxy (méthode 2)

 "servir": {
"options": {
"proxyConfig": "proxy.conf.json"
}, 

Ce module est utilisé pour envoyer des requêtes Http , et les méthodes utilisées pour envoyer des requêtes renvoient des objets Observable .