Ressource angulaire et rxresource

Voyez comment gérer le comportement asynchrone avec les ressources angulaires et les API RxResource.

Angular 19 introduit deux API expérimentales –resource et rxResource—E conçu pour simplifier la gestion des dépendances asynchrones dans le cadre réactif d’Angular. Ces API gèrent élégamment l’évolution des données, telles que les réponses API ou d’autres opérations asynchrones, en intégrant étroitement aux signaux angulaires.

Dans cet article, nous explorerons ces nouvelles API, présenterons leurs cas d’utilisation à travers quelques exemples et fournir des informations sur la façon dont ils améliorent les flux de travail asynchrones.

API de ressources

Le ressource API Bridges Gestion d’état basée sur le signal d’Angular avec des opérations asynchrones. La combinaison des signaux de demande, des fonctions de chargeur et des instances de ressources fournit un moyen déclaratif de gérer les données asynchrones.

Pour une introduction aux signaux angulaires, assurez-vous de consulter les articles que nous avons récemment publiés –Bases angulaires: signaux et Bases angulaires: entrée, sortie et affiche des requêtes.

Imaginez un scénario où nous voulons aller chercher les détails météorologiques en fonction d’un nom de la ville.

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

@Component({
  selector: 'app-weather-info',
  templateUrl: './weather-info.component.html',
  styleUrls: ['./weather-info.component.css']
})
export class WeatherInfoComponent {
  city = signal<string>('New York');

  weatherData = 
}

En utilisant resourcela configuration devient réactive et rationalisée:

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

@Component({
  selector: "app-weather-info",
  templateUrl: "./weather-info.component.html",
  styleUrls: ["./weather-info.component.css"],
})
export class WeatherInfoComponent {
  city = signal<string>("New York");

  weatherData = resource({
    request: this.city,
    loader: async ({ request: cityName }) => {
      const response = await fetch(
        `https://api.weatherapi.com/v1/current.json?q=${cityName}`
      );
      if (!response.ok) {
        throw new Error("Failed to fetch weather details");
      }
      return await response.json();
    },
  });

  updateCity(newCity: string): void {
    this.city.set(newCity);
  }
}

Dans l’exemple ci-dessus, le city Le signal agit comme l’entrée, déterminant les détails météorologiques à récupérer. Toute mise à jour de city Récupérer automatiquement la fonction de chargeur, récupérant de nouvelles données en fonction du nom de la ville mis à jour. Le weatherData L’instance de ressource suit les données actuelles (value), Statut de chargement (isLoading) et toutes les erreurs (error).

Mises à jour dynamiques sans récupérer

Le update La méthode permet de modifier les données de ressources locales sans déclencher une demande de serveur. Par exemple, nous pouvons ajouter un horodatage local aux données météorologiques:

this.weatherData.update((data) => {
  if (!data) return undefined;
  return { ...data, timestamp: new Date().toISOString() };
});

Cette capacité assure des mises à jour immédiates de l’interface utilisateur tout en préservant la réactivité.

rxresource

Pour les applications profondément intégrées à RXJS, rxResource fournit un homologue observable à resource. Il connecte de manière transparente les signaux aux observables, permettant une approche plus réactive de la récupération des données.

Supposons que nous voulons afficher une liste paginée de livres dans un système de bibliothèque.

import { Component, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-library',
  templateUrl: './library.component.html',
  styleUrls: ['./library.component.css']
})
export class LibraryComponent {
  page = signal<number>(1);

  books = 
}

Le rxResource La fonction rend cela simple:

import { Component, signal } from "@angular/core";
import { rxResource } from "@angular/core/rxjs-interop";
import { HttpClient } from "@angular/common/http";

@Component({
  selector: "app-library",
  templateUrl: "./library.component.html",
  styleUrls: ["./library.component.css"],
})
export class LibraryComponent {
  page = signal<number>(1);

  books = rxResource({
    request: this.page,
    loader: (params) =>
      this.http.get<Book[]>(
        `https://api.example.com/books?page=${params.request}`
      ),
  });

  constructor(private http: HttpClient) {}

  updatePage(newPage: number): void {
    this.page.set(newPage);
  }
}

Ici, le page Le signal représente le numéro de page actuel. Modification de page déclenchez automatiquement la fonction de chargeur pour récupérer les livres pour la page spécifiée. En utilisant rxResource Permet au modèle réactif d’Angular de s’intégrer en douceur aux flux observables.

Pour une introduction aux observables en angulaire, vérifiez les articles suivants: Bases angulaires: Introduction aux observables (RXJS) – Partie 1 et Bases angulaires: Introduction aux observables (RXJS) – Partie 2.

Conclure

Le resource et rxResource Les API offrent une approche déclarative et réactive de la gestion des flux de travail asynchrones dans Angular. Ils relèvent des défis tels que les conditions de course, le suivi de l’état intégré et les annulations de demande tout en permettant des mises à jour transparentes liées aux changements de signal.

Ces API améliorent les capacités réactives du cadre en couplant étroitement le système de signal d’Angular avec une manipulation asynchrone des données. Bien que expérimentaux, ils représentent une approche avant-gardiste pour gérer les données dynamiques et promettent de devenir des outils essentiels dans le paysage de programmation asynchrone d’Angular. Pour plus de détails sur resource et rxResourceassurez-vous de consulter les ressources suivantes: