Fermer

août 2, 2021

Comment utiliser HttpClient en angulaire


Regardons ce qu'est HttpClient et comment l'utiliser dans Angular, y compris un examen des requêtes HTTP GET, POST, PUT et DELETE et des observables RxJS.

Dans cet article, nous allons en apprendre davantage sur HttpClient et comment nous pouvons l'utiliser dans Angular. Voici les sujets que nous allons aborder :

  • Pourquoi avons-nous besoin de HttpClient ?
  • Caractéristiques de HttpClient
  • Qu'est-ce qu'un observable RxJS ?
  • Comment utiliser HttpClient dans Angular ?

Pourquoi devons-nous Besoin de HttpClient ?

Le front-end des applications communique avec les services principaux pour obtenir ou envoyer les données via le protocole HTTP à l'aide de l'interface XMLHttpRequest ou de fetch API. Cette communication se fait en Angular à l'aide de HttpClient.

Qu'est-ce que HttpClient ?

HttpClient est une classe de service intégrée disponible dans @angular/common/http paquet. Il a plusieurs types de signature et de retour pour chaque demande. Il utilise les API basées sur les observables RxJS, ce qui signifie qu'il renvoie l'observable et ce dont nous avons besoin pour y souscrire. Cette API a été développée sur la base de l'interface XMLHttpRequest exposée par les navigateurs.

Fonctionnalités de HttpClient

  • Fournit des objets de requête et de réponse typés
  • Contient des fonctionnalités de testabilité
  • Intercepte la demande et la réponse
  • Prise en charge API basées sur les observables RxJS
  • Prend en charge la gestion rationalisée des erreurs
  • Effectue les opérations GET, POST, PUT, DELETE

Qu'est-ce qu'un observable RxJS ?

Un observable est un objet unique similaire à Promise et cela aide à gérer le code asynchrone. Ce n'est pas du langage JavaScript, donc pour l'utiliser, nous avons besoin de la bibliothèque observable la plus populaire, appelée RxJS (Reactive Extension for JavaScript). RxJS est une bibliothèque de programmation réactive utilisant des observables qui facilite la composition de code asynchrone ou basé sur des rappels. Angular utilise des observables comme interface pour gérer les opérations asynchrones courantes.

Voici les points à considérer lorsque nous utilisons HttpClient et qu'il renvoie les observables :

  • Lorsque nous souscrivonsil initiera la demande, sinon rien ne se passe.
  • Lorsque le La requête get() est réussie, l'observable émet le résultat puis est terminée.
  • Lorsque la requête get() échoue, l'observable émet l'erreur.

Comment utiliser HttpClient dans Angular ?

Voyons comment utiliser ce module HttpClient dans une application Angular. Ce module est déjà inclus dans l'application lorsque nous créons l'application en Angular. Suivez les étapes ci-dessous pour l'utiliser :

Étape 1 : J'ai créé l'application à l'aide de la commande angular-cli ng new app-name. Si vous débutez avec Angular, consultez ici pour savoir comment configurer une application.

Étape 2 : Importez ou configurez le HttpClientModule dans l'application . module.ts comme indiqué ci-dessous :

import { NgModule } from  '@angular/core';
import[19659031]{ BrowserModule } from  '@angular/platform-browser';
import { AppRoutingModule } from[19659033]'./app-routing.module';
import { AppComponent } from  './app.component';[19659035]import { HttpClientModule } de  '@angular/common/http';

@NgModule({
déclarations : [AppComponent],
importations : [
NavigateurModule,
AppRoutingModule,
HttpClientModule
],
fournisseurs : [],
bootstrap : [AppComponent]
})
export  class  AppModule { }

Étape 3 : Vous pouvez directement utiliser le HttpClient dans votre composant, mais il est préférable d'y accéder via le service. Nous créons un nouveau service à l'aide de la commande angular-cli ng generate service service-name. Vous verrez le code dans ce service comme ci-dessous :

import { Injectable } from  '@angular/core' ;

@Injectable({
fourniDans :  'root'
})
export class HttpService {

constructeur()  { }

}

Étape 4 : Injectez le HttpClient dans le service créé à l'étape précédente. Ensuite, vous pouvez voir le code comme ci-dessous :

import { HttpClient } from  '@angular/common/http';
import  { Injectable } de  '@angular/core';

@Injectable({
fourniDans :  'root'
})
export class HttpService {

constructeur(privé http: HttpClient) { }

}

Étape 5: Dans cette étape, nous allons récupérer les données du serveur avec l'aide de la requête HTTP GET. Pour cela, nous ajoutons une méthode dans le nom du service en tant que getPosts—cette méthode que nous appelons dans le composant.

import { HttpClient } from   '@angular/common/http';
import { Injectable } from  '@angular/core';

@Injectable({
fourniDans:  'root'
})

export class HttpService {

private url =  'https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/posts';

constructeur(privé http : HttpClient) { }

getPosts() {
	return this.http.get(this.url);
}
}

Dans le code ci-dessus, nous avons ajouté le méthode getPosts et placé la requête HTTP GET, et passé le seul paramètre avec la requête qui n'est rien d'autre que End-point-url. Il est toujours préférable de conserver les constantes dans un fichier séparé et d'y accéder à partir de là. Il est facile de les partager et de les référencer pour modification lorsqu'il existe un seul endroit pour indiquer où elles sont utilisées.

Étape 6 : Comprenons la requête HTTP GET et ses objets de requête et de réponse. La requête HTTP GET a environ 15 types de méthodes différents à utiliser.

get<T>(url: string options?: { en-têtes?: [HttpHeaders];
contexte?: [HttpContext];
observer?: "corps";
params?:  [HttpParams];
rapportProgrès?: booléen;
type de réponse?:  "json";
withCredentials?: boolean; 
}): Observable<T>

Parameters

  • url – Il s'agit de l'URL du point de terminaison du service/API de type string.
  • options – Il est utilisé pour configurer la requête HTTP. Il est facultatif et de type objectet sa valeur par défaut est undefined.
options: 
{
en-têtes ? : [HttpHeaders],
observer?: 'corps' | 'événements' | 'réponse',
params?:  [HttpParams],
rapportProgrès?:  booléen,
responseType?: 'arraybuffer'|'blob'|'json'|'text',
withCredentials?:  boolean,  
}

En dessous de deux sont les propriétés importantes options :

  • observe : combien de la réponse à renvoyer.
  • responseType : Le format des données de retour.

Returns
HTTP GET renvoie un observable de la HttpResponse.

Étape 7 : Dans cette étape, nous allons utiliser la méthode getPosts dans le composant. Pour cela, nous devons d'abord injecter le service créé dans notre composant et accéder à la méthode comme indiqué ci-dessous :

import { Component } from '@angular/core ';
import { HttpService } de './http.service';

@Composant({
sélecteur: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export  class  AppComponent {
title = 'Article de Jeetendra';
postes : tout;
constructeur(privé httpService: HttpService) { }[19659147]ngOnInit() {
	this.httpService.getPosts(). abonnez-vous(
	(response) => { this.posts = réponse ;  },
	(erreur) => { console.log(erreur); });
}

}

Dans le code ci-dessus, nous avons d'abord injecté le service dans le constructeur, puis l'important est d'appeler le méthode getPosts et subscribe à celle-ci. Chaque fois que nous obtenons la réponse de cette méthode subscribece sera une liste d'objets contenant idtitlepathcomme indiqué ci-dessous :

Réponse

[
	{id :  1, titre :  "Localisation angulaire à l'aide de ngx-translate"[19659034], chemin :  "https://www.telerik.com/blogs/angular-localization-using-ngx-translate"},
	{id:  2, title:  "Comment utiliser la propriété Navigation ou Shadow dans Entity Framework Core", chemin :  "https://www.telerik.com/blogs/how-to-use-the-navigation-or-shadow-property-in-entity-framework-core"}
	{id:  3, title:  "Obtenir la valeur de appsettings.json dans .NET Core"[19659034], chemin :  "https://www.telerik.com/blogs/how-to-get-values-from-appsettings-json-in-net-core" },
	{id:  4, title:  "Intégrer de beaux rapports dans vos applications ASP.NET MVC"[19659034], chemin :  "https://www.telerik.com/blogs/embedding-beautiful-reporting-asp-net-mvc-applications"},[19659280]{id:  5, title:  "Select Tag Helper in ASP.NET Core MVC", path :  "https://www.telerik.com/blogs/select-tag-helper-asp-net-core-mvc"}
]

Nous avons déclaré la propriété comme posts et attribué la réponse que nous obtenons dans le subscribepuis itéré cela en HTML à l'aide de la directive *ngFor comme le montre le code ci-dessous :

 <div>
<li *ngFor="let post of posts">
	< a  href="{post.path}">  
		<span  style ="font-size: 20px;text-align: center;">{{post.title}}
</span>
	</a>
</li>
</div[19659034]>

Étape 8 : Enfin, nous avons implémenté notre première requête HTTP, celle GET. Exécutez l'application Angular à l'aide de la commande angular-cli ng serveet vous obtiendrez un message du type « Angular Live Development Server écoute sur localhost:4200. Ouvrez votre navigateur sur http://localhost:4200/. Une fois que vous avez ouvert l'URL dans votre navigateur, vous obtiendrez une sortie comme l'image ci-dessous. messages écrits par moi.

Exemple : requête HTTP GET avec le paramètre options.

HTTP Request

this.http .get(this.url, { observe: 'response' } );

Réponse HTTP

Réponse HTTP
corps:  (5) [{…},  {…}[19659034],  {…},  {…},  {…} ]
headers: HttpHeaders {normalizedNames:  Map(0), lazyUpdate: 19659068]null, lazyInit: ƒ}
ok:  vrai
état :  200
statusText:  "OK"
tapez:  4
URL :  "https://my-json-server.typicode.com/JSGund/XHR-Fetch-Request-JavaScript/posts"
__proto__: HttpResponseBase

HTTP POST Request

Cette requête permet d'envoyer des données de l'application vers le serveur, en utilisant la signature ci-dessous :

post(url: string[19659034], corps: toutes, options: { en-têtes?: [ En-têtes HTTP] ;
contexte?: [HttpContext];
observer?: "corps";
params?: [HttpParams];
rapportProgrès?: booléen;
type de réponse: "texte";
withCredentials?: boolean;  }): Observable<string>

Parameters

  • url : URL du service principal de type string.
  • body : contenu à envoyer ou à remplacer, de type any.
  • options : les options HTTP de type object.

Returns
HTTP POST renvoie la réponse observable de type string.

Example

const configUrl= 'http://localhost:3000/users';
const params = new HttpParams ({
fromObject: { Nom : 'nom',
E-mail  : 'e-mail',
Rôle  : 'rôle',
Statut  : 'Inactif',
Numéro de mobile : 1234567890
}
});

var en-têtes = nouveau HttpHeaders([19659034]{'Content-Type': 'application/x-www-form-urlencoded'});


return  this[19659034].http.post(configUrl, params, { en-têtes } );

HTTP PUT Request

Cette requête est utilisée pour envoyer des données de l'application au serveur pour mise à jour, en utilisant la signature ci-dessous :

put(url :  string, body: any, options: { headers?:[19659031][HttpHeaders];
contexte?: [HttpContext];
observer?: "corps";
params?: [HttpParams];
rapportProgrès?: booléen;
type de réponse: "texte";
withCredentials?: boolean;  }): Observable<string>

Parameters

  • url : URL du service principal de type string.
  • body : contenu à ajouter ou à mettre à jour, de type any .
  • options : les options HTTP de type object.

Returns
HTTP PUT renvoie la réponse observable de type string.

Example[19659459]const configUrl= 'http://localhost:3000/users';
const params = new HttpParams[19659034]({
fromObject: { Nom : 'nom',
E-mail  : 'e-mail',
Rôle  : 'rôle',
Statut  : 'Inactif',
Numéro de portable  : 1234567890
_id : 1
}
});

var headers = new HttpHeaders([19659034]{'Content-Type': 'application/x-www-form-urlencoded'});

return this[19659034].http.put(configUrl, params, { en-têtes } );

HTTP DELETE Request

Cette requête est utilisée pour supprimer les données en fonction du paramètre, en utilisant la signature ci-dessous :

delete(url:[19659032]chaîne, options: { en-têtes?: [HttpHeaders];
contexte?: [HttpContext];
observer?: "corps";
params?: [HttpParams];
rapportProgrès?: booléen;
type de réponse: "texte";
withCredentials?: boolean;  }): Observable<string>

Paramètres

  • url : URL du service principal de type string.
  • options : options HTTP de type object.

Renvois
HTTP DELETE renvoie la réponse observable de type string.

Example

const configUrl= 'http://localhost:3000 /user';


return  this.http.delete(configUrl + '/'[19659204]+ id);

Vous pouvez télécharger l'exemple à partir de ici.

Conclusion

Dans cet article, nous avons discuté de ce qu'est HttpClient, des fonctionnalités , et comment utiliser et placer la demande au serveur dans Angular. Si vous avez des suggestions ou des questions concernant cet article, veuillez laisser un commentaire ou contactez-moi en utilisant les liens de mon profil.

« Apprenez-le. Partagez-le. »

Le meilleur outil 2023 pour ta croissance Instagram !



Source link