Promise JavaScript : Tutoriel débutant, les bases !

En JavaScript, il arrive un moment où le code ne se contente plus d’enchaîner des lignes les unes après les autres. Il doit attendre une réponse, charger des données, interroger un serveur, lire un fichier ou patienter quelques secondes. Et c’est souvent à ce moment précis que tout commence à devenir flou pour les débutants. C’est exactement pour résoudre ce problème qu’on utilise une promise en JavaScript.

• Comprendre comment JavaScript gère le temps et l’asynchrone pour écrire un code plus fiable
• Gagner en clarté face aux promises afin de lire, écrire et déboguer du JavaScript moderne
• Poser des bases solides pour progresser vers des usages concrets du JavaScript, notamment les appels API et le code asynchrone

Les promises peuvent sembler intimidantes au premier abord, mais une fois comprises, elles changent complètement votre façon d’écrire du code. Dans ce tutoriel JavaScript, vous allez découvrir ce qu’est réellement une promise, pourquoi elle est indispensable en JavaScript moderne, et surtout comment l’utiliser facilement.

👉 Les Promises s’inscrivent dans un concept plus large : l’asynchronisme en JavaScript. Si vous débutez totalement, commencez par cette vue d’ensemble.

Pourquoi JavaScript a besoin des promises

Avant de parler de promise, il faut comprendre un point fondamental du fonctionnement de JavaScript. JavaScript est un langage dit asynchrone et non bloquant. Concrètement, cela signifie qu’il ne s’arrête pas pour attendre qu’une tâche longue se termine.

Imaginons une situation simple. Vous demandez à JavaScript d’aller chercher des données sur un serveur. Cette opération peut prendre une seconde, deux secondes, parfois plus. Pendant ce temps-là, JavaScript ne va pas rester immobile à attendre. Il continue d’exécuter le reste du code.

Le problème apparaît quand vous avez besoin du résultat avant de continuer.

Prenons un exemple volontairement simple :

let donnees = recupererDonnees();
console.log(donnees);

Intuitivement, on s’attend à voir les données s’afficher. Mais si recupererDonnees() met du temps à répondre, console.log s’exécute immédiatement, souvent avant que les données n’arrivent. Résultat : undefined, ou pire, une erreur.

C’est là que les promises entrent en scène !

Une analogie simple pour comprendre une promise

Une promise, en JavaScript, c’est littéralement une promesse. Pas une promesse vague, mais une promesse très précise :

“Je vous promets que je vous donnerai une réponse plus tard. Soit ça marche, soit ça échoue.”

Imaginez que vous commandez un colis en ligne. Le vendeur ne vous donne pas le colis immédiatement, mais il vous promet une chose : le colis arrivera, ou vous serez remboursé.

Pendant ce temps, vous pouvez faire autre chose. Vous n’êtes pas bloqué devant la porte à attendre le livreur. Une promise fonctionne exactement de la même façon.

Qu’est-ce qu’une promise en JavaScript

Techniquement, une promise JavaScript est un objet qui représente une valeur qui n’est pas encore disponible, mais qui le sera plus tard.

Cette promise peut être dans trois états possibles :

• en attente, tant que l’opération n’est pas terminée
• tenue, quand l’opération réussit
• rejetée, quand quelque chose se passe mal

Vous n’avez pas besoin de retenir ces termes par cœur. L’idée essentielle est la suivante : une promise encapsule une action asynchrone et vous permet de réagir quand elle est terminée.

Créer sa première promise

Passons maintenant à la pratique, tranquillement.

Voici à quoi ressemble une promise basique :

let maPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Tout s'est bien passé");
    }, 2000);
});

On utilise le mot-clé new Promise. JavaScript attend une fonction en paramètre. Cette fonction reçoit deux arguments : resolve et reject.

Ces deux mots sont très importants.

• resolve sert à dire que tout s’est bien passé.
• reject sert à dire que quelque chose a échoué.

Dans cet exemple, on simule une action qui prend deux secondes grâce à setTimeout. Après ces deux secondes, on appelle resolve avec un message.

À ce moment précis, la promise est considérée comme réussie.

Consommer une promise avec then

Créer une promise, c’est bien. Mais l’intérêt réel est de récupérer son résultat.

Pour cela, JavaScript fournit la méthode then.

maPromise.then((resultat) => {
    console.log(resultat);
});

Ce code signifie :

“Quand la promise est terminée avec succès, exécute cette fonction.”

Deux secondes plus tard, le message s’affiche dans la console.

Ce point est fondamental : le code à l’intérieur de then ne s’exécute que lorsque la promise est résolue. Pendant ce temps-là, JavaScript continue de vivre sa vie.

Gérer les erreurs avec catch

Que se passe-t-il si tout ne se passe pas comme prévu ? C’est là qu’intervient reject.

Modifions légèrement notre promise :

let maPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("Une erreur est survenue");
    }, 2000);
});

Cette fois, la promise échoue volontairement.

Pour gérer ce cas, on utilise catch :

maPromise
    .then((resultat) => {
        console.log(resultat);
    })
    .catch((erreur) => {
        console.log(erreur);
    });

• Si la promise réussit, then est exécuté.
• Si elle échoue, catch prend le relais.

C’est une énorme avancée par rapport aux anciens systèmes basés uniquement sur des callbacks, souvent difficiles à lire et à maintenir.

Beaucoup de développeurs débutants pensent que les promises sont compliquées parce qu’elles arrivent souvent trop tôt dans l’apprentissage. En réalité, elles ne sont pas difficiles. Elles sont simplement nouvelles.

C’est un peu comme conduire sur une autoroute pour la première fois. Au début, tout va trop vite, il y a trop de panneaux, trop d’informations. Puis, après quelques trajets, tout devient naturel. Les promises suivent exactement le même chemin.

Pourquoi les promises sont devenues indispensables

Aujourd’hui, presque tout en JavaScript moderne repose sur les promises. Les appels API, le chargement de données, les requêtes réseau, les frameworks modernes, tout s’appuie sur ce mécanisme.

Comprendre les promises, c’est donc franchir un cap important. Ce n’est pas seulement apprendre une syntaxe, c’est comprendre comment JavaScript gère le temps.

Enchaîner plusieurs actions avec les promises

Jusqu’ici, nous avons vu une promise isolée. Mais dans la vraie vie, une seule action asynchrone est rarement suffisante. Très souvent, vous aurez besoin d’enchaîner plusieurs opérations, l’une après l’autre, en utilisant le résultat de la précédente.

C’est précisément là que les promises montrent toute leur puissance.

Le principe fondamental de l’enchaînement

La méthode then ne sert pas seulement à récupérer un résultat. Elle peut aussi retourner une nouvelle promise. Et c’est ce détail qui permet d’enchaîner des traitements de manière fluide et lisible.

Regardons un exemple simple.

let promesse = new Promise((resolve) => {
    setTimeout(() => {
        resolve(10);
    }, 1000);
});

promesse
    .then((nombre) => {
        return nombre * 2;
    })
    .then((resultat) => {
        console.log(resultat);
    });

Prenons le temps de comprendre ce qui se passe.

• La première promise retourne le nombre 10 après une seconde.
• Le premier then reçoit ce nombre, le multiplie par 2 et retourne le résultat.
• Le deuxième then récupère ce nouveau résultat et l’affiche.

Ce qui est important ici, c’est que chaque then attend automatiquement la fin du précédent. Vous n’avez rien de spécial à faire. JavaScript s’occupe de tout.

Pourquoi c’est mieux que les callbacks

Avant les promises, on utilisait très souvent des fonctions imbriquées, appelées callbacks. Le problème, c’est que le code devenait vite illisible.

Voici un exemple volontairement simplifié :

action1(() => {
    action2(() => {
        action3(() => {
            console.log("Terminé");
        });
    });
});

Ce genre de structure est parfois surnommé le “callback hell”. Plus vous ajoutez d’actions, plus le code se décale vers la droite et devient difficile à maintenir.

Avec les promises, ce même enchaînement devient linéaire :

action1()
    .then(action2)
    .then(action3)
    .then(() => {
        console.log("Terminé");
    });

La lecture est naturelle, presque comme une phrase. Et surtout, chaque étape est clairement identifiable.

Une promise peut retourner une autre promise

C’est un point souvent mal compris par les débutants, donc prenons un instant pour bien l’expliquer.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Dans un then, vous pouvez retourner soit une valeur simple, soit une autre promise. JavaScript saura automatiquement attendre la fin de cette nouvelle promise avant de passer à la suite.

function attendreDeuxSecondes() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("Deux secondes écoulées");
        }, 2000);
    });
}

Promise.resolve()
    .then(() => {
        return attendreDeuxSecondes();
    })
    .then((message) => {
        console.log(message);
    });

Ici, le second then n’est exécuté qu’après la fin du délai de deux secondes. Vous n’avez pas besoin de gérer le timing vous-même. La promise le fait pour vous.

Gérer les erreurs dans une chaîne de promises

Un autre avantage énorme des promises, c’est la gestion centralisée des erreurs.

Imaginons que vous ayez plusieurs then à la suite. Si une seule étape échoue, JavaScript saute directement au catch.

Promise.resolve()
    .then(() => {
        throw new Error("Un problème est survenu");
    })
    .then(() => {
        console.log("Ce code ne sera jamais exécuté");
    })
    .catch((erreur) => {
        console.log(erreur.message);
    });

Dès qu’une erreur est levée, la chaîne s’arrête et le catch prend le relais. Cela rend le code beaucoup plus robuste et prévisible.

C’est aussi pour cette raison que les promises sont devenues incontournables dans le développement JavaScript moderne.

Un exemple concret avec une requête serveur

Pour rendre tout cela plus concret, simulons un appel à un serveur.

function chargerUtilisateur() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let succes = true;

            if (succes) {
                resolve({ nom: "Alban", age: 43 });
            } else {
                reject("Impossible de charger l'utilisateur");
            }
        }, 1500);
    });
}

Cette fonction retourne une promise qui simule une requête réseau. Elle réussit ou échoue selon une condition.

Consommons cette promise :

chargerUtilisateur()
    .then((utilisateur) => {
        console.log("Utilisateur chargé :", utilisateur.nom);
        return utilisateur.age;
    })
    .then((age) => {
        console.log("Âge :", age);
    })
    .catch((erreur) => {
        console.log("Erreur :", erreur);
    });

Chaque étape est claire. Vous savez exactement à quel moment les données arrivent et comment elles sont utilisées.

Promise.all : attendre plusieurs promises en même temps

Parfois, vous devez attendre plusieurs opérations asynchrones avant de continuer. C’est très courant lorsque vous chargez plusieurs ressources en parallèle.

JavaScript fournit pour cela Promise.all.

let p1 = Promise.resolve("Première donnée");
let p2 = Promise.resolve("Deuxième donnée");
let p3 = Promise.resolve("Troisième donnée");

Promise.all([p1, p2, p3])
    .then((resultats) => {
        console.log(resultats);
    });

Ici, le then n’est exécuté que lorsque toutes les promises sont résolues. Le résultat est un tableau contenant les valeurs dans le même ordre.

Attention toutefois à un détail important. Si une seule promise échoue, tout le Promise.all échoue. C’est un comportement à connaître pour éviter les surprises.

Promise.race : la première qui gagne

À l’inverse, il existe Promise.race.

Promise.race([p1, p2, p3])
    .then((resultat) => {
        console.log(resultat);
    });

Ici, seule la première promise à se terminer est prise en compte, qu’elle réussisse ou échoue. Les autres sont ignorées.

Ce mécanisme est parfois utilisé pour gérer des délais maximum ou des systèmes de secours.

Les erreurs fréquentes avec une promise

Lorsqu’on débute avec les promises en JavaScript, certaines erreurs reviennent souvent.

• La plus courante consiste à oublier de retourner une valeur ou une promise dans un then. Sans return, la chaîne ne reçoit rien et le comportement devient imprévisible.
• Une autre erreur classique est de penser que le code asynchrone fonctionne comme du code synchrone. Les promises demandent un petit changement de mentalité, mais une fois ce cap franchi, tout devient beaucoup plus clair.

Transition vers JavaScript moderne

Les promises sont la base sur laquelle repose une syntaxe encore plus moderne et plus lisible : async et await. Mais attention, ces mots-clés ne remplacent pas les promises. Ils les utilisent.

Pour bien comprendre async et await, il est indispensable de maîtriser les promises.

Async et await : les promises, mais en plus lisible

Après avoir compris les promises, beaucoup de développeurs découvrent async et await avec un immense soulagement. Non pas parce que les promises étaient mauvaises, mais parce que cette nouvelle syntaxe permet d’écrire du code asynchrone qui ressemble enfin à du code classique.

Il est important de le dire clairement dès le départ : async et await ne remplacent pas les promises. Ils sont simplement une autre manière de les utiliser.

Autrement dit, si vous comprenez les promises, vous comprendrez naturellement async et await.

Le problème que async et await cherchent à résoudre

Même si les chaînes de then sont puissantes, elles peuvent devenir longues à lire lorsque le traitement s’étend sur plusieurs étapes.

Reprenons un exemple déjà vu :

chargerUtilisateur()
    .then((utilisateur) => {
        return verifierPermissions(utilisateur);
    })
    .then((permissions) => {
        return chargerPreferences(permissions);
    })
    .then((preferences) => {
        console.log(preferences);
    })
    .catch((erreur) => {
        console.log(erreur);
    });

Ce code fonctionne parfaitement. Pourtant, visuellement, il reste une succession d’étapes imbriquées mentalement. JavaScript moderne propose une autre écriture, plus naturelle.

Déclarer une fonction async

Le mot-clé async se place devant une fonction. Il indique une chose très simple :
cette fonction retournera automatiquement une promise :

async function maFonction() {
    return "Bonjour";
}

Même si vous retournez une simple chaîne de caractères, JavaScript l’enveloppe automatiquement dans une promise. Cela peut surprendre au début, mais c’est précisément ce qui permet à await de fonctionner.

Utiliser await pour attendre une promise

Le mot-clé await permet de dire à JavaScript :

“Attends que cette promise soit terminée avant de continuer.”

Reprenons notre exemple précédent, mais réécrit avec async et await.

async function afficherPreferences() {
    try {
        let utilisateur = await chargerUtilisateur();
        let permissions = await verifierPermissions(utilisateur);
        let preferences = await chargerPreferences(permissions);

        console.log(preferences);
    } catch (erreur) {
        console.log(erreur);
    }
}

Prenez un instant pour lire ce code.

Il se lit de haut en bas, comme une suite logique d’actions. Chaque ligne attend la précédente. Pourtant, JavaScript reste asynchrone. Il n’est jamais bloqué.

C’est toute la magie de await.

Comprendre try et catch avec async await

Lorsque vous utilisez await, la gestion des erreurs change légèrement. Au lieu d’utiliser .catch(), on utilise un bloc try...catch, très proche de ce que vous connaissez déjà en JavaScript classique.

try {
    let resultat = await unePromise();
    console.log(resultat);
} catch (erreur) {
    console.log(erreur);
}

Si la promise échoue, JavaScript saute directement dans le catch. C’est simple, clair et très lisible, surtout pour les débutants.

Exemple concret avec une requête simulée

Mettons tout ensemble avec un exemple réaliste.

function chargerProduit() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ nom: "Clavier", prix: 49 });
        }, 1000);
    });
}

async function afficherProduit() {
    try {
        let produit = await chargerProduit();
        console.log("Produit :", produit.nom);
        console.log("Prix :", produit.prix, "€");
    } catch (erreur) {
        console.log("Erreur lors du chargement");
    }
}

afficherProduit();

Ici, la promise est totalement invisible à l’utilisation. Pourtant, elle est bien là, en coulisses. C’est ce qui rend async et awaitsi agréables à utiliser.

Les bonnes pratiques avec les promises en JavaScript

Quand vous travaillez avec des promises en JavaScript, certaines habitudes vous feront gagner du temps et éviter des bugs difficiles à comprendre.

• Il est préférable de toujours retourner explicitement une promise dans vos fonctions asynchrones. Cela rend votre code plus prévisible et plus facile à réutiliser.
• Il est également recommandé de centraliser la gestion des erreurs. Que vous utilisiez catch ou try...catch, assurez-vous que chaque scénario d’échec est anticipé. Une promise non gérée peut provoquer des comportements étranges et difficiles à déboguer.
• Enfin, évitez de mélanger excessivement then avec await dans le même bloc de code. Choisissez une approche cohérente pour améliorer la lisibilité.

Les promises dans la vraie vie du développeur JavaScript

Les promises ne sont pas un concept théorique réservé aux tutoriels. Elles sont partout.

• Chaque appel à une API avec fetch repose sur des promises.
• Chaque framework moderne s’appuie sur elles.
• Chaque application web sérieuse en JavaScript les utilise quotidiennement.

Comprendre les promises, c’est donc comprendre le rythme réel du JavaScript moderne. C’est accepter que certaines choses prennent du temps, et apprendre à écrire du code qui s’adapte à cette réalité sans stress.

Ce que vous devez retenir

Si vous avez suivi ce tutoriel depuis le début, vous avez déjà franchi une étape importante. Vous savez maintenant qu’une promise représente une action future. Vous comprenez comment récupérer un résultat, gérer une erreur, enchaîner des opérations et écrire du code asynchrone lisible.

Ce n’est pas une petite victoire. Beaucoup de développeurs abandonnent ou bricolent sans vraiment comprendre. Vous, vous avez pris le temps de poser des bases solides.

Apprendre les promises en JavaScript, ce n’est pas simplement apprendre une nouvelle syntaxe. C’est apprendre à penser différemment le temps, l’attente et l’ordre des actions dans une application web. Au début, cela demande un petit effort mental. Puis, très vite, tout devient plus fluide.

Avec les promises, vous cessez de subir l’asynchrone. Vous commencez à le maîtriser. Vous écrivez un code plus propre, plus lisible et plus fiable. Et surtout, vous gagnez en confiance, ce qui est essentiel quand on progresse en développement.

La prochaine fois que vous verrez une promise, ne la regardez plus comme un obstacle. Voyez-la comme un allié discret, prêt à gérer le temps pour vous pendant que vous vous concentrez sur l’essentiel : créer des applications JavaScript claires, efficaces et agréables à maintenir.

Chapitre suivant : Comparaison entre Async, Await et Promise.

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr