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

npx degit sveltejs/template svelte-demo-app

CDsvelte-demo-appau dessus du niveau de la mer installer
au dessus du niveau de la merlancer dev --open

constanteréponse= aller chercher('votre-url-api.com/endpoint');

laisserdes postes= [];

Ce videdes postesarray va être rempli avec les données que nous recevons de notre API une fois que nous aurons effectué l'appel.

Enfin, nous pouvons maintenant utiliser lesurMount()méthode pour faire unAVOIRrequête au point de terminaison à l'aide de l'API Fetch de JavaScript, comme indiqué ci-dessous :

surMount(asynchrone une fonction () {
  constanteréponse= attendre aller chercher(point final);
  constanteLes données= attendreréponse.json();
  console.Journal(Les données);
});

Une fois assemblés, vosApplicationle composant doit contenir les éléments suivants :

<scénario>
  importer {surMount} depuis "svelte";
  constantepoint final= "https://jsonplaceholder.typicode.com/posts";
  laisserdes postes= [];

  surMount(asynchrone une fonction () {
    constanteréponse= attendre aller chercher(point final);
    constanteLes données= attendreréponse.json();
    console.Journal(Les données);
  });

  exporter laisserNom;
</scénario>

<principale>
  <h1>Bonjour {Nom}!</h1>
  <p>Visiterla<un href="https://svelte.dev/tutoriel">SvelteDidacticiel</un>apprendre à construireSvelteapplications.</p>
</principale>

<style>
  
</style>

Pour vérifier que cela fonctionne, enregistrez le fichier, puis visitezhttp://localhost:3000/ et vérifiez les outils de développement du navigateur. Vous devriez voir un tableau d'objets connectés à la console.

Remarque : si vous vous posez la questionexporter le nom du let ; déclaration, c'est ainsi que nous définissons les accessoires dans Svelte. LeexporterLe mot clé déclare ici que cette valeur est un accessoire qui sera fourni par le parent du composant.

Affichage des données du point de terminaison

Maintenant que nous avons réussi à extraire les données de notre point de terminaison, il est temps de rendre le contenu de notre page. Nous pouvons le faire en utilisant unchaque bloc:

{#chaque message en tant qu'article}<div><p>{le titre de l'article}</p></div>{/chaque}

Modifier le balisage dansApp.svelteà ce qui suit :

<principale><h1>Bonjour {nom} !</h1><p>Visiter le<un href="https://svelte.dev/tutorial">Tutoriel svelte</un>pour apprendre à créer des applications Svelte.</p>{#chaque message en tant qu'article}<div><p>{le titre de l'article}</p></div>{/chaque}</principale>

Ajoutez ensuite la ligne suivante au bloc de script :

des postes=Les données;

Vous devriez maintenant voir une liste des titres de publication affichés sur la page.

Utilisation du client Axios pour consommer une API REST

Axios est une bibliothèque JavaScript open source basée sur des promesses pour effectuer des appels d'API assez similaire à l'API Fetch. Axios fournit des méthodes spécifiques pour effectuer diverses requêtes API. Par example:

• axios.get ()est utilisé pour faire une requête GET http à un point de terminaison
• axios.post()est utilisé pour faire une requête POST lors de la création d'enregistrements
• soit deaxios.patch ()etaxios.put()peut être utilisé lorsque vous devez faire une requête HTTP pour mettre à jour un enregistrement dans l'API
• axios.delete ()est utilisé pour envoyer une requête HTTP DELETE à un point de terminaison

Installation d'Axios et mise à jour duApplicationcomposant

Pour utiliser Axios dans notre projet, nous devons d'abord l'installer. Dans la racine du projet, exécutez :

au dessus du niveau de la meri axios@0.21.1

Remarque : J'installe ici une version légèrement plus ancienne, car une version récente de la bibliothèque a introduit un bogue, ce qui entraîne unTypeError : Impossible de convertir undefined ou null en objet erreur lors de l'utilisation d'Axios dans un composant Svelte. Voiricietici . Espérons que cela sera corrigé par une future version de la bibliothèque.

Puis, dans leApplicationcomposant, incluez la bibliothèque :

importer axios depuis "axios";

Modifiez également le code dans lesurMountcrochet comme ça :

surMount(asynchrone une fonction () {
  constanteréponse= attendreaxios.avoir(point final);
  console.Journal(réponse.Les données);des postes=réponse.Les données;
});

Et vous devriez voir les mêmes résultats que précédemment dans votre navigateur.

La gestion des erreurs

Comme la requête Ajax est faite à l'intérieur d'une fonction asynchrone, nous aurions besoin d'utiliser unessayer … attraperbloquer pour signaler tout problème :

surMount(asynchrone une fonction () {
  essayer {
    constanteréponse= attendreaxios.avoir(point final);
    console.Journal(réponse.Les données);des postes=réponse.Les données;
  } capture (Erreur) {
    console.Erreur(Erreur);
  }
});

Ce n'est pas propre à Axios. Vous appliqueriez la même méthode lorsque vous travaillez avec l'API Fetch.

Requêtes groupées dans Axios

Une fonctionnalité intéressante d'Axios est que vous pouvez effectuer des requêtes HTTP simultanées vers plusieurs points de terminaison à l'aide duaxios.all () méthode. Cette méthode prend un groupe de requêtes sous forme de tableau et renvoie un seul objet de promesse qui ne se résout que lorsque les requêtes du tableau transmis ont été résolues individuellement.

La syntaxe pour ce faire est illustrée dans l'extrait ci-dessous :

axios.tout([axios.avoir("https://jsonplaceholder.typicode.com/posts"),axios.avoir("https://jsonplaceholder.typicode.com/comments"),
])
.alors((réponseArr) => {
  
  console.Journal("Premier poste: ",réponseArr[0].Les données[0].Titre);
  console.Journal(« Deuxième commentaire : »,réponseArr[1].Les données[1].corps);
})
.capture((Erreur) => {
  console.Journal(Erreur);
});

Ici (par souci de variation) j'enchaîne les méthodes en utilisantalors()et en utilisantcapture()pour faire face aux erreurs.

Axios contre récupération

Lorsqu'on le compare avecaller chercher()Axios est livré avec quelques ajouts supplémentaires tels que :

• Interception des requêtes et des réponses
• un processus de gestion des erreurs mieux rationalisé
• Protection XSRF
• prise en charge de la progression du téléchargement
• délai de réponse
• la possibilité d'annuler des demandes
• prise en charge des anciens navigateurs
• transformation automatique des données JSON

En outre, Axios peut être utilisé à la fois dans le navigateur et avec Node.js. Cela facilite le partage de code JavaScript entre le navigateur et le back-end ou le rendu côté serveur de vos applications front-end.

Vous pouvez lire quelques autres différencesici.

Conclusion

Nous avons couvert beaucoup de choses dans cette procédure pas à pas. Nous avons commencé par examiner ce qu'est une API REST et pourquoi vous pourriez vouloir consommer un service externe dans votre application. Ensuite, nous avons mis en place un projet Svelte et utilisé l'API Fetch pour extraire une liste d'articles d'une API factice à l'aide de SveltesurMount méthode. Enfin, nous avons jeté un coup d'œil à la bibliothèque HTTP Axios, puis réécrit notre script pour consommer notre API fictive en utilisant Axios au lieu de l'API Fetch.

J'espère que vous avez apprécié la lecture de ce guide, et j'espère qu'il vous a présenté quelques techniques pour utiliser une API REST dans une application Svelte. Nous avons adopté une approche pragmatique pour explorer comment travailler avec les API REST en utilisant lesurMountméthode de cycle de vie avec l'API Fetch et le client Axios.

Cet article servira de guide de référence chaque fois que vous aurez besoin de travailler avec une API REST dans une application Svelte.