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: { 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));

Pour savoir comment importer la variable d'environnement API_URL, veuillez vous référer à la documentation Variables d'environnement.

Pour commencer il faudrait rajouter une fonction qui s'effectue 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>
    );
};