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 14:32] – paolofront:requetes_api [2025/09/29 16:45] (Version actuelle) – [Effectuer une requête] paolo
Ligne 4: Ligne 4:
 Documentation [Axios](https://axios-http.com/) 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.+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, ...+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, ... 
 +### Préparer une requête
  
 +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**.
 +
 +```
 +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 ### 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 !