JavaScript: Promises Explained for Beginners

When I discovered Promises (also called "promesses" in French) a few years ago, I have to admit that I struggled to grasp them right away.

Since I had been working with callbacks for my asynchronous operations for a long time, I didn't really see the difference between the two systems, because deep down, the way they worked seemed more or less the same!

You pass one or more return functions to an asynchronous function, and the latter executes it at the end of the asynchronous operation, it's the same thing.

Except that, in fact, the answer lies somewhere in between the two.

A promise is a "standardized" set of callbacks!

The principle

Let's take as an example a fictitious asynchronous method, based on the Javascript setTimeout(callback, ms) function that we want to use to create a delay in our code.

The callback version of our method would look like this:

//On créé notre méthode qui prend deux callbacks en paramètres
function timer(delay, onSuccess, onError){
  if(delay < 10000){
      setTimeout(onSuccess, delay);
  } else {
      onError("Timer too long");
  }
}

//Puis on teste cette méthode
console.log("Started...")
timer(3000, function(){
    console.log("Finished!");
}, function(e){
    console.error(e);
});

//Le log "Finished!" apparait 3 secondes après, tout fonctionne

This method is correct, it works perfectly, but while the implementation is readable, its usage isn't really intuitive.

How can you tell at a glance which of the first or second callback is the one executed if there is an error, other than by carefully reading the code, or going back to the original method's implementation?

Moreover, if you want to chain timers together, you'll have to stack up the code and therefore the callbacks, which very quickly becomes unreadable and risks causing unfortunate mistakes.

And what if it were possible to create a standardized set of callbacks, intuitive to use and natively handled by the language? Welcome to the wonderful world of Promises!

//On créé la même méthode, mais pas besoin de passer des callbacks, tout va se jouer dans le retour de la fonction
function timerPromise(delay){
    return new Promise(function(resolve, reject){
        if(delay < 10000){
            setTimeout(resolve, delay);
        } else {
            reject("Timer too long");
        }
    });
}

//Ici, on va même pouvoir enchaîner les appels, sans perdre en lisibilité
console.log("Started...")
timerPromise(1000).then(function(){
    return timerPromise(1000);
}).then(function(){
    return timerPromise(1000);
}).then(function(){
    console.log("Finished!");
}).catch(function(e){
    console.error(e);
});
//Le log "Finished!" apparait 3 secondes après, tout fonctionne

If we compare these two examples, the Promise created inside our function simply replaces the two previous callbacks with its "resolve" and "reject" parameters, which are actually standardized callbacks, contained within an object, the promise.

When a function returns a promise, you can apply two methods to it in particular: "then" which will be executed when everything goes well, so it's the equivalent of the "on_success" callback, and "catch" which will be executed when there's an error, the equivalent of the previous "on_error".

I hope the concept of Promise is now clearer to you!

The goal of this article wasn't to explain Promises in depth and show you everything it's possible to do with them, but I know that some developers struggle to grasp this concept, which is why I wanted to make it accessible to everyone!

And you haven't seen everything yet, Promises coupled with async/await become extremely handy, but that's for another article.