Recherche de site Web

Comment connecter ReactJS à l’API Flask ?


Créer des applications Web modernes, à la fois évolutives et attrayantes, nécessite l'utilisation de technologies pertinentes. ReactJS et Flask sont deux frameworks populaires couramment utilisés respectivement pour le développement front-end et back-end.

Dans cet article, nous explorerons le processus de connexion de ReactJS à l'API Flask pour créer des applications Web robustes qui tirent parti des fonctionnalités uniques offertes par les deux technologies. Nous vous fournirons un guide étape par étape sur la façon de configurer une API Flask, d'activer le partage de ressources entre origines croisées (CORS), d'effectuer des requêtes API à partir de ReactJS, d'afficher les données de l'API dans l'interface utilisateur et de gérer l'API. les erreurs. À la fin de cet article, vous comprendrez parfaitement comment connecter ReactJS à l'API Flask, vous permettant ainsi de créer des applications Web fiables qui répondent à vos besoins spécifiques.

Créer une API Flask

Afin d'établir une connexion entre ReactJS et l'API Flask, la première étape consiste à créer une API Flask. Cela peut être fait en créant un script Python qui décrit les routes et méthodes API souhaitées. Flask rationalise le processus de développement d'API en fournissant un décorateur prédéfini appelé "@app.route". Grâce à cette fonctionnalité, les développeurs peuvent créer rapidement et efficacement des routes et des méthodes, faisant de Flask une solution idéale pour créer des API.

Voici un exemple d'API Flask qui renvoie une réponse JSON simple :

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api')
def api():
    response = {'message': 'Hello, World!'}
    return jsonify(response)

Dans cet exemple, nous avons créé une API Flask avec une seule route appelée /api qui renvoie une réponse JSON avec le message « Hello, World ! ».

Activer CORS

CORS est une fonctionnalité de sécurité implémentée par les navigateurs Web qui empêche les pages Web d'envoyer des requêtes aux API hébergées sur différents domaines. Lorsque vous effectuez une requête depuis une application ReactJS hébergée sur un domaine vers une API Flask hébergée sur un autre domaine, le navigateur Web bloquera la requête par défaut, ce qui signifie que vous ne pourrez pas accéder aux données renvoyées par Flask. API.

En règle générale, les navigateurs Web empêchent les requêtes adressées aux API provenant d'un autre domaine. Pour permettre à ReactJS d'envoyer des requêtes à votre API Flask, vous devez activer le partage de ressources Cross-Origin (CORS) sur votre serveur Flask. Heureusement, vous pouvez y parvenir facilement en installant le package flask−cors et en utilisant la classe CORS pour activer CORS pour vos routes API.

Voici un exemple de la façon d'activer CORS pour toutes les routes API :

from flask_cors import CORS

CORS(app)

Dans cet exemple, nous avons importé la classe CORS du package flask−cors et lui avons transmis l'objet app pour activer CORS pour toutes les routes API.

Faire des requêtes API depuis ReactJS

Après avoir créé avec succès une API Flask et activé CORS, l'étape suivante consiste à lancer des requêtes API à partir de votre application ReactJS. La fonction de récupération intégrée de JavaScript peut être utilisée pour envoyer des requêtes HTTP à votre API.

Voici un exemple de la façon de faire une requête GET sur la route /api de votre API Flask :

fetch('/api')
  .then(response => response.json())
  .then(data =>  console.log(data))

Dans la présente illustration, nous avons utilisé la fonction fetch pour lancer une requête GET vers la route /api de notre API Flask. Par la suite, nous avons transformé la réponse au format JSON à l'aide de la méthode json et enregistré les données résultantes sur la console à des fins de débogage et de test.

Afficher les données API dans ReactJS

Après avoir effectué avec succès une requête API depuis votre application ReactJS, l'étape suivante consiste à présenter les données dans votre interface utilisateur. Avec ReactJS, cela peut être réalisé en utilisant les puissants hooks useState et useEffect qui permettent le rendu facile du contenu dynamique.

Voici un exemple de la façon d'afficher le message de la route /api de votre API Flask dans un composant React :

import { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api')
      .then(response => response.json())
      .then(data => setMessage(data.message));
  }, []);

  return (
    <div>
      <h1>{message}</h1>
    </div>
  );
}

export default App;

La démonstration ci-dessus présente l'implémentation du hook useState pour créer une variable d'état nommée « message » et du hook useEffect pour lancer une requête API lors du montage du composant. Après avoir récupéré la réponse de l'API, nous avons attribué son message à la variable de message et l'avons affiché dans l'interface utilisateur à l'aide de JSX.

Gestion des erreurs d'API

Lorsque vous effectuez des requêtes API, il est important de gérer les erreurs qui peuvent survenir. En cas d'erreur, vous pouvez afficher un message d'erreur à l'utilisateur ou prendre d'autres actions appropriées.

Voici un exemple de la façon de gérer les erreurs lors d'une requête API dans ReactJS :

import { useState, useEffect } from 'react';

function App() {
  const [message, setMessage] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    fetch('/api')
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => setMessage(data.message))
      .catch(error => setError(error.message));
  }, []);

  return (
    <div>
      {error && <p>{error}</p>}
      <h1>{message}</h1>
    </div>
  );
}

export default App;

Dans l'exemple illustré, nous avons incorporé une variable d'état nommée « erreur » et utilisé la méthode « catch » pour gérer les erreurs qui pourraient survenir lors de la requête API. Chaque fois qu'une erreur survient, nous attribuons le message d'erreur à la variable "erreur" et le présentons dans l'interface utilisateur du composant.

Conclusion

Pour résumer, connecter ReactJS à l'API Flask est un moyen polyvalent de développer des applications Web avec un front-end contemporain et un back-end flexible. Cet article a mis en évidence les étapes fondamentales nécessaires pour créer une API Flask, activer CORS, effectuer des requêtes API à partir de ReactJS, présenter les données API dans l'interface utilisateur et gérer les erreurs d'API. Fort de ces connaissances, vous pouvez créer des applications Web qui répondent à vos besoins spécifiques et offrent une expérience utilisateur exceptionnelle. Que vous créiez une application Web de base ou une application d'entreprise sophistiquée, ReactJS et l'API Flask présentent une combinaison puissante qui peut vous aider à atteindre vos objectifs. Alors, commencez à explorer les possibilités dès aujourd'hui et découvrez les applications Web innovantes que vous pouvez créer à l'aide de ReactJS et de l'API Flask !

Articles connexes