Comment utiliser les API dans React à l'aide de Fetch et d'Axios

Une API (Application Programming Interface) est un ensemble de protocoles qui permet à une application d'envoyer des requêtes à un serveur et de recevoir une réponse.

Grâce aux API, vous pouvez intégrer des logiciels dans votre application sans le travail minutieux. Ce processus d'utilisation d'une API dans votre application est généralement appelé consommation d'une API. Par exemple, si vous souhaitez afficher un certain emplacement sur votre site Web, vous utiliserez l'API Google Maps au lieu d'implémenter la fonctionnalité de carte à partir de zéro. Les API réduisent donc votre charge de travail et vous font gagner du temps.

Pour apprendre à utiliser les API REST dans React à l'aide de Fetch et Axios, vous allez créer une application React simple qui obtient un fait aléatoire sur les chats à partir d'une API lorsque vous cliquez sur un bouton.

Types d'API

Les API peuvent être classées par disponibilité ou par cas d'utilisation. En termes de disponibilité, les API peuvent être des API publiques, privées, partenaires ou composites. Lorsqu'ils sont classés selon leur objectif, ils peuvent être base de données, télécommande, systèmes d'exploitation ou API Web. Dans cet article, nous utiliserons un type d'API Web appelé REST (Representational State) API.

Les API REST vous permettent d'obtenir des données à partir d'une source via une URL. Dans React, il existe plusieurs méthodes que vous pouvez utiliser pour utiliser les API REST. Cet article traite des deux méthodes les plus populaires, à savoir l'API JavaScript Fetch et le client HTTP Axios basé sur des promesses.

En rapport: Qu'est-ce que l'API REST et comment pouvez-vous récupérer des données pour votre application ou votre site Web

Conditions préalables

Pour suivre ce guide, vous devez avoir :

• Compréhension de base de JavaScript.
• Connaissance de base de React et des crochets React.
• NPM installé localement sur votre machine.
• Un éditeur de texte ou IDE de votre choix installé.

Créer une application réactive

Tout d'abord, vous devrez créer une application React. Copiez la commande suivante dans votre terminal pour configurer un environnement de développement React.

npx créer-réagir-app catfact

Une fois l'exécution de la commande terminée, ouvrez le fait de chat dossier dans votre éditeur de texte. Vous allez écrire votre code dans le fichier App.js dans le src dossier alors allez-y et supprimez le code inutile.

importer "./App.css" ;
fonction App() {
 retourner (


Appuyez sur le bouton pour un fait de chat aléatoire !



Obtenez le fait de chat



 );
}
exporter l'application par défaut ;

Ensuite, créez une interface utilisateur simple qui servira à afficher le fait aléatoire du chat.

Dans app.js

importer './App.css' ;
fonction App() {
 retourner (


Appuyez sur le bouton pour un fait de chat aléatoire !



Obtenez le fait de chat



 );
}
exporter l'application par défaut ;

Pour styliser votre application, ajoutez le code suivant au app.css déposer.

@importer l'url(' https://fonts.googleapis.com/css2?family=Playfair+Display: ital, poids@700;500&display=swap');
.App {
 famille de polices: 'Playfair Display', serif ;
 marge: 20px 15vw ;
}
h2 {
 famille de polices: 'Playfair Display', serif ;
 poids de la police: 700 ;
 taille de police: 3em ;
}
bouton {
 rembourrage: 1 em 1,2 em ;
 bordure: aucune ;
 taille de la police: 1 em ;
 couleur de fond: #131212 ;
 couleur: #ffffff ;
 rayon de bordure: 0,5 em ;
 curseur: pointeur ;
}
bouton: survoler{
 couleur de fond :#3b3b3b ;
}

Votre application devrait maintenant ressembler à ceci.

Dans les étapes suivantes, vous allez récupérer les données de l'API et les afficher dans l'application.

En rapport: Comment créer votre première application React avec JavaScript

Consommer des API REST à l'aide de Fetch

Récupérer l'API est une interface qui vous permet d'obtenir des ressources d'une API via des requêtes HTTP. le aller chercher() reçoit l'URL du chemin d'accès à la ressource en tant qu'argument obligatoire et renvoie une promesse qui peut être résolue en une réponse.

La syntaxe de base du aller chercher() méthode est la suivante :

récupérer ('url vers la ressource')
 .then (réponse => // gérer la réponse)
 .catch (err => // gérer l'erreur)

Implémentation de l'API de récupération

Dans React, l'API Fetch est utilisée de la même manière qu'en JavaScript simple.

aller chercher(" https://catfact.ninja/fact")
 .then (réponse => réponse.json())
 .then (data => // gérer les données)
 .catch (err => // gérer l'erreur)

Dans la première ligne du code ci-dessus, vous transmettez l'URL de l'API au aller chercher() méthode. aller chercher() renvoie une réponse HTTP qui est convertie en JSON à l'aide de la json() méthode. Dans la troisième ligne, vous avez accès aux données que vous pouvez ensuite utiliser dans l'application. Enfin, le bloc catch vous permet de gérer les erreurs avec élégance.

Pour implémenter la requête de récupération dans le composant de l'application, vous utiliserez des hooks React. En utilisant le utiliserEffet hook, votre application fera la demande une fois le composant chargé et le useState hook créera et mettra à jour l'état du composant. Le suivi de l'état garantit que le composant s'affiche à nouveau lorsque l'API de récupération renvoie la réponse.

En rapport: Hooks: le héros de React

importez useState et useEffect.
importer { useEffect, useState } de 'réagir'

Créez un état pour contenir le fait du chat et la fonction pour le mettre à jour.

const [fait, setFact] = useState('')

Ensuite, créez une fonction pour envoyer la requête GET à l'API et appelez-la dans le utiliserEffet accrocher.

const fetchFact = () => {
aller chercher(" https://catfact.ninja/fact")
 .then((réponse) => réponse.json())
 .then((data) => setFact (data.fact));
}
useEffet(() => {
 récupérerFact()
}, []);

Votre fichier app.js devrait maintenant ressembler à ceci :

importer "./App.css" ;
import { useEffect, useState } de "react" ;
fonction App() {
 const [fait, setFact] = useState("");
 const fetchFact = () => {
 aller chercher(" https://catfact.ninja/fact")
 .then((réponse) => réponse.json())
 .then((data) => setFact (data.fact));
}
useEffet(() => {
 récupérerFact()
}, []);
retourner (


Appuyez sur le bouton pour un fait de chat aléatoire !



Obtenez le fait de chat
{fait}




);
}
exporter l'application par défaut ;

Vous devriez maintenant pouvoir voir un fait aléatoire sur les chats affiché dans votre navigateur.

Ensuite, écrivez du code pour afficher un fait aléatoire lorsque le bouton est cliqué.

Modifiez le bouton pour inclure un sur clic événement et sa fonction de gestionnaire.

 handleClick()}>Obtenir le fait Cat

Définir les poignéeClic() fonctionner comme indiqué ci-dessous.

const handleClick = () => {
 récupérerFact()
}

Maintenant, lorsque vous cliquez sur le bouton, le poignéeClic() la fonction appellera récupérer les données () qui effectuera la requête API et mettra à jour l'état avec un nouveau fait aléatoire. Par conséquent, l'interface utilisateur de l'application sera mise à jour pour afficher le fait actuel.

Consommer des API REST à l'aide d'Axios

À la place de aller chercher(), vous pouvez consommer des API avec Axios. Comme aller chercher(), Axios vous permet d'envoyer des requêtes à un point de terminaison d'API. Cependant, il existe plusieurs différences entre les deux.

• Axios renvoie automatiquement la réponse en JSON pendant que vous devez la convertir en JSON lors de l'utilisation de l'API Fetch.
• Axios ne nécessite qu'un seul rappel .then() contrairement à l'API Fetch.
• Axios est compatible avec les principaux navigateurs tandis que Fetch n'est pris en charge que dans Chrome 42+, Edge 14+, Firefox 39+ et Safari 10+

Implémentation d'Axios

Installez Axios en exécutant la commande suivante.

npm installer axios

Une fois l'installation terminée, importez le package Axios dans le composant de votre application et modifiez le récupérerFact() fonction pour l'utiliser.

importer des axios depuis ‘axios’
const fetchFact = () => {
 axios.get(" https://catfact.ninja/fact").then((response) => {
 setFact (response.data.fact)
 });
}

C'est ça! Votre application devrait afficher un fait de chat aléatoire lorsqu'elle se charge dans le navigateur et lorsque vous cliquez sur le bouton.

Plus d'utilisations pour les API avec React

Vous pouvez consommer des API REST dans React en utilisant différentes méthodes. Dans ce didacticiel, vous avez appris à utiliser Fetch et Axios pour récupérer un fait aléatoire à partir d'une API REST. Les cas d'utilisation des API dans les applications du monde réel sont infinis.

Par exemple, grâce à des API de paiement comme Stripe et PayPal, les magasins peuvent facilement gérer les transactions des clients en ligne sans avoir besoin de mettre en œuvre la fonctionnalité eux-mêmes. Par conséquent, même les utilisateurs moins avertis en technologie peuvent créer des applications utiles qui répondent à leurs besoins.

Qu'est-ce que l'authentification API et comment ça marche?

Comment prouver que la personne qui souhaite accéder à des données importantes est bien celle qu'elle prétend être? C'est là qu'intervient l'authentification API...

Lire la suite

A propos de l'auteur