Share
React est sans doute la bibliothèque la plus populaire pour la création d'applications Web interactives. Cependant, React n’est pas un framework Web à part entière. Il se concentre sur la partie vue du vénérable modèle MVC.
Il existe tout un écosystème React qui aborde d'autres aspects. Dans ce didacticiel, vous découvrirez l'un des éléments les plus fondamentaux de toute application Web: comment récupérer des données à afficher. Ce n'est pas anodin. Il existe plusieurs endroits dans la hiérarchie du composant React où vous pouvez récupérer des données. Quand récupérer des données est une autre préoccupation. Vous devez également déterminer quelle technologie utiliser pour récupérer vos données et où les stocker..
À la fin de ce didacticiel, vous aurez une idée précise du fonctionnement de l'extraction de données dans React, des avantages et des inconvénients d'approches différentes et de la manière d'appliquer ces connaissances à vos applications React..
Créons un squelette pour notre application React avec create-react-app:
> créer-réagir-app réagir-récupérateur de données
Le résultat est une structure de répertoire assez élaborée. Lisez l'excellent fichier README si vous n'êtes pas familier avec create-react-app.
J'ai créé un serveur simple pour stocker et servir des devis. Ce didacticiel n’a pas pour objectif principal de fournir une API distante expliquant comment extraire des données avec React. Juste pour satisfaire votre curiosité, il s’agit d’une application Python 3 basée sur le framework hug et qui utilise Redis comme stockage persistant..
L'API est extrêmement simple. Il n'y a qu'un seul point final, / citations. Il renvoie toutes les citations stockées en réponse à une requête HTTP GET et vous pouvez en ajouter de nouvelles en envoyant une requête HTTP POST..
Le code source complet est disponible sur GitHub.
L'application de démonstration est une application React qui communique avec le service de devis, affiche tous les devis et vous permet d'ajouter de nouveaux devis..
Voici une capture d'écran:
La structure de l'application est très simple. J'ai commencé avec un squelette créé par create-react-app et ajouté deux composants dans le sous-répertoire src: QuoteList et AddQuoteForm. Voici la structure de répertoire (à l'exception de node_modules):
~ / git / react-data-fetcher> arbre -I module_noeud -L 2. ├── LISEZMOI.md ├── LISEZMOI2.md package.json public ├── favicon.ico index.html manifest.json │ src ─ AddQuoteForm.css AddQuoteForm.js ├── App.css App.js App.test.js par QuoteList.js par index.css ── index.js │ └── registerServiceWorker.js yarn.lock 2 répertoires, 16 fichiers
Le code source complet est disponible sur GitLab.
Le composant fonctionnel QuoteList affiche une liste de citations sous forme de liste à puces. Il attend un tableau de chaînes:
import Réagissez à partir de 'réagir' const QuoteList = (quotes) => quotes.map (quote =>
C'est un composant enfant du composant principal de l'application.
L'API d'extraction est une API basée sur des promesses qui renvoie un objet de réponse. Pour accéder au contenu JSON réel, vous devez appeler le json () méthode de l'objet de réponse.
fetchQuotes = () => this.setState (… this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .then (response => response.json ()) .then (résultat => this.setState (quotes : résultat, isFetching: false)) .catch (e => console.log (e));
Bien entendu, React concerne uniquement les composants. La question de savoir où placer le code de récupération de données est importante. Si vous factorisez bien votre code, vous aurez beaucoup de composants génériques et des composants spécifiques à l'application. React et JavaScript en général sont très flexibles, il est donc possible d’injecter de la logique n’importe où..
Extraire des citations à partir d’une API REST nécessite une forme d’interrogation, car je veux que les citations soient toujours à jour. Mais l'extraction initiale est également importante. Les composants React ont des méthodes de cycle de vie dans lesquelles vous pouvez implémenter une logique qui s'exécutera à un moment donné. le composantDidMount () La méthode se déclenche lorsque le composant est accessible et que son état est modifié. C'est l'endroit idéal pour lancer la récupération de données.
Voici à quoi cela ressemble:
composantDidMount () this.fetchQuotes ()
Si vous voulez vraiment réduire le temps de première vue, vous pouvez utiliser la composantWillMount () pour lancer votre extraction asynchrone, mais vous risquez de la terminer avant le montage du composant. Je ne recommande pas cette approche.
Découvrez Maîtriser les méthodes du cycle de vie de React pour plus de détails..
Le premier chercher dans composantDidMount () est génial, mais je veux mettre à jour les citations fréquemment. Dans une API basée sur REST, la seule solution consiste à interroger périodiquement le serveur. Le service de devis est très basique et renvoie toujours tous les devis..
Des services plus évolutifs fourniront un moyen de vérifier les mises à jour ou même d'utiliser HTTP si-modify-since ou eTag. Notre application de démonstration récupère tout toutes les cinq secondes en démarrant une minuterie dans composantDidMount () et nettoyer dans composantWillUnmount ():
composantDidMount () this.fetchQuotes () this.timer = setInterval (() => this.fetchQuotes (), 5000); composantWillUnmount () this.timer = null;
La durée de l'interrogation est une décision spécifique à l'application. Si vous avez besoin de mises à jour en temps réel et / ou que les interrogations sollicitent trop le back-end, envisagez d'utiliser WebSockets au lieu de REST..
Parfois, la récupération des données peut prendre beaucoup de temps. Dans ce cas, l'affichage d'une barre de progression ou d'une animation brillante pour informer l'utilisateur de ce qui se passe peut beaucoup contribuer à l'expérience de l'utilisateur. Ceci est particulièrement important lorsque l'utilisateur lance la récupération de données (par exemple en cliquant sur un bouton de recherche).
Dans l'application de démonstration, j'affiche simplement un message disant "Récupération de citations ..." pendant la récupération. dans le rendre() méthode du composant principal de l’application, j’utilise le rendu conditionnel en vérifiant la state.isFetching membre.
render () const title = 'Citations pour toi!' let now = new Date () return ()Titre
this.state.isFetching? 'Chercher des citations…': "
le fetchQuotes () la méthode prend en charge la mise à jour state.isFetching en l'initialisant à true au démarrage et en le redonnant à la réception des guillemets:
fetchQuotes = () => this.setState (… this.state, isFetching: true) fetch (QUOTE_SERVICE_URL) .then (response => response.json ()) .then (résultat => this.setState (quotes : résultat, isFetching: false)) .catch (e => console.log (e));
Je fais le minimum de gestion des erreurs ici en enregistrant les erreurs capturées sur la console. Selon votre application, vous pouvez appeler une logique de nouvelle tentative, avertir l'utilisateur ou afficher du contenu de secours..
L'API d'extraction a quelques pièges. Cela nécessite l'étape supplémentaire consistant à extraire le JSON d'une réponse. Cela ne corrige pas toutes les erreurs. Par exemple, 404 sera renvoyé sous forme de réponse normale. Vous devrez vérifier le code de réponse et également gérer les erreurs réseau qui se font prendre.
Vous devrez donc gérer les erreurs à deux endroits. Mais vous pouvez utiliser la bibliothèque axios.js pour résoudre ces problèmes et obtenir un code légèrement plus concis au prix de l’ajout d’une dépendance externe. Voici à quoi ressemble le code avec axios:
fetchQuotes = () => this.setState (… this.state, isFetching: true) axios.get (QUOTE_SERVICE_URL) .then (réponse => this.setState (guillemets: response.data, isFetching: false) ) .catch (e => console.log (e);
Cela ne ressemble pas beaucoup, mais ça aide. Le code pour ajouter une nouvelle citation est beaucoup plus concis avec axios. Voici la version de fetch:
Accentsconagua
handleSubmitWithFetch = event => let data = new FormData () data.append ('quote', this.state.quote) fetch (this.props.quote_service_url, méthode: 'POST', corps: données) .then ( response => response.json ()) .catch (e => console.log (e)); event.preventDefault (); Et voici la version axios:
handleSubmit = event => axios.post (this.props.quote_service_url, 'quote': this.state.quote) .then (r => console.log (r)) .catch (e => console.log (e)); event.preventDefault ();
Dans ce didacticiel, vous avez appris à récupérer des données de manière asynchrone dans une application React. Nous avons discuté des méthodes de cycle de vie pertinentes, des interrogations, des rapports d'avancement et du traitement des erreurs..
Nous avons examiné deux bibliothèques à base de promesses: l'API d'extraction et axios.js. Maintenant, lancez-vous et créez d’impressionnantes applications React qui accèdent aux API distantes..
React a acquis une popularité croissante au cours des deux dernières années. En fait, un certain nombre d’articles sur le marché sont disponibles à l’achat, à l’examen, à la mise en oeuvre, etc. Si vous recherchez des ressources supplémentaires autour de React, n'hésitez pas à les consulter..
