Visionner la vidéo

Angular 19: Simplifiez vos requêtes asynchrones avec resource et rxResource

  Angular

La version 19 d’Angular introduit deux nouvelles fonctions : resource et rxResource. Ces fonctionnalités visent à simplifier la gestion des requêtes asynchrones dans vos applications Angular, en offrant une alternative au controversé effect.

Introduction

Bien qu’Angular 19 ne soit pas encore officiellement lancé, vous pouvez déjà tester ces nouvelles fonctionnalités en installant la version @next d’Angular.

Grâce à resource et rxResource, gérer les appels API devient plus intuitif et ergonomique.

Utilisation de resource

La fonction resource permet de déclencher des appels asynchrones tout en simplifiant le code et la gestion des états de chargement.

import { Component, resource, signal } from "@angular/core";

const PAGE_SIZE = 10;

@Component({
  selector: "app-pokemon-list",
  standalone: true,
  templateUrl: "./pokemon-list.component.html",
})
export class PokemonListComponent {
  pageSize = signal(PAGE_SIZE);

  pokemonResource = resource({
    request: this.pageSize,
    loader: ({ request: pageSize }) => {
      return fetch(
        `https://pokebuildapi.fr/api/v1/pokemon/limit/${pageSize}`
      ).then((res) => res.json());
    },
  });
}

Avec resource, vous pouvez passer un champ request qui écoute les changements d’un signal, ici pageSize.

Dès que la valeur change, l’appel à l’API est relancé.

Utilisation dans le template

Vous pouvez facilement afficher un indicateur de chargement ou des données à partir du signal retourné par resource.

Le signal retourné contient une fonction value() qui renvoie les données.

Il contient également une fonction isLoading() qui indique si la requête asynchrone est en cours.

<section>
  <h1>Pokemon List</h1>

  <mat-form-field>
    <mat-label>Number of pokemons</mat-label>
    <select matNativeControl required [(ngModel)]="pageSize">
      @for (pageRange of pageRanges; track pageRange) {
      <option [value]="pageRange">{{ pageRange }}</option>
      }
    </select>
  </mat-form-field>

  @if (pokemonResource.isLoading()) {
  <mat-spinner diameter="60" />
  } @else {
  <ul>
    @for (pokemon of pokemonResource.value(); track pokemon.id) {
    <li>
      <mat-card class="example-card" appearance="outlined">
        <mat-card-header>
          <mat-card-title>{{ pokemon.name }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image [src]="pokemon.image" [alt]="pokemon.name" />
        <mat-card-content>
          <p>
            @for (type of pokemon.apiTypes; track type.name) {
            <img
              mat-card-image
              [src]="type.image"
              [alt]="type.name"
              width="40"
              height="40"
            />
            }
          </p>
        </mat-card-content>
      </mat-card>
    </li>
    }
  </ul>
  }
</section>

Utilisation de rxResource

Là où resource fonctionne avec des Promises, rxResource est conçu pour les Observables, idéal si vous utilisez le HttpClient d’Angular.

import { Component, inject, signal } from "@angular/core";
import { rxResource } from "@angular/core/rxjs-interop";
import { PokemonService } from "../services/pokemon.service";

const PAGE_SIZE = 10;

@Component({
  selector: "app-pokemon-list",
  standalone: true,
  templateUrl: "./pokemon-list.component.html",
})
export class PokemonListComponent {
  pageSize = signal(PAGE_SIZE);
  pokemonService = inject(PokemonService);

  pokemonResource = rxResource({
    request: this.pageSize,
    loader: ({ request: pageSize }) =>
      this.pokemonService.getPokemons(pageSize),
  });
}

Ici, nous utilisons un service PokemonService qui renvoie un Observable avec le HttpClient :

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

@Injectable({
  providedIn: "root",
})
export class PokemonService {
  constructor(private http: HttpClient) {}

  getPokemons(pageSize: number) {
    return this.http.get<Pokemon[]>(
      `https://pokebuildapi.fr/api/v1/pokemon/limit/${pageSize}`
    );
  }
}

rxResource s’occupe de souscrire à l’Observable et de gérer la libération du flux, vous permettant ainsi de gérer vos requêtes asynchrones sans vous soucier des abonnements manuels.

Conclusion

resource et rxResource apportent une approche plus naturelle et plus propre pour gérer les appels asynchrones dans Angular.

Ces fonctions remplacent efficacement effect dans les scénarios de récupération de données, répondant ainsi à la controverse autour de son usage pour les données asynchrones.

Ressources Supplémentaires

Commentaires