Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Promise javascript examples

Promises are becom­ing a fun­da­men­tal part of javascript. Hence, it is nec­es­sary to under­stand promises thor­oughly. When I was learn­ing promises, I could not find many exam­ples which I could run in the browser’s con­sole. The aim of this arti­cle is to

  • Pro­vide sim­ple exam­ples which you can run in your browser’s console
  • Demon­strate the flow of promise execution

Before we jump into the exam­ples, let’s quickly review the basics of promises.


3 states of a promise

A Promise will always be in one of three states:

  • pend­ing: This is the ini­tial state when it is just created.
  • ful­filled: This indi­cates that the oper­a­tion that the promised wrapped com­pleted successfully
  • rejected: This indi­cates that the oper­a­tion that the promise wrapped had failed

If a promise is resolved/fulfilled the suc­cess call­back will be called and if it’s rejected, the fail­ure call­back will be called. If you are curi­ous about how call­backs work read this arti­cle.

Now let’s under­stand what hap­pens when promises get resolved or rejected.


We will sim­u­late a resolved promise using the Promise.resolve() and Promise.reject() method. It can be replace with asyn­chro­nous operation.

If the promise has already been ful­filled or rejected when a cor­re­spond­ing han­dler is attached, the han­dler will be called, so there is no race con­di­tion between an asyn­chro­nous oper­a­tion com­plet­ing and its han­dlers being attached.

As the Promise.prototype.then() and Promise.prototype.catch() meth­ods return promises, they can be chained—an oper­a­tion called composition.


Promise.resolve

Exam­ples of Promise.resolve() with return statements.

Promise.resolve() returns Promise object that is resolved with the given value. Promise.reject() returns a Promise object that is rejected with the given reason.

That was pretty straight­for­ward. But promises also sup­port chain­ing. You can pass a value to the next func­tion in the promise chain using return state­ments. This is prob­a­bly how you will find your­self using promises a lot in your own projects.

Things become a lit­tle more inter­est­ing when you return promises from within promises.

In the above case, the inner promise of the first then block must get resolved before the suc­cess han­dler of the last then block can execute.


Promise.reject

Repeat the sim­i­lar exer­cise for Promise.reject() call­back flows. I would encour­age you to try the exer­cise with Promise.reject() on your own and observe the behav­ior and come back to this arti­cle to com­pare your exercise.

When a promise is rejected and there is no error han­dler, none of the con­sec­u­tive suc­cess han­dlers in the chain are invoked until a fail­ure han­dler is encountered.

Here’s another exam­ple where you just have a catch func­tion at the end of the chain. This behaves very sim­i­lar to a finally clause.

Once a promise fail­ure is han­dled, sub­se­quence items in the chain can pro­ceed as nor­mal. For example


Spe­cial Case

In the exam­ples above, you’ve seen that when you return some­thing from within a then block, the next suc­cess han­dler receives that value. There is only one spe­cial case under which this fact does not hold true, and that is when the argu­ment to then is null. In such cases, the first then block in the promise chain that has a func­tion as a han­dler receives the value.

Nor­mally, this is what happens

But when you inter­leave then’s with null call­backs, the behav­iour changes slightly