React AJAX

Dans les applications React, les requêtes AJAX peuvent être implémentées à l'aide de l'API fetch ou de bibliothèques tierces telles que axios, jQuery, et d'autres pour les requêtes réseau.

Ce qui suit est une explication de base de l'utilisation de ces deux méthodes :

Utilisation de l'API fetch pour les requêtes AJAX

fetchest une API intégrée au navigateur pour effectuer des requêtes réseau. Ce qui suit utilisefetchÉtapes de base pour effectuer une requête AJAX dans un composant React :

  • Importer fetch- Si vous utilisez un navigateur moderne, vous n'avez généralement pas besoin de l'importer.fetch. Toutefois, si vous devez prendre en charge des navigateurs plus anciens, vous pouvez utiliserunfetchun tel polyfill.

  • Utilisation du hook useEffect- UtilisezuseEffecthook pour gérer les effets secondaires, comme effectuer des requêtes réseau.

  • Effectuer une requête- Utilisezfetchpour effectuer des requêtes GET ou POST.

  • Gérer la réponse- Utilisez.then()pour gérer les données de réponse.

  • Gestion des erreurs- Utilisez.catch()pour capturer et gérer les erreurs.

  • Mettre à jour l'état- UtilisezuseStatehook pour stocker les données demandées et mettre à jour l'état après la réussite de la requête.

Exemple

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (error) {
        console.error('Erreur lors de la récupération des données:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Chargement...</div>;
  }

  return (
    <div>
      <h1>Données de l'API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Explication :

  • useState et useEffect: UtilisezuseStatepour stocker les données renvoyées par la requête AJAXdata) et l'état de chargementloading), et utilisezuseEffectpour exécuter la requête AJAX après le chargement du composant.

  • fetch: Utilisezfetchpour effectuer une requête GET, et utilisezresponse.json()pour analyser les données JSON renvoyées en objets JavaScript.

  • Gestion asynchrone: Utilisezasync/awaitpour gérer les opérations asynchrones, en garantissant que l'état est mis à jour après la fin de la requête.

  • Gestion des erreurs: Dansfetchla requête, utiliseztry/catchpour intercepter et gérer les erreurs qui peuvent survenir.

Utilisation d'axios

axios est un client HTTP basé sur les promesses pour les navigateurs et Node.js.

Voici les étapes de base pour utiliser axios :

  1. Installer axios- Installer axios via npm ou yarn.

    npm install axios

  2. Importer axios- Importer axios dans le composant.

  3. Effectuer une requête- Utiliser axios pour effectuer des requêtes GET ou POST.

  4. Gérer les réponses et les erreurs- Utiliser.then()et.catch()pour gérer les réponses et capturer les erreurs.

  5. Mettre à jour l'état- Similaire à l'utilisation defetchde même, utilisezuseStatepour mettre à jour l'état.

Exemple

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        console.error('Erreur lors de la récupération des données:', error);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <div>Chargement...</div>;
  }

  return (
    <div>
      <h1>Données de l'API:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default MyComponent;

Test en ligne d'utilisation de jQuery

L'exemple suivant montre comment récupérer la dernière description de partage de gist d'un utilisateur GitHub :

Les données dans les composants React peuvent être récupérées via Ajax dans la méthode componentDidMount. Lorsque les données sont récupérées depuis le serveur, elles peuvent être stockées dans l'état, puis l'interface utilisateur peut être re-rendue à l'aide de la méthode this.setState.

Lors du chargement asynchrone des données, utilisez componentWillUnmount pour annuler les requêtes inachevées avant que le composant ne soit démonté.

Exemple React

class UserGist extends React.Component { constructor(props) { super(props); this.state = {username: '', lastGistUrl: ''}; } componentDidMount() { this.serverRequest = $.get(this.props.source, function (result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); } componentWillUnmount() { this.serverRequest.abort(); } render() { return ( <div> {this.state.username}La dernière adresseGistpartagée de l'utilisateur :a href={this.state.lastGistUrl}>{this.state.lastGistUrl}</a> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <UserGist source="https://api.github.com/users/octocat/gists" /> );

Essayez-le »

Le code ci-dessus utilise jQuery pour effectuer la requête Ajax.

Autres extensions