Commencer avec l’API Httpresource dans Angular

Angular V20 nous amène l’API HTTPRESORCE, construite au-dessus du HTTPClient afin que les intercepteurs et les outils de test fonctionnent mieux qu’avec l’API de ressources.

Angular 19 a introduit l’API de ressources aux fins suivantes:

• Recherchez les données de l’API
• Mettre à jour les données localement
• Chargez de manière asynchrone une ressource locale

Il ne doit pas être utilisé pour la mutation, comme les opérations post-opératoires. En savoir plus sur l’API Resource ici.

Cependant, il y avait un problème pour travailler avec l’API de ressources. Un problème majeur était qu’il n’a pas été construit au-dessus de Httpclientce qui signifiait que les intercepteurs ne fonctionnaient pas comme prévu.

Pour résoudre le problème ci-dessus, Angular 20 introduit API httpresource.

Le httpresource Étend l’API de ressources en utilisant le HTTPClient sous le capot, fournissant un moyen transparent de faire des demandes HTTP tout en prenant en charge les intercepteurs et les outils de test existants.

• Httpresource est construit au-dessus de la primitive des ressources.
• Il utilise HttpClient comme chargeur.
• Il sert d’abstraction pour @ angulaire / commun / http.
• Il fait des demandes HTTP via la pile HTTP d’Angular.
• Il fonctionne avec les intercepteurs.

Vous pouvez récupérer des données à l’aide de l’API HTTPRESORCE comme indiqué ci-dessous:

export class App {
  constructor() {
    effect(() => {
      console.log('products', this.products.value());
    })
  }
  products = httpResource<IProduct[]>(() => `http://localhost:3000/product`);
}

Vous pouvez utiliser des produits pour rendre une table sur le modèle comme indiqué ci-dessous.

<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Price</th>
  </tr>
  @for(p of products.value(); track p.id) {
  <tr>
    <td>{{ p.id }}</td>
    <td>{{ p.name }}</td>
    <td>{{ p.price }}</td>
    <td>{{ p.category }}</td>
    <td>{{ p.description }}</td>
  </tr>
  }

</table>

Travailler avec des intercepteurs

L’API Httpresource est construite sur le dessus du @ Angular / Common / http empiler. Toute demande HTTP faite via elle sera interceptée par l’intercepteur HTTP de l’application. Par exemple, si vous avez un intercepteur défini comme celui ci-dessous:

import { HttpInterceptorFn } from '@angular/common/http';

export const appInterceptor: HttpInterceptorFn = (req, next) => {
  console.log('Request made with URL:', req.url);
  return next(req);
};

Il devrait afficher la sortie dans le navigateur pour les données obtenues à l’aide de l’API HTTPresource. Demande faite avec URL: http: // localhost: 3000 / produit.

Validation du schéma

Par défaut, le httpresource effectue une demande GET et renvoie un unknown Réponse JSON tapée.

• Par défaut, il effectue une opération GET.
• Il s’attend à des données de type JSON comme réponse.
• Le type de données de réponse est inconnu.

Lorsque vous utilisez l’API HTTPResource, il est essentiel de valider le schéma pour vérifier que les données reçues correspondent à la structure attendue. Pour y parvenir, l’API Httpresource permet l’utilisation de bibliothèques de validation de schéma, telles que ZOD.

Pour utiliser ZOD avec l’API HTTPRESORCE, installez-le d’abord, puis importez-le.

import { z } from 'zod';

Après l’importation, créez un schéma pour le produit comme indiqué dans l’exemple ci-dessous.

  IProductSchema = z.object({
    id: z.number(),
    name: z.string(),
    price: z.number(),
    category: z.string(),
    description: z.string().optional()
  });

 ProductResultsSchema = z.array(this.IProductSchema);

Tout d’abord, nous définissons un schéma pour l’objet produit, puis la gamme de produits en utilisant ce schéma.

Après avoir défini le schéma, vous pouvez l’utiliser pour analyser la réponse de la HTTPresource, comme indiqué ci-dessous.

products = httpResource(() => ({
    url: `http://localhost:3000/product`,
    method: 'GET'
  }), {
    parse: (data) => this.ProductResultsSchema.parse(data)
  });

Valeur par défaut

L’API Httpresource prend en charge une valeur par défaut. Cette valeur est renvoyée lorsque la ressource est dans l’un des états suivants.

Si la valeur par défaut n’est pas spécifiée, sa valeur est définie sur indéfini. Vous pouvez définir la valeur par défaut comme indiqué ci-dessous.

products = httpResource(() => ({
    url: `http://localhost:3000/product`,
    method: 'GET'
  }), {
    defaultValue: [
      { id: 0, name: 'default', price: 0, category: 'default', description: 'default' },
    ],
    parse: (data) => this.ProductResultsSchema.parse(data)
  });

Le httpresource et httpclient

La principale différence entre httpresource et httpclient réside dans leur comportement de demande:

• httpresource est impatient – Il déclenche la demande HTTP immédiatement dès sa définition.
• Httpclient est paresseux – Il initie uniquement une demande lorsque l’observable retourné est abonné.

Chaque nouvelle demande faite avec le API httpresource automatiquement annule le précédent. En raison de ce comportement, c’est pas adapté aux mutations et doit être utilisé uniquement pour les données récupérant.

  product = httpResource<IProduct>(() => ({
    url: `http://localhost:3000/product/${this.searchId()}`,
    method: 'GET'
  }));

Faire une demande avancée

L’API Httpresource prend en charge un objet de demande. Une demande httpresource envoyée au backend peut inclure plusieurs champs. Parmi eux, seul le url est requis – tous les autres champs sont facultatifs.

• URL
• méthode
• corps
• paramètres
• têtes
• contexte
• reporter
• Créraction
• transférer

Bien que l’objet HTTPresource prend en charge d’autres verbes, tels que Post, Put, Delete, etc., il est conseillé d’utiliser l’API HTTPResource uniquement pour récupérer les données du backend et de ne pas effectuer de mutations en utilisant d’autres verbes HTTP.

Vous pouvez transmettre l’objet httpresource avec une valeur pour diverses propriétés comme indiqué ci-dessous:

  product = httpResource<IProduct>(() => ({
    url: `http://localhost:3000/product/${this.searchId()}`,
    method: 'GET',
    headers: {
      'X-Special': 'true',
    },
    params: {
      'fast': 'yes',
    },
    reportProgress: true,
    withCredentials: true,
    transferCache: true,
  }));

Signaux retournés

Comme l’API Resource, l’API HTPPRESORCE renvoie un WritableResource et a des propriétés en lecture seule telles que:

• Valeur
• Statut
• Erreur
• téléchargement

Tous sont des types de signaux, ce qui signifie que vous pouvez les suivre à l’intérieur d’un effet. Outre les signaux ci-dessus, il renvoie également des métadonnées sur la réponse.

• têtes
• code de statut
• progrès

constructor() {
    effect(() => {
      console.log('products', this.products.value());
      console.log('products error', this.products.error()?.message);
      console.log('products satus', this.products.status());
    })
  }

Autre type de réponse

L’API HTTPresource a des méthodes dédiées pour travailler avec d’autres types de réponse. Ils sont les suivants.

• httpResource.text Renvoie un texte brut
• httpResource.blob Renvoie les données en tant que blob
• httpResource.arrayBuffer Renvoie les données en tant que ArrayBuffer

Vous pouvez télécharger une image à l’aide de l’API Httpresource comme indiqué ci-dessous:

@Injectable({
  providedIn: 'root'
})
export class Product {

  getImage(): HttpResourceRef<Blob | undefined> {
    return httpResource.blob(() => ({
      url: "http://localhost:3000/product/image",
      method: 'GET',
      reportProgress: true,
    }));
  }

}

Résumé

L’API HTTPResource est l’une des fonctionnalités les plus excitantes de Angular V20, et vous devez l’utiliser pour récupérer les données du backend. Il utilise le httpclient comme chargeur et renvoie diverses réponses comme signal. Vous devez éviter de l’utiliser pour la mutation de données au backend.

J’espère que vous trouverez cet article utile. Merci d’avoir lu.