async/await et gestion des erreurs
Écrivez des fonctions async avec le mot-clé await, entourez les appels attendus de blocs try/catch et comprenez comment async/await constitue un sucre syntaxique au-dessus des Promises.
async/await et gestion des erreurs est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que async/await ?
async/await est un sucre syntaxique au-dessus des promesses. Une fonction async renvoie toujours une promesse. Le mot-clé await met la fonction en pause jusqu'à ce que la promesse attendue soit réglée. Le code semble synchrone, mais s'exécute de manière asynchrone.
Fonction async
Ajoutez le mot-clé async avant une déclaration ou une expression de fonction. La fonction enveloppe désormais implicitement sa valeur de retour dans une promesse.
async function fetchUser(id) {
// implicitly returns a Promise
return { id, name: 'Alice' };
}
// Equivalent to:
function fetchUser(id) {
return Promise.resolve({ id, name: 'Alice' });
}await — mettre en pause pour les promesses
await ne peut être utilisé qu'à l'intérieur d'une fonction async. Il met l'exécution en pause jusqu'à la résolution de la promesse et renvoie la valeur résolue. Les autres tâches de la boucle d'événements continuent de s'exécuter.
async function loadProfile(id) {
const user = await fetchUser(id); // waits for Promise
const posts = await fetchPosts(user.id); // waits again
return { user, posts };
}Attentes séquentielles ou parallèles
Attendre les tâches séquentiellement est facile à lire, mais lent si ces tâches ne dépendent pas les unes des autres. Utilisez Promise.all() pour attendre plusieurs tâches indépendantes en parallèle.
// Sequential (slow if tasks are independent):
const user = await fetchUser(id);
const settings = await fetchSettings(id); // waits for user unnecessarily
// Parallel (fast):
const [user, settings] = await Promise.all([
fetchUser(id),
fetchSettings(id),
]);try/catch pour gérer les erreurs
Placez les appels attendus dans un bloc try/catch pour gérer les rejets. Le bloc catch reçoit la raison du rejet sous la forme d'un objet d'erreur.
async function saveUser(data) {
try {
const response = await fetch('/api/users', {
method: 'POST',
body: JSON.stringify(data),
headers: { 'Content-Type': 'application/json' }
});
if (!response.ok) throw new Error(`Server error ${response.status}`);
return await response.json();
} catch (err) {
console.error('Save failed:', err.message);
throw err; // re-throw so caller can handle
}
}await au niveau supérieur
Dans les modules ES (et non CommonJS), vous pouvez utiliser await au niveau supérieur sans l'envelopper dans une fonction async. Cette possibilité est utile pour l'initialisation des modules.
// module.js (ES module)
const config = await fetch('/config.json').then(r => r.json());
export const API_URL = config.apiUrl;async/await avec forEach — piège à éviter
Array.forEach() n'attend pas les fonctions de rappel async. Utilisez for...of pour une itération asynchrone séquentielle, ou Promise.all(arr.map(...)) pour une exécution en parallèle.
// WRONG — forEach doesn't await:
items.forEach(async (item) => {
await processItem(item); // runs but forEach doesn't wait
});
// CORRECT — sequential:
for (const item of items) {
await processItem(item);
}
// CORRECT — parallel:
await Promise.all(items.map(item => processItem(item)));Objets d'erreur et erreurs personnalisées
Lancez toujours des objets représentant des erreurs (et non des chaînes) afin de préserver les traces de pile. Créez des classes d'erreur personnalisées pour les erreurs propres à un domaine, que les appelants pourront intercepter selon leur type.
class NetworkError extends Error {
constructor(message, status) {
super(message);
this.name = 'NetworkError';
this.status = status;
}
}
try {
const res = await fetch(url);
if (!res.ok) throw new NetworkError(`Failed`, res.status);
} catch (err) {
if (err instanceof NetworkError && err.status === 401) {
redirectToLogin();
} else {
throw err;
}
}finally avec async/await
Le bloc finally s'exécute que le bloc try ait réussi ou échoué, tout comme .finally() sur une promesse. Utilisez-le pour libérer des ressources ou masquer les indicateurs de chargement.
async function loadData() {
setLoading(true);
try {
const data = await fetch('/api/data').then(r => r.json());
setData(data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false); // always runs
}
}IIFE asynchrone pour les points d'entrée des modules
Enveloppez le point d'entrée d'un script dans une IIFE async lorsque vous ne pouvez pas utiliser await au niveau supérieur.
(async () => {
const data = await fetchInitialData();
renderApp(data);
})();AbortController pour l'annulation
Transmettez le signal d'un AbortController à l'opération de récupération pour annuler une requête en cours. Intercepter séparément AbortError évite d'afficher une erreur à l'utilisateur.
const controller = new AbortController();
try {
const data = await fetch(url, { signal: controller.signal }).then(r => r.json());
setData(data);
} catch (err) {
if (err.name !== 'AbortError') setError(err.message);
}
// Cancel:
controller.abort();Vérification rapide
Quelle construction gère correctement les erreurs d'une promesse attendue ?
Récapitulatif : async/await
Les fonctions async renvoient toujours des promesses. await met l'exécution en pause jusqu'à ce qu'une promesse soit réglée. Utilisez try/catch pour gérer les erreurs. Pour les opérations en parallèle, utilisez Promise.all(). Évitez await dans forEach : utilisez for...of ou Promise.all. AbortController annule les requêtes en cours. L'attente au niveau supérieur fonctionne dans les modules ES.
Questions Fréquemment Posées
La leçon « async/await et gestion des erreurs » est-elle gratuite ?
Oui — le texte complet de « async/await et gestion des erreurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « async/await et gestion des erreurs » ?
Écrivez des fonctions async avec le mot-clé await, entourez les appels attendus de blocs try/catch et comprenez comment async/await constitue un sucre syntaxique au-dessus des Promises. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Frontend Academy ?
Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « async/await et gestion des erreurs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?
Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- La boucle d’événements : pile d’appels, file et microtâches
- Rappels et enfer des rappels
- Promises : then, catch, finally et Promise.all
- async/await et gestion des erreurs