Différences

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

--- front:requetes_api [2025/09/25 15:15] – [Effectuer une requête] paolo
+++ front:requetes_api [Date inconnue] (Version actuelle) – supprimée - modification externe (Date inconnue) 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
-# Requêtes Api
-Documentation [API Fetch](https://developer.mozilla.org/fr/docs/Web/API/Fetch_API)
-Documentation [Axios](https://axios-http.com/)
-Pour effectuer des requêtes serveur directement depuis le navigateur, **JavaScript** met à disposition l'**API Fetch**. Celle-ci permet d'effectuer des opérations telles que **GET**, **POST**, **PUT**, **DELETE**, ... de manière totalement asynchrone.
-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
-Nous avons une application routée avec des pages **Login** et **Home**. Et si on essayait d'effectuer 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**.
-```
-const request = {
-    method: "POST",
-    body: { email, password },
-    headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json",
-    },
-};
-fetch(`${API_URL}/login`, request)
-    .then(response => response.json())
-    .then(json => {
-        const { data } = json;
-        const { user } = data;
-        localStorage.setItem("user", JSON.stringify(user));
-    })
-    .catch(error => console.error(error));
-```
-Il faudrait maintenant rajouter une fonction qui effectcue la requête lorsque le formulaire est soumis.
-```
-import { Input } from "../form/Input";
-export const Login = () => {
-    const handleFormOnSubmit = (e) => {
-        // Requête API
-    };
-    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>
-    );
-};
-```