Différences

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

--- front:requetes_api [2025/09/25 14:41] – [Effectuer une requête] paolo
+++ front: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, ...
-### 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**.
-Pour commencer il faudrait rajouter une fonction qui s'effectue lorsque le bouton de connexion est clické.
+```
+const request = {
+    method: "POST",
+    body: loginData,
+    headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+    }
+};
+fetch(`${API_URL}/login`, request)
+    .then(response => response.json())
+    .then(json => console.log(json.data))
+    .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
+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
+}, []);
+```
+  * 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 { API_URL } from "../../../utils/constants/vite;
+export const Login = () => {
+    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());
+        // request
+    };
+    return (
+        <div className="fixed inset-0 bg-white flex justify-center items-center p-10">
+            <form
+                onSubmit={handleFormOnSubmit}
+                className="flex flex-col gap-6"
+            >
+                <Input
+                    id="email"
+                    name="email"
+                    label="Adresse email"
+                    type="email"
+                    placeholder="Tapez votre adresse mail ici..."
+                />
+                <Input
+                    id="password"
+                    name="password"
+                    label="Mot de passe"
+                    type="password"
+                    placeholder="●●●●●●●●"
+                />
+                <button className="shadow-md bg-blue-500 text-white font-semibold text-xl uppercase tracking-wide rounded-full px-8 py-4 active:brightness-90 duration-100">
+                    Connexion
+                </button>
+            </form>
+        </div>
+    );
+};
+```
+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 !