Chapitre 8 : Les événements

1. Qu'est-ce que l'asynchronisme ?

L'asynchronisme permet d'exécuter du code sans bloquer le reste du programme. Essentiel pour les opérations longues (requêtes réseau, timers, etc.).

2. Callbacks

Fonction passée en paramètre, exécutée plus tard :

// setTimeout : exécute après un délai
setTimeout(function() {
    console.log("Exécuté après 2 secondes");
}, 2000);

// setInterval : exécute répétitivement
let compteur = 0;
let interval = setInterval(function() {
    compteur++;
    console.log(compteur);
    if (compteur === 5) {
        clearInterval(interval); // Arrête l'intervalle
    }
}, 1000);

3. Promises (Promesses)

Représente une valeur qui sera disponible dans le futur :

Créer une Promise

let maPromesse = new Promise((resolve, reject) => {
    let succes = true;

    setTimeout(() => {
        if (succes) {
            resolve("Opération réussie !");
        } else {
            reject("Erreur !");
        }
    }, 1000);
});

Utiliser une Promise

maPromesse
    .then(resultat => {
        console.log(resultat); // "Opération réussie !"
    })
    .catch(erreur => {
        console.error(erreur);
    })
    .finally(() => {
        console.log("Terminé");
    });

4. async / await

Syntaxe plus lisible pour les Promises :

// Fonction asynchrone
async function chargerDonnees() {
    try {
        let resultat = await maPromesse;
        console.log(resultat);
    } catch (erreur) {
        console.error(erreur);
    }
}

chargerDonnees();

Exemple pratique

function attendre(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
    console.log("Début");
    await attendre(2000);
    console.log("Après 2 secondes");
    await attendre(1000);
    console.log("Après 3 secondes au total");
}

demo();

5. Fetch API

Pour faire des requêtes HTTP :

GET Request

fetch("https://api.example.com/users")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error("Erreur:", error);
    });

Avec async/await

async function chargerUtilisateurs() {
    try {
        let response = await fetch("https://api.example.com/users");
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Erreur:", error);
    }
}

chargerUtilisateurs();

POST Request

async function creerUtilisateur() {
    try {
        let response = await fetch("https://api.example.com/users", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                nom: "Dupont",
                email: "dupont@example.com"
            })
        });

        let data = await response.json();
        console.log("Utilisateur créé:", data);
    } catch (error) {
        console.error("Erreur:", error);
    }
}

6. Promise.all()

Exécuter plusieurs Promises en parallèle :

let promise1 = fetch("https://api.example.com/users");
let promise2 = fetch("https://api.example.com/posts");
let promise3 = fetch("https://api.example.com/comments");

Promise.all([promise1, promise2, promise3])
    .then(responses => {
        return Promise.all(responses.map(r => r.json()));
    })
    .then(data => {
        console.log("Users:", data[0]);
        console.log("Posts:", data[1]);
        console.log("Comments:", data[2]);
    })
    .catch(error => {
        console.error("Erreur:", error);
    });

7. Exercice pratique

// Simuler un chargement de données
function chargerDonnees(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (id > 0) {
                resolve({ id: id, nom: `User ${id}` });
            } else {
                reject("ID invalide");
            }
        }, 1000);
    });
}

// Utilisation avec async/await
async function afficherUtilisateur(id) {
    try {
        console.log("Chargement...");
        let user = await chargerDonnees(id);
        console.log("Utilisateur:", user);
    } catch (error) {
        console.error("Erreur:", error);
    }
}

afficherUtilisateur(1);

// Charger plusieurs utilisateurs
async function chargerPlusieurs() {
    try {
        let users = await Promise.all([
            chargerDonnees(1),
            chargerDonnees(2),
            chargerDonnees(3)
        ]);
        console.log("Tous les utilisateurs:", users);
    } catch (error) {
        console.error("Erreur:", error);
    }
}

chargerPlusieurs();