Appel à une API externe

Explications du développeur :

  • Ici je vais simplement appeler l'API https://dummyjson.com/products/ en lui passant un id que je peux incrémenter ou décrémenter avec un bouton ou l'input type number ci-dessous.
  • Comme j'utilise ref() pour l'id: const id = ref(1) tout changement de la valeur de id entraîne la mise à jour du composant où il est utilisé. Donc le simple fait de changer la valeur de cet id relance automatiquement l'appel à l'API. En bonus j'utilise les très pratiques pending et error ici: const { data: product, pending, error } = await useFetch(()... pour gérer les erreurs et le chargement de l'API.

Résultat de l'appel à l'API https://dummyjson.com/products/

-

{
  "id": 1,
  "title": "iPhone 9",
  "description": "An apple mobile which is nothing like apple",
  "price": 549,
  "discountPercentage": 12.96,
  "rating": 4.69,
  "stock": 94,
  "brand": "Apple",
  "category": "smartphones",
  "thumbnail": "https://i.dummyjson.com/data/products/1/thumbnail.jpg",
  "images": [
    "https://i.dummyjson.com/data/products/1/1.jpg",
    "https://i.dummyjson.com/data/products/1/2.jpg",
    "https://i.dummyjson.com/data/products/1/3.jpg",
    "https://i.dummyjson.com/data/products/1/4.jpg",
    "https://i.dummyjson.com/data/products/1/thumbnail.jpg"
  ]
}
Back home