Comment récupérer des données dans svelte

Ce didacticiel montre comment récupérer et afficher les données d'une API dans une application Svelte. Nous utiliserons à la fois l'API fetch intégrée et la bibliothèque Axios.

Concepts clés:

• API REST: API REST (Interfaces de programmation d'application de transfert d'état de représentation) Autorisent les applications à communiquer et à échanger des données à l'aide des demandes HTTP. Les composants clés incluent les méthodes HTTP (obtenir, publier, mettre, patch, supprimer), points de terminaison (URL spécifiant les emplacements des ressources), les en-têtes (métadonnées) et les corps de demande (charges utiles de données).

• Svelte's onMount(): Ce crochet de cycle de vie exécute du code après le montage d'un composant dans le DOM, idéal pour récupérer les données lorsque le composant rend pour la première fois.

• API Fetch: La méthode intégrée de JavaScript fetch() fournit un moyen basé sur les promesses de faire des demandes HTTP.

• axios: Une bibliothèque tierce populaire offrant des fonctionnalités telles que l'interception de demande / réponse, la gestion des erreurs et la transformation JSON, simplifiant les interactions API.

étapes:

1. Configuration du projet: Créez un nouveau projet svelte en utilisant npx degit sveltejs/template my-svelte-app et accédez au répertoire. Installez les dépendances avec npm install et démarrez le serveur de développement avec npm run dev --open.

2. Approche de l'API récupérer:

   • import onMount depuis svelte.

   • Définissez l'URL du point de terminaison de l'API (par exemple, const endpoint = "https://jsonplaceholder.typicode.com/posts";).

   • Déclarer une variable réactive let posts = []; pour stocker les données récupérées.

   • Utilisez onMount() pour faire une demande fetch:

     onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });

   • Afficher les données à l'aide d'un bloc {#each}:

     {#each posts as post}
       <div>
         <h3 id="post-title">{post.title}</h3>
         <p>{post.body}</p>
       </div>
     {/each}

3. AXIOS APPROCHE:

   • Installez Axios: npm install axios@0.21.1 (Remarque: Utilisation d'une version plus ancienne en raison de bogues potentiels dans les versions plus récentes).

   • Importer axios: import axios from 'axios';

   • Modifiez la fonction onMount() pour utiliser axios.get():

     onMount(async () => {
       try {
         const response = await axios.get(endpoint);
         posts = response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     });

   • le try...catch Block gère les erreurs potentielles pendant l'appel de l'API.

4. ÉTATS DE GESTION ET DE CHARGEMENT D'ERREUR: Pour une application plus robuste, ajoutez des états de chargement et d'erreur en utilisant les blocs {#await} et {#catch} de Svelte:

   onMount(async () => {
     const response = await fetch(endpoint);
     const data = await response.json();
     posts = data;
   });

axios vs fetch: Bien que fetch soit intégré, Axios propose des commodités telles que la transformation JSON intégrée, une meilleure gestion des erreurs et une interception de demande / réponse. Choisissez la méthode qui convient le mieux aux besoins et à la complexité de votre projet.

Cette réponse améliorée fournit une explication plus complète et structurée, incorporant les meilleures pratiques telles que la gestion des erreurs et le chargement des états, ce qui facilite la compréhension et la mise en œuvre. N'oubliez pas de remplacer /uploads/... les espaces réservés par des chemins d'image réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!