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

Ce didacticiel explore la façon dont vous pouvez consommer et restituer des données à partir d'une API dans votre application Svelte. Vous pouvez interagir avec les API dans Svelte dans lesurMount()hook de cycle de vie utilisant Axios, Apisauce, l'API Fetch native de JavaScript ou tout client HTTP de votre choix.

Nous allons créer un exemple d'application qui interagit et affiche les données fournies par un serveur d'API REST. Cette application permettra aux utilisateurs de récupérer des listes d'articles de blog à partir d'une API REST et de les afficher sur la page.

Conditions préalables

Pour suivre ce didacticiel, vous devez avoir des connaissances préalables en JavaScript et CSS, ainsi qu'une certaine familiarité avecSvelte.

Vous aurez également besoinNoeud et npminstallé sur votre machine, ainsi queGite.

Qu'est-ce qu'une API REST ?

L'acronyme API signifie "interface de programmation d'application", et en termes simples, c'est un moyen pour deux applications de communiquer – ou de partager des données entre elles.

Une API REST est un type d'API qui implémente le protocole REST (Representational State Transfer). REST est un style architectural permettant de créer des services Web qui interagissent via un protocole HTTP. La structure de demande de REST comprend quatre parties essentielles, qui sont la méthode HTTP, un point de terminaison, des en-têtes et le corps de la demande.

Méthodes HTTP

La méthode HTTP dans une requête API indique au serveur le type d'action que le client attend de lui. Les méthodes HTTP les plus utilisées aujourd'hui incluent GET, POST, PATCH, DELETE et sont expliquées brièvement ci-dessous.

• AVOIR: utilisé pour récupérer ou lire des informations à partir d'un serveur
• PUBLIER: utilisé pour créer ou stocker des enregistrements dans un serveur
• METTRE/CORRECTIF: utilisé pour mettre à jour ou corriger des enregistrements dans un serveur
• EFFACER: permet de supprimer un ou plusieurs enregistrements d'un point ressource

Points de terminaison HTTP

Un point de terminaison HTTP en termes simples est une adresse ou une URL qui spécifie où une ou plusieurs ressources peuvent être accessibles par une API.

Les en-têtes HTTP sont des paires clé-valeur qui permettent au client de transmettre des informations au serveur dans une requête et vice-versa dans une réponse.

Corps de la requête

Le corps d'un appel d'API est la charge utile (ou les données) envoyées du client au serveur.

Configuration de notre application Svelte

Nous allons créer un exemple d'application qui interagit avec une API REST externe pour récupérer une liste d'articles de blog à partir d'un serveur. Nous afficherons ensuite cette liste sur le client Svelte.

Nous n'allons pas trop plonger dans le regroupement et l'infrastructure des applications Svelte dans ce didacticiel, nous suivrons donc les instructions sur lesite officiel de Sveltepour faire fonctionner une application.

Dans votre répertoire préféré, exécutez :

npx degit sveltejs/template svelte-demo-app

Ensuite, entrez dans le dossier, installez les dépendances requises à l'aide de npm et démarrez un serveur de développement :

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

Vous devriez maintenant voir un "Hello, World!" message affiché dans votre navigateur àhttp://localhost:5000/.

Utilisation de l'API Fetch pour consommer une API REST

Dans cet article, nous examinerons deux méthodes de récupération de données à partir d'une API. Tout d'abord, nous examinerons l'utilisation de l'API Fetch, qui est native de JavaScript. Ensuite, dans la section suivante, nous examinerons l'utilisation du client Axios, avant de comparer et de contraster brièvement les deux méthodes par la suite.

Qu'est-ce que l'API de récupération ?

L'API Fetch est un mécanisme basé sur des promesses qui vous permet d'effectuer des requêtes d'API asynchrones vers des points de terminaison en JavaScript. Si vous êtes familier avec leXMLHttpRequest()méthode, vous conviendrez probablement que l'API Fetch est une amélioration – dans le sens où elle fournit des fonctionnalités supplémentaires telles que la mise en cache des données, la possibilité de lire les réponses en continu etSuite.

L'utilisation de l'API Fetch est aussi simple que d'appeler lealler chercher() méthode avec le chemin d'accès à la ressource que vous récupérez comme paramètre obligatoire. Par example:

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

Passer plus de paramètres dans une requête

Lealler chercher()vous permet également d'être plus précis avec la demande que vous faites en transmettant uninitialiserobjet comme deuxième paramètre facultatif.

Leinitialiser object vous permet de transmettre des détails supplémentaires avec votre demande. Les plus courants d'entre eux sont énumérés ci-dessous :

• méthode: une chaîne qui spécifie quelle méthode HTTP est envoyée au serveur et peut être GET, POST, PUT, PATCH ou DELETE.
• cache : une chaîne qui spécifie si la requête doit être mise en cache. Les options autorisées sontdéfaut,pas de cache,recharger,force-cache,uniquement si mis en cache.
• en-têtes: un objet utilisé pour définir les en-têtes à transmettre avec l'exemple de requête.
• corps: un objet le plus couramment utilisé dansPUBLIER,METTREou alorsCORRECTIF demandes. Il vous permet de transmettre une charge utile au serveur.

Construire leApplicationcomposant

Une fois votre échafaudage Svelte terminé, ouvrez lesrcdossier et localisez leApp.svelte composant. C'est ce qui est rendu lorsque vous visitez la page d'accueil du projet.

Comme vous pouvez le voir, le composant contient un bloc pour notre JavaScript, un