Différentes façons de récupérer des données dans ReactJS

Les meilleures façons de récupérer des données dans ReactJs qui ont des types respectifs.

different-ways-to-fetch-data-in-reactjs

Méthode de récupération

La méthode fetch dans JS est utilisée pour demander au serveur et charger les informations dans les pages Web. La requête peut provenir de n'importe quelle API qui renvoie les données au format #json ou #xml . Cette méthode renvoie une promesse. Jetez un oeil à un exemple. Passons à la méthode suivante

Async-Await

C'est le moyen préféré pour récupérer les données d'une API car il nous permet de supprimer nos rappels .then() et de renvoyer des données résolues de manière asynchrone. Dans le bloc asynchrone, nous pouvons utiliser la fonction Await pour attendre la promesse. Passons à la méthode suivante

Bibliothèque Axios

Avec Axios, nous pouvons facilement envoyer des requêtes HTTP asynchrones aux API REST et aux API REST. effectuer des opérations de création, de lecture, de mise à jour et de suppression. Axios peut être importé en JavaScript brut ou avec n'importe quelle bibliothèque en conséquence. Passons à la méthode suivante

Hooks personnalisés

Il s'agit essentiellement d'un composant React dont le nom commencera par "use" comme useFetch. Il peut utiliser un ou plusieurs hooks React à l’intérieur. Passons à la méthode suivante

Utilisation dans le composant

Importez le hook useFetch et transmettez l'URL du point de terminaison de l'API à partir duquel vous souhaitez récupérer les données. Désormais, comme n'importe quel hook React, nous pouvons directement utiliser notre hook personnalisé pour récupérer les données. Passons à la méthode suivante

Bibliothèque de requêtes React

Grâce à cela, nous pouvons faire bien plus que simplement récupérer des données. Il prend en charge la mise en cache et la prélecture, ce qui a un impact sur l'expérience utilisateur globale en évitant les irrégularités et en garantissant que notre application soit plus rapide.

Aimez, partagez et abonnez-vous #DevTools99 pour en savoir plus vidéos utiles, informations sur les outils et #tutoriels. Merci !

It appears you don't have a PDF viewer for this browser. No biggie... you can click here to download the PDF file.


DevTools99

Developer Co-Team

Let us make it easier for developers throughout the world to breathe. Let's keep things simple. Let's take it easy.