Requêtes Api

Documentation API Fetch
Documentation Axios

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, …

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 .

Il y a deux moyens d'effectuer uen requête api:

• Au sein d'un useEffect (Documenation 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

// src/components/pages/Login/index.jsx

import { Input } from "../form/Input";

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 !