Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
front:requetes_api [2025/09/25 15:05] – [Effectuer une requête] paolofront:requetes_api [2025/09/29 16:45] (Version actuelle) – [Effectuer une requête] paolo
Ligne 7: Ligne 7:
  
 Ici, nous nous concentrons uniquement sur l'**API Fetch** mais il existe également des libs comme **Axios** qui ajoute une couche d'abstraction sur **Fetch**, simplifiant la syntaxe, ... Ici, nous nous concentrons uniquement sur l'**API Fetch** mais il existe également des libs comme **Axios** qui ajoute une couche d'abstraction sur **Fetch**, simplifiant la syntaxe, ...
-### Effectuer une requête+### Préparer une requête
  
-Nous avons une application routée avec des pages **Login** et **Home**. Et si on essayait d'effectuer une requête de connexion ?+Nous avons une application routée avec des pages **Login** et **Home**. Et si on essayait de préparer une requête de connexion ?
  
 En ce qui concerne le **Router API**, veuillez vous référer à la documentation **Back**, et pour le traitement des requêtes d'authentification, à celle de **SmartAuth**. En ce qui concerne le **Router API**, veuillez vous référer à la documentation **Back**, et pour le traitement des requêtes d'authentification, à celle de **SmartAuth**.
Ligne 16: Ligne 16:
 const request = { const request = {
     method: "POST",     method: "POST",
-    body: { email, password },+    body: loginData,
     headers: {     headers: {
         Accept: "application/json",         Accept: "application/json",
         "Content-Type": "application/json",         "Content-Type": "application/json",
-    },+    }
 }; };
  
 fetch(`${API_URL}/login`, request) fetch(`${API_URL}/login`, request)
     .then(response => response.json())     .then(response => response.json())
-    .then(json => { +    .then(json => console.log(json.data))
-        const { data } = json; +
-        const { user } = data; +
-         +
-        localStorage.setItem("user", JSON.stringify(user)); +
-    })+
     .catch(error => console.error(error));     .catch(error => console.error(error));
 ``` ```
 +Pour savoir comment récupérer la variable d'environnement ''API_URL'', veuillez vous référer à la documentation de l'astuce **Utiliser les variables d'environnement**
 +.
 +### Effectuer une requête
  
-Pour savoir comment importer la variable d'environnement **API_URL**, veuillez vous référer à la documentation **Variables d'environnement**.+Il y a deux moyens d'effectuer uen requête api:
  
 +  * Au sein d'un ''useEffect'' (Documenation [useEffect](https://react.dev/reference/react/useEffect))
  
 +```
 +useEffect(() => {
 +    // request
 +}, []);
 +```
  
-Pour commencer il faudrait rajouter une fonction qui s'effectue lorsque le formulaire est soumis.+  * Lors d'un événement **React** (''onClick'' d'un ''button'' par exemple)
  
 ``` ```
 +<button onClick={() => { 
 +    // request
 +}}>
 +    Do an action
 +</button>
 +```
 +
 +Dans notre cas, la requête doit s'effectuer lorsque le formulaire est soumis (lorsque le bouton de soumission est cliqué).
 +
 +Documentation [FormData](https://developer.mozilla.org/fr/docs/Web/API/FormData)
 +
 +```
 +// src/components/pages/Login/index.jsx
 +
 import { Input } from "../form/Input"; import { Input } from "../form/Input";
 +import { API_URL } from "../../../utils/constants/vite;
  
 export const Login = () => { export const Login = () => {
     const handleFormOnSubmit = (e) => {     const handleFormOnSubmit = (e) => {
 +        e.preventDefault() // empêche le comportement par défaut du formulaire
                  
 +        const data = new FormData(e.target)
 +        const loginData = Object.fromEntries(data.entries());
                  
-        // Requête API+        // request
     };     };
          
Ligne 78: Ligne 100:
 }; };
 ``` ```
 +
 +Nous savons désormais comment fonctionnent les requêtes API. Il s'agirait maintenant d'utiliser les données reçues et notamment de les stocker. On y vient, c'est le prochain point !