Promises is a new feature in javascript 2015 or as some people call it ES6 (Ecma script 6). Although this is a new feature some of you may have been already using it since it has been already implemented before using some libraries like blubird js but starting from now it will be shipped natively so you can use it without any frameworks or libraries.
First let’s talk about what is a promise. A promise is basically a result that will happen when another process gets completed like an asynchronous operation if you are coming from another programming language. A very famous example of the use of promises is the $.ajax() function in jQuery.
Promises have three stated either Pending or fulfilled or rejected.
- Pending is the initial state when the promise is created but is still has not been fulfilled or rejected.
- Fulfilled is the stated that indicate that the promise has been completed successfully .
- Rejected as the name indicates is when the promise’s operation is failed.
Now that we have understood what a promise it lets try creating one :
'use strict'
let myPromise = new Promise((res ,rej)=>{
res('Wooho , i am ready');
});
myPromise.then((res)=>{
console.log(res);
});
In the first line I typed ‘use strict’ use strict was introduced in ES5 as a way to make javascript fail less silently so instead of having the browser ignore your mistake it leads it to completely break your code. You may be thinking why is this a good thing but trust me it is. If you knew the errors before shipping your solution then realize that there is some code misbehaving because of a global variable you forgot about you will not be happy.
Then in the second line I used the new let keyword to create a new promise. If you are not familiar with the let keyword it is basically like the var keyword but it is block scoped instead of global scoped
To create a promise you use the new keyword followed by the Promise() with an upper case P. The promise function takes an executer function as a parameter , here I am using another new feature in ES6 which is arrow function
In a nutshell arrow functions are a shorter syntax to create functions but it has some changes to it like the use of the this keyword is different.
The promise function takes two parameters a resolve and a reject parameters that you can use to set the resolve and the reject state of the promise .
res('Wooho , i am ready');
Here I am setting the resolve state to the string “Woho , I am ready”.
Then I am using the then function to trigger it like this.
myPromise.then((res)=>{
console.log(res);
});
Inside the then syntax I am using the arrow function I have talked about earlier in this tutorial then I am using console.log to print the resolve state.
Then then function checks that the promise is done and finished it’s job then it triggers the resolve state if it had no errors and it worked successfully or the rejected state if it failed in it’s process.
To make sure that the then keyword is waiting for the function to finish before it prints the code and the code execution has changed try adding a setTimeout for two seconds and see what happens
'use strict'
let myPromise = new Promise((res ,rej)=>{
setTimeout(()=>{
res('Wooho , i am ready');
},2000);
});
myPromise.then((res)=>{
console.log(res);
});
Here I am using the setTimeout function to wait for two seconds before setting the resolved state of the promise to the string “Woho , I am ready” . If we were not using promises the console .log would have been triggered and printed undefined but in this case it waits for two seconds then when the value is created it prints the resolved string