Les Promises

JavaScript : Introduction à l'asynchrone

En programmation, on dit asynchrone l'exécution différée d'une instruction qui serait normalement bloquante.

Une exécution synchrone est une exécution qui nous parait la plus intuitive :

Les instructions sont exécutées dans l'ordre de haut en bas
Une instruction attend la fin de la précédente avant de démarrer

JavaScript est théoriquement synchrone. Théoriquement parce que certaines fonctions très utilisées ne le sont pas et que parfois les accès concurrents (plusieurs fonctions / plusieurs scripts essaient d'écrire en même temps) à la console et les caprices du navigateur utilisé peuvent perturber la synchronicité.

Ces problèmes se sont plutôt améliorés depuis 2015 - 2016, mais on a encore parfois quelques surprises.

La gestion de l'asynchrone par JS

JavaScript place les instructions asynchrones dans une file d'éxécution à part (Task Queue). Il les éxécute les unes après les autres et les envoie au fur et à mesure dans le fil d'éxécution principal sans bloquer le reste du programme.

Exemple synchrone vs asynchrone

// synchrone
function helloWorld() 
{
    console.log("Hello World !");
}
helloWorld();  // Hello World !

// asynchrone
function helloWorld()
{
    /* SetTimeout permet de créer des timers
    * Ici cela dit : fait le console.log dans 1000 ms => 1s */
    setTimeout(() => console.log('Hello world !'), 1000);
    
    console.log("You should see me before seing Hello World !");
}

helloWorld(); // You should see me before seing Hello World !  Hello world !

JavaScript: Les Promise

Une promise est une sorte d'objet à qui l'on transmet deux fonctions qui sont appelées lors de son exécution :

resolve: si tout s'est bien passé
reject: si une erreur s'est produite

et qui retourne deux fonctions :

then si tout s'est bien passé
catch si une erreur s'est produite

Exemple

function testNumber(number)
{
    // Ici je veux que ma Promise vérifie qu'un nombre
    // est bien inférieur ou égal à 100
    return new Promise((resolve, reject) => {
       if(number <= 100)
       {
           // si tout va bien : j'appelle resolve
           resolve("OK");
       }
       else
       {
           // si il y a un problème j'appelle reject
           reject("Number too big");
       }
    });
}

Si ensuite, je veux appeler ma fonction :

/*
* response : c'est ce que renvoie resolve ici c'est donc "OK"
* error : c'est ce que renvoie reject ici c'est donc "Number too big"
* */

testNumber(9)
    .then(response => console.log(response))
    .catch(error => console.log(error));

// ⬆️ Ok

testNumber(999)
    .then(response => console.log(response))
    .catch(error => console.log(error));

// ⬆️ "Number too big"

15 January 2026