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 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: values,
    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 faudrait maintenant rajouter une fonction qui effectcue la requête lorsque le formulaire est soumis.

Documentation FormData

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 values = Object.fromEntries(data.entries());
        
        // 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>
    );
};

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 !