Maîtriser Async/Await en JavaScript: Guide Complet 2026

Maîtriser Async/Await en JavaScript: Guide Complet 2026

Async/await a révolutionné la programmation asynchrone en JavaScript. Voici comment maîtriser cette puissance.

Les Bases

Qu'est-ce qu'une Promise?

const promesse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Succès!");
}, 1000);
});

promesse.then(resultat => {
console.log(resultat); // "Succès!"
});

Async/Await

async function obtenerDonnees() {
try {
const reponse = await fetch('https://api.exemple.com/data');
const donnees = await reponse.json();
return donnees;
} catch (erreur) {
console.error('Erreur:', erreur);
}
}

// Utilisation
const donnees = await obtenirDonnees();

Gestion des Erreurs Correctement

// ❌ Mauvais
async function mauvais() {
const data = await fetch(url); // Et si erreur?
}

// ✅ Bon
async function bon() {
try {
const response = await fetch(url);

if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}

const data = await response.json();
return data;
} catch (erreur) {
console.error('Erreur API:', erreur);
throw erreur; // Propager l'erreur
}
}

Paralléliser les Requêtes

// ❌ Séquentiel (lent!)
const user = await getUser(1);
const posts = await getPosts(user.id);
const comments = await getComments(posts[0].id);

// ✅ Parallèle (rapide!)
const [user, posts, comments] = await Promise.all([
getUser(1),
getPosts(userId),
getComments(postId)
]);

Timeout pour les Requêtes Longues

function avecTimeout(promesse, ms) {
return Promise.race([
promesse,
new Promise((_, reject) =>
setTimeout(() => reject(new Error('Timeout')), ms)
)
]);
}

// Utilisation
try {
const data = await avecTimeout(fetch(url), 5000);
} catch (e) {
console.error('Requête trop lente');
}

Boucles avec Async

// ❌ Appels parallèles non contrôlés
const items = [1, 2, 3, 4, 5];
items.forEach(async (id) => {
await saveItem(id); // Pas attendu!
});

// ✅ Séquentiel
for (const id of items) {
await saveItem(id);
}

// ✅ Parallèle controlé
const resultats = await Promise.all(
items.map(id => saveItem(id))
);

Retry Logic

async function avecRetry(fn, retries = 3, delai = 1000) {
for (let i = 0; i < retries; i++) {
try {
return await fn();
} catch (erreur) {
if (i === retries - 1) throw erreur;
await new Promise(r => setTimeout(r, delai * (i + 1)));
}
}
}

// Utilisation
const donnees = await avecRetry(
() => fetch(url).then(r => r.json()),
3,
1000
);

Async Générateurs

async function* listerUtilisateurs(pageSize = 10) {
let page = 1;

while (true) {
const response = await fetch(`/api/users?page=${page}`);
const users = await response.json();

if (users.length === 0) break;

for (const user of users) {
yield user;
}

page++;
}
}

// Utilisation
for await (const user of listerUtilisateurs()) {
console.log(user);
}

Bonnes Pratiques

Toujours attendez les promises - Ne pas oublier await
Gestion d'erreurs - Utilisez try/catch
Paralléliser quand possible - Promise.all()
Timeout sur les requêtes - Évitez les hangs infinis
Lisez les logs - Les erreurs async peuvent être cachées