Angular Basics : Introduction aux intercepteurs angulaires

Les intercepteurs peuvent aider à fournir une excellente expérience utilisateur dans votre application Angular pour les requêtes HTTP. Commençons!

Nous jouerons avec l’un des puissants Angulaire des fonctionnalités (intercepteurs) qui nous aident à simplifier notre façon de travailler avec les requêtes et les réponses HTTP.

Cela aide à mettre en un seul endroit le contrôle de tous les appels d’API ; aujourd’hui, nous allons voir quand ils sont utiles et comment les créer et maximiser leur pouvoir.

Que sont les intercepteurs ?

Si vous avez déjà travaillé avec un service en angulaireles intercepteurs vous sembleront familiers car il s’agit d’un service angulaire avec implémentation d’interface HttpInterceptor.

Les intercepteurs fonctionnent entre notre application et le serveur et interagissent avec la requête et la réponse.

La puissance des intercepteurs vient de la façon dont ils simplifient toutes les requêtes dans notre application au lieu d’apporter des modifications à chaque endroit où nous effectuons des appels HTTP.

Pourquoi utiliser des intercepteurs ?

Les intercepteurs nous aident à nous assurer de traiter toutes les requêtes et réponses HTTP avant d’envoyer ou de recevoir la requête, nous donnant le pouvoir de gérer la communication.

Nous avons plusieurs endroits ou scénarios pour les utiliser :

• Journalisation et rapport d’avancement
• Ajouter des en-têtes à la requête
• Mise en cache côté client

Ensuite, nous commençons à utiliser les intercepteurs – allons-y !

Ce que nous construisons

Nous afficherons une liste de joueurs et d’équipes de la NBA effectuant deux requêtes HTTP, afficherons le chargement et le masquerons lorsque le serveur répondra.

Une solution affiche l’écran de chargement dans chaque méthode pour les appels HTTP. Que se passe-t-il si nous devons ajouter plus de requêtes à l’avenir avec le même comportement ? Pour cette raison, l’utilisation d’un intercepteur est la meilleure approche.

Les services

Nous allons créer deux services dans l’application, le nba.service.ts et loader.service.ts.

Le NbaService a getPlayers et getTeams méthodes pour communiquer avec l’API et renvoyer des données.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map, Observable } from 'rxjs';

@Injectable({ provided: 'root' })
export class NbAService {

  constructor(private httpClient: HttpClient) {

  }

  getPlayers(): Observable<any> {
    return this.httpClient.get('https://www.balldontlie.io/api/v1/players').pipe(
      map((response: any) => {
        return response.data;
      })
    );
  }

  getTeams(): Observable<any> {
    return this.httpClient.get('https://www.balldontlie.io/api/v1/teams').pipe(
      map((response: any) => {
        return response.data;
      })
    );
  }

}

Le service de chargement fournit la propriété isLoading$ observable pour obtenir l’état du chargeur, et les méthodes show et hide changer son état.

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

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  isLoading$ = new Subject<boolean>();

  show(): void {
    this.isLoading$.next(true);
  }
  hide(): void {
    this.isLoading$.next(false);
  }
}

Parfait, nous avons les services pour l’application. L’étape suivante consiste à créer l’intercepteur.

N’hésitez pas à en savoir plus sur :

Créer des intercepteurs

Les intercepteurs sont très similaires aux services utilisant le @Injectable() décorateur, mais implémentez plutôt l’interface HttpInterceptor. Nous devons implémenter la méthode d’interception avec deux paramètres : req prendre la demande et next pour passer au gestionnaire suivant.

Créer une nouvelle classe avec le @Injectable décorateur, mettre en œuvre le HttpInterceptor interface et injectez le service de chargement dans le constructeur.

Dans la méthode d’interception, nous appelons loader.show pour régler le isLoading propriété à true. Le paramètre next est un httpRequest observable, donc en utilisant l’opérateur finalize de rxjs lorsqu’il se termine, appelez la méthode hide.

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
import { finalize, Observable } from 'rxjs';
import { LoaderService } from '../services/loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  constructor(private loader: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loader.show();
    return next.handle(req).pipe(
      finalize(() => {
        this.loader.hide();
      }));
  }
}

Que fait le code ?

La requête HTTP remonte du serveur au client, l’intercepteur définit la propriété de chargement sur true et, une fois terminée, elle est définie sur false. Plus tard, nous utilisons le isLoading propriété dans le composant pour masquer ou afficher l’écran de chargement.

Enregistrez l’intercepteur

Accédez à votre app.module.ts et importez le module HttpClient pour la requête HTTP dans la zone d’importation.

Ajoutez l’intercepteur dans la section du fournisseur et importez le HTTP_INTERCEPTORS avec l’option useClass pour assigner le LoaderInterceptor.

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { LoaderInterceptor } from './interceptors/loader.interceptor';

@NgModule({
  declarations: [
    AppComponent

  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: LoaderInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Afficher l’écran de chargement

Pour utiliser la puissance d’Interceptor et des services, nous devons l’importer là où c’est nécessaire et en apporter les services via le constructeur du composant.

Nous ajoutons trois propriétés—players et team pour stocker les données de la réponse de l’API, et le loading$ propriété pour obtenir la valeur de loaderService.

Ensuite, nous devons appeler les méthodes des services à l’aide de deux boutons dans l’interface utilisateur pour appeler les méthodes loadPlayers et LoadTeams.

Dans le fichier TypeScript, le code ressemble à ceci :

import { Component } from '@angular/core';
import { LoaderService } from './services/loader.service';
import { NbAService } from './services/NBA.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  players: any[] = [];
  teams: any[] = [];

  loading$ = this.loader.isLoading$;

  constructor(private nbaApi: NbAService, private loader: LoaderService) { }

  loadPLayers() {
    this.players = [];
    this.nbaApi.getPlayers().subscribe((data) => {
      this.players = data;
    });
  }

  loadTeams() {
    this.nbaApi.getTeams().subscribe((data) => {
      this.teams = data;
    });
  }
}

Ajoutez le style CSS pour l’écran de chargement est une div avec des styles CSS pour prendre les couleurs pleine largeur pour ressembler au chargement.

.loading {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  font-weight: bold;
  color: yellow;
  text-align: center;
  z-index: 1;
  background-color: rgba(43, 39, 39, 0.616);
}

Dans le modèle app.component.html, itérez l’objet joueur et équipes à l’aide de la directive ngFor. Lorsque l’utilisateur clique sur Load Player ou Load Teams, le message de chargement apparaît en haut de l’écran.

<div class="items">
  <ul>
    <li *ngFor="let p of players">{{ p.first_name }} {{ p.last_name }}</li>
  </ul>
    <ul>
      <li *ngFor="let t of teams">{{ t.city }} {{ t.conference }}</li>
    </ul>
</div>
<div>
  <button (click)="loadPLayers()" >Load Players</button>
  <button (click)="loadTeams()">Load Teams</button>
</div>
<!-- subscription to loading observable >
  <div class="loading" *ngIf="loading$ | async">
    <h1>Please wait...</h1>
  </div>

En savoir plus sur ngPour et tuyau asynchrone.

Que fait le code ?

Lorsque l’utilisateur clique sur les boutons Get Players ou alors Get Teamsl’intercepteur détecte la requête HTTP et définit visible sur true, et lorsque le serveur revient, les données repassent sur false.

Parce que l’observable loading$ souscrit à la loadingServiceil change chaque fois que le sujet émet une nouvelle valeur.

Le résultat final ressemble à l’image :

Conclusion

Nous avons appris à créer un intercepteur et à l’utiliser pour contrôler toutes les requêtes HTTP en un seul endroit. L’endroit idéal pour gérer votre requête HTTP, l’Interceptor est disponible dans de nombreux scénarios pour offrir une excellente expérience aux utilisateurs.

Vous pouvez trouver un exemple de code complet pour cet article et jouer avec l’exemple d’application sur les liens suivants :

Merci pour votre temps, et j’espère que vous utiliserez Interceptor à l’avenir.