# 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, ...
### 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

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 !