Frontend Academy · Leçon

Promises : then, catch, finally et Promise.all

Créez et enchaînez des Promises, gérez les erreurs dans les blocs catch, effectuez le nettoyage dans finally et exécutez plusieurs Promises en parallèle avec Promise.all.

Leçon 3 sur 413 étapes

Promises : then, catch, finally et Promise.all est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 qu'une promesse ?

Une promesse représente une valeur qui sera disponible à l'avenir. Il s'agit d'un objet qui peut se trouver dans l'un de trois états : en attente (état initial), accomplie (résolue avec une valeur) ou rejetée (échouée avec une raison). Une fois réglé, l'état d'une promesse est définitif.

Créer une promesse

Créez une promesse avec le constructeur new Promise(executor). La fonction d'exécution reçoit les fonctions de rappel resolve et reject. Appelez resolve avec la valeur de réussite ou reject avec une erreur.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() — gérer la réussite

promise.then(onFulfilled) enregistre une fonction de rappel qui s'exécute lorsque la promesse est accomplie. Elle reçoit la valeur résolue. .then() renvoie une nouvelle promesse, ce qui permet de créer une chaîne.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() — gérer les erreurs

promise.catch(onRejected) gère les rejets. Placé à la fin d'une chaîne, il intercepte toute erreur provenant de n'importe quelle étape précédente.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() — toujours s'exécuter

promise.finally(onFinally) s'exécute que la promesse soit accomplie ou rejetée. C'est idéal pour le nettoyage : masquer un indicateur de chargement, libérer un verrou ou journaliser des données analytiques.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Chaînage des promesses — renvoyer des valeurs

Renvoyez une valeur depuis .then() : elle devient la valeur résolue du .then() suivant. Renvoyez une nouvelle promesse pour enchaîner des opérations asynchrones de manière séquentielle.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() — exécuter en parallèle

Promise.all([p1, p2, p3]) attend que toutes les promesses soient résolues et renvoie un tableau de résultats dans le même ordre. Si une promesse est rejetée, l'ensemble est immédiatement rejeté.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() — ne pas échouer au premier rejet

Promise.allSettled() attend que toutes les promesses soient réglées (résolues ou rejetées) et renvoie un tableau d'objets de résultat contenant {statut, valeur} ou {statut, raison}. Cette méthode est utile lorsque vous ne voulez pas qu'un seul échec fasse perdre tous les résultats.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() et Promise.any()

Promise.race() se résout ou est rejetée avec la première promesse réglée. Promise.any() se résout avec la première promesse accomplie (ignore les rejets et n'est rejetée que si toutes les promesses sont rejetées). Ces méthodes sont utiles pour les délais d'expiration et la redondance.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Créer des promesses déjà réglées

Promise.resolve(value) crée une promesse déjà accomplie avec value. Promise.reject(error) crée une promesse déjà rejetée. Ces méthodes sont utiles pour les tests et les fonctions d'adaptation.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Événements de rejet non géré

Si une promesse est rejetée sans .catch(), elle devient un rejet non géré. Les navigateurs modernes et Node.js émettent des avertissements. Ajoutez toujours un .catch() ou utilisez try/catch avec async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Vérification rapide

Quelle méthode statique exécute plusieurs promesses en parallèle et se résout avec un tableau contenant tous les résultats ?

Réponds-y dans la leçon interactive

Récapitulatif : les promesses

.then() pour gérer la réussite, .catch() pour les erreurs et .finally() pour le nettoyage. Les chaînes transmettent les valeurs. Promise.all() exécute les opérations en parallèle. Promise.allSettled() tolère les échecs partiels. Promise.race() permet d'obtenir le résultat le plus rapide. Gérez toujours les rejets. Le code moderne utilise async/await comme sucre syntaxique au-dessus des promesses.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 41
Leçons: 163

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Promises : then, catch, finally et Promise.all » est-elle gratuite ?

Oui — le texte complet de « Promises : then, catch, finally et Promise.all » 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 « Promises : then, catch, finally et Promise.all » ?

Créez et enchaînez des Promises, gérez les erreurs dans les blocs catch, effectuez le nettoyage dans finally et exécutez plusieurs Promises en parallèle avec Promise.all. 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 3 sur 4.

Combien de temps prend la leçon « Promises : then, catch, finally et Promise.all » ?

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

← Retour à Frontend Academy