Rechercher des données dans votre application React

React, une bibliothèque de premier plan pour la création d'applications Web dynamiques, se concentre principalement sur la couche de vue dans l'architecture MVC. Ce tutoriel explore un aspect fondamental du développement Web: récupérer et afficher des données dans une application React. Nous examinerons diverses stratégies de récupération de données, leurs avantages et leurs inconvénients, et les meilleures pratiques pour les intégrer dans vos projets. À la fin, vous comprendrez comment gérer efficacement la récupération des données dans vos applications React.

Pour commencer

Commençons par créer une application React de base en utilisant create-react-app:

create-react-app react-data-fetcher

Cette commande génère une structure de projet complète. Reportez-vous au fichier README pour des informations détaillées sur create-react-app.

un serveur simple

À des fins de démonstration, un serveur simple (une application Python 3 utilisant le framework hug et redis pour la persistance des données) fournit une API distante pour récupérer les citations. La simplicité de l'API nous permet de nous concentrer sur le processus de récupération des données React.

le composant QuoteList

Le composant fonctionnel QuoteList rend une liste de devis à puces, acceptant un tableau de chaînes en entrée:

import React from 'react';

const QuoteList = ({ quotes }) => (
  quotes.map(quote => 

{quote}

) ); export default QuoteList;

Ce composant est un enfant du composant principal App, où le rendu conditionnel est utilisé en fonction du statut de récupération des données.

Données Récupération avec Axios

La fonction fetchQuotes, en utilisant Axios, démontre la récupération des données asynchrones:

fetchQuotes = () => {
    this.setState({ ...this.state, isFetching: true });
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({ quotes: response.data, isFetching: false }))
      .catch(e => console.log(e));
};

La fonction handleSubmit présente une simple demande de post à l'aide d'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();
};

Axios vs Fetch: une comparaison

Cette section met en évidence les différences clés entre Axios et l'API native fetch. Axios simplifie la transformation des données JSON et propose des fonctionnalités intégrées comme la manipulation du délai d'expiration et les intercepteurs HTTP, qui fetch manque. Les intercepteurs d'Axios fournissent un mécanisme centralisé pour modifier les demandes et les réponses, améliorant la maintenabilité du code. L'exemple montre comment utiliser les intercepteurs Axios. Le tutoriel contraste également la gestion de plusieurs demandes simultanées en utilisant axios.all et Promise.all avec fetch.

Conclusion

Ce tutoriel a couvert les données asynchrones qui ont obtenu la réaction des données, y compris les méthodes de cycle de vie, le sondage, les rapports de progrès et la gestion des erreurs. Une comparaison d'Axios et de l'API fetch a mis en évidence leurs forces et leurs faiblesses respectives. Les informations fournies vous permettent de gérer efficacement la récupération des données dans vos applications React.

Ce message a été mis à jour avec les contributions de Divya Dev.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!