Exemple : Javascript Fetch API

Dans l'exemple suivant, j'utilise reqres.in

C'est une API qui permet d'envoyer et de recevoir des fausses données.

/*--------- EXEMPLE 1 --------- */

/* La requête fetch la plus simple */
fetch("https://reqres.in/api/users")
    .then(response => response.json()) //retourne la réponse au format JSON
    .then(json => console.log(json));
    
    
    
/*--------- EXEMPLE 2 --------- */

/* L'utilisateur n'existe pas */
fetch("https://reqres.in/api/users/23")
    .then(response => {
        /* Si la réponse est OK */
        if (response.ok) {
            console.log(response);
        } else {
            console.log("Erreur l'utilisateur n'existe pas...")
        }
    });
    
    
/*--------- EXEMPLE 3 --------- */    

fetch("https://reqres.in/api/users")
    .then(response => response.json())
    .then(json => {
        /* On prend le premier utilisateur dans la liste */
        drawUser(json.data[0]);
    });


/* Affiche l'utilisateur dans la page web*/
function drawUser(user) {
    /* On utilise les gabarits */
    document.body.innerHTML = `<img src="${user.avatar}" alt="Avatar de ${user.first_name} ${user.last_name}">
                               <h2>${user.first_name} ${user.last_name}</h2>
                               <h3>Email : ${user.email}</h3>`;
}



/*--------- EXEMPLE 4 --------- */

/* Ajoute un utilisateur */
fetch("https://reqres.in/api/users", {
    method: "POST",
    /* Type des données envoyées */
    headers: {
        "Content-type": "application/json"
    },
    /* Convertir le JSON en chaîne de caractères */
    body: JSON.stringify({
        name: "Un utilisateur"
    })
})
.then(response => response.json())
.then(json => console.log(json));