Lets rewrite it using generators and you will see that it is shorter and easier to read.
PromisesES6 now has native support for promises.
When the operation does complete, the promise is either fulfilled or rejected.
To understand this, let’s see an example:Here we have a function doAsync and the purpose of this function is to return a promise.
So we let p = new Promise and the constructor takes a function.
This function is passed two arguments, resolve and reject.
If we want the promise to resolve and be fulfilled, we call resolve as a function, and if some error occurred, we call reject as a function.
So the first thing that is done is to log out “in promise code and the dateTime”.
Then, after 2 seconds, the resolve is called.
But this is not exactly the way we work with promises.
The reason why we use them is to wait until they are fulfilled or rejected to continue executing our code.
So let’s see a more realistic example:So here we have the function doAsync that returns a new promise.
The function takes one parameter fullfillThePromise if this is true, the promise is resolved; else, it is rejected.
When we call the doAsync function we use the then method to indicate that it should wait for the doAsync function to finish to continue.
The then method takes 2 functions as parameters.
The first one is the callback function that is going to be executed when the promise inside the doAsync function is resolved and the second one is the one that is going to be executed if the promise is rejected.
As we can see the doAsync starts executing and log “in the promise codeTue…”, then it waits 2 seconds and as fullfillThePromise was true it logged “resolving the promise Tue Oct…” and called the resolve() function.
after that the first function of the .
then method is called and “the promise has been resolved” is logged.
Now, let’s see how it works when we reject the promise:It is the same as the previous example the only difference is that fullfillThePromise is false, so the reject was called instead.
As a result, the second function of the .
then method is executed.
A value can be returned in the resolve or reject callback.
Chaining PromisesLet’s see an example:Here we have the same doAsync function as before, but the difference is that when we called it we have 2 .
then methods, one in line# 18 and another one in line# 24.
The second .
then method will be executed after the first one is completed.
So, in this example, as fullfillThePromise is false the promise will be rejected.
After that, the .
then method in line #18 will be executed.
The doAsync promise was rejected so, it will execute line #22 and log “the promise has been rejected with 404” in the console, after that, it will return the string “Process could not continue because doASync returned 404”.
As it is returning a string it will be wrapped in a resolved promise.
This will cause the second .
then in line #24 to be executed so it will log in the console “Process could not continue because doASync returned 404”.
The reject method of the .
then in line #24 will only be executed if there is an exception inside the .
then in line #18.
Instead of returning a string, we normally return a new promise.
Like this:As you can see in the example above, there are two .
then methods one in line # 26, which be executed when the doASync promise is fulfilled, and another one in line #32 that will be executed after the rollBackChanges promise is resolved or the string “yeyyy the promise has been resolved” is returned.
allSometimes we need more than one promise to finish before we continue executing the code.
In that case, we use the Promise.
all method, that receives an array of promises as a parameter.
It is important to mention that Promise.
all works as an and, so if one of the promises is rejected, then the reject callback of the .
then method will be executed.
raceIn case we have more than one promise and we want to continue executing the code after one of them is fulfilled or rejected we can use Promise.
The first promise that is fulfilled or rejected is the one treated in the .
Final WordsAlong these posts, I have covered most of the new features released in ECMAScript 6 and provided some examples of them all.
However, there are some features I didn’t include such us internationalization & localization, proxying and reflection, etc.
If you are interested in those topics you can find more information in the sources linked at the end of this post.
Thanks for reading!Sourceshttps://developer.