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/29 10:43] – [Effectuer une requête] paolofront:requetes_api [2025/09/29 16:45] (Version actuelle) – [Effectuer une requête] paolo
Ligne 16: Ligne 16:
 const request = { const request = {
     method: "POST",     method: "POST",
-    body: values,+    body: loginData,
     headers: {     headers: {
         Accept: "application/json",         Accept: "application/json",
Ligne 28: Ligne 28:
     .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**.+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 ### Effectuer une requête
  
 Il y a deux moyens d'effectuer uen requête api: Il y a deux moyens d'effectuer uen requête api:
  
-  * Au sein d'un ''useEffect'' (Documenation [useEffect]())+  * Au sein d'un ''useEffect'' (Documenation [useEffect](https://react.dev/reference/react/useEffect))
  
 ``` ```
Ligne 41: Ligne 42:
 ``` ```
  
-  * Lors d'un événement React (''onClick'' d'un ''button'' par exemple)+  * Lors d'un événement **React** (''onClick'' d'un ''button'' par exemple)
  
 ``` ```
Ligne 51: Ligne 52:
 ``` ```
  
-Il faudrait maintenant rajouter une fonction qui effectcue la requête lorsque le formulaire est soumis.+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) 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 = () => {
Ligne 63: Ligne 67:
                  
         const data = new FormData(e.target)         const data = new FormData(e.target)
-        const values = Object.fromEntries(data.entries());+        const loginData = Object.fromEntries(data.entries());
                  
-        // Requête API+        // request
     };     };
          
Ligne 97: Ligne 101:
 ``` ```
  
-On peut désormais effectué des requêtes API. Maintenant, il s'agirait d'utiliser les données reçues et notamment de les stocker. On y vient, c'est le prochain point !+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 !