Async JavaScript Promises Tutorial

hey what's going on guys welcome back to another video and in this video we are going to talk about promises in javascript we will go through a couple of examples and we will understand how promises handles async tasks and solves the problem that we saw in our last video using callback functions but before you proceed further i would recommend you to watch my video on callback functions in javascript just click on the card above and jump to it directly also don't forget to subscribe my channel and press the bell icon so that you don't miss the videos like this one so let's get started all right guys before we jump into code i just want to explain you about our promises in a very layman language so a father promises to his son that he's going to gift him a car if he scores 90 percent in his academics now this there can be two possibilities either the father fulfills the promise to his son which is called the resolve or he failed to fulfill the promise which is called reject or the failed and very similarly in javascript also we have promises which takes two arguments either it's a resolve or it's a reject so let me show you this with an example so i'm going to create a constant promise and in order to create a promise in javascript we use new keyword and then we write the promise and this promise takes a function which has two arguments so i'm going to create a function i will be using an arrow function and it will going to take two arguments the first argument will be resolved either the promise is resolved and the second argument will be the reject and then we perform some operations so let me perform some operation i'm going to do a console.log and i'm going to write async task execution all right and then we can write some conditions here that if this async task execution is fulfilled which is true then that means the promise is resolved so i'm going to call my resolve method but if it is not resolved and it gets rejected then i'm going to call a reject method which is this reject method and that's it this is the simplest form of a promise in javascript so now next question is how do we interact with this promise so in order to interact with this promise we simply use the promise dot then method and using the dot then method it accepts two functions the first function is called when the promise is resolved and the second function is called when the promise is rejected so we can use two functions so i'm going to use an arrow function here and then i can have an another function which is for the reject all right so now i have two functions and now let me add a console and i'm going to write a success or let me use past pass all right and similarly i can write the another console here and that console will be failed all right and now if i save it then you will see that my console log for a sync task execution is logged and we have made a condition of true which gets satisfied and my resolve is called and whenever the result is called the first method in the then function will be called and that is the console log past but what is the case is that this promise is not resolved it got rejected so in that case i'm just going to do a false and if i save it then it's going to give me failed so in this case the promise is failed we can do one more thing here instead of passing this here we can actually pass the values from the resolve method so just take an example that you made an api call and that api call is now success and that api call has given you some data so i'm going to write some data here person and this person have a name property and i'm going to say the page all right and i will pass this person as an argument in the resolve method all right and let me create here another constant as an error and this is going to have error code i'm going to give 1 0 0 1 and i will pass the error in the reject method all right so if i want to use the value of it then i'm just going to use a val as an argument here and i can simply log the console here and now if i save it then you can see that i get the data which is being passed in the resolve method similarly if you if your promise is not resolved and your promise is rejected then you can simply take the argument as error and you can type the error here and this is going to give you the error i want to show you one more thing that with this then you can also make a catch of your error so if i want to catch the error i'm going to write simply catch and this catch will have a arrow function and i'm going to do a console.log failed all right and if i save it then you will see that i am not able to see the failed is because i have an another function in my then which is the error function so what happens in case you have missed the error function in your then method then it's directly going to call the catch method now in this case you will see that the promise is rejected and error is thrown and an error is handled in the catch section and you can also use finally here finally and this is going to take a arrow function and i'm going to do a console.log and let me do some cleanup so this finally will always be called when you interact with the promise so it's going to give me the failed but it's also going to call the finale method you can do one more thing that if your promise throws an error then you can actually write the throw an error and what is going to happen is when you actually throw the error it's going to call the reject method by default so when you throw the error it's going to automatically being cached in the catch function and if i directly write here then it's going to give me an error and that's where we are getting the error so this is a case where you actually had a promise and which is immediately resolved or rejected but there may be a case that you have a promise which is being already resolved and now you want to interact with it so you can also do that and let me show you the example so i'm going to do a let p and we have a promise which is already being resolved the promise is already being done so i can do directly promise dot resolve and i can do the execution is done so this is a promise which is already being resolved and if i want to do the reject then i can similarly do the reject as well so i'm just going to copy paste and i'm going to change this reject execution is rejected so now even though the promise is resolved we can still interact with using the then handler and this part we cannot do in the callback functions once the callback function is executed you cannot attach anything to it or you cannot interact with it but that's not the case with the promises and that's where the promises has advantages as compared to the callback functions so what we can do is if i want to interact with it i'm just going to write p dot then function and i can do the console.log well and i will pass the val here all right and now if i save it then you will see that we get the execution is done as a console log but this was not possible if we have used the callback functions next thing i want to show you is that promises are by default asynchronous in nature whereas we saw that callbacks they are not asynchronous by default we have to use settimeout function in order to make it as a asynchronous execution so let's go to that example again all right so this was the example we used in our callback functions video and if i save it then we know that we are going to get a reference error because callbacks by default are not asynchronous now let's convert this into promise and let's see that so for converting this to promise i'm going to remove this and i'm going to return a promise dot resolve all right and then what we are going to do is i'm just going to remove this dot then and this is going to have an arrow function and i'm going to do a simple console.log name and now if i save it then you will see that the code execution happens so that means the promises are asynchronous in nature they are taken out of the execution flow and then executed later on so that's why we get the variable name as it's already being allocated in the memory and javascript runtime engine will be able to give us the value name the next thing i want to show you is how we can do chaining in promises we saw in the callback functions that when we have to do the logical sequence one after the another we result into the nesting of callback functions and which gives us the callback hell so let's see how we actually do the chaining in promises so i'm going to write a constant p and that goes having a promise which is resolved just for the sake of simplicity all right and it's resolved and i'm going to write done and now i'm going to write p dot then it's going to take a argument and then i'm going to console dot log and i'm going to print the value all right so we know that we are going to get the value as done but now once this promise is resolved i want to make a chain i want to make some another execution then what i can do dot another then and i can repeat the same thing i can do a console.log but usually when you use chaining in promises every then handler has to return something so that the other then handle will accept it so if i want to do that i need to return something from here so let me return as done to and this done to will be accepted as an argument by the other then function and then i can do the valve and now if i save it then you will see that we have done and then we have done two and if i want to continue this chain then return done three then and i can simply console.log so i will accept the well and i can do the console.log well and now let me save it so now you can see done done to done three but if you do not return anything from the then method then your chain will get break so you always has to return something and suppose there is a case that you have an error so let me do this as a reject all right and i'm going to do a fail that unlike the callbacks where you have the error first callback you don't need to write the error method in each of the then method so what i'm going to do uh either i can directly write a catch in the last then i can do the console.log well where i save it then i'm going to get the fail so that is the one of the advantage that this code is more readable and understandable by the developers as compared to the one which we saw in the callback hell the last part i want to show you is the promise all and promise race so i'm just going to remove this and i'm going to write a new function i'm going to write a make api call and this function going to return a promise so i'm going to return a promise new promise all right and this new promise will have two arguments the first argument will be the resolve and the another argument will be the reject all right and next thing what i want to do is i'm going to write a set timeout function here so i'm going to write a set timeout and what i want that this api call will accept a parameter as time so i'm going to use that time here and then i'm just going to do a resolve and i'm going to write here this api executed in plus time seconds so now let's try it so i'm going to call this api and i'm going to pass 1000 milliseconds so it's going to take one second in order to execute this api then i'm going to pass a valve here let's have the arrow function and then i'm going to do a console.log and i'm going to log the valve all right and now if i save it then you can see that after one second my api get executed so that's we understood now there is a scenario that we want to make multiple api calls and all those api calls should go simultaneously we should not want that first one api call will be executed then the second one then the third one so how we can do that what i'm going to do i'm going to remove this and i'm going to make a constant and i'm going to write multi api call all right and i'm going to pass an array so the first api call is going to take 1000 millisecond the second api call is going to take 2000 milliseconds and the third api call i want that it's going to take 500 milliseconds all right so now i have created a variable multi api which is an array and it's going to call three times the make api call so what i want i want to interact with all the promises only once all the execution of the api is done so what i can do for that is i can use promise dot all and in the dot all i can pass the multi api call and then i can use dot then and this is going to return me the values so it's going to return me the array of values and i'm just simply going to console.log values whatever values i have been returned so it's going to return me the array of values so now if i save it then you will see that i'm getting an array of the values we have three promises got resolved the first one api executed in thousand millisecond two thousand millisecond and five hundred millisecond and believe me these all three api calls were simultaneously they were not waiting for one to finish and the another one they all went through simultaneously so if if we want to see that why the sequence is thousand two thousand and five hundred if we want to see because we know that obviously the one with the 500 millisecond will get executed first because it's going to take the less time and if we want to see that we can see that as well so what i'm going to do i'm going to use promise dot race so the race is going to return me first promise which is being resolved so if i do the same thing again multi api call dot then it will not return me an array it's simply going to return me a value and then i'm just going to do a console.log and i'm going to print the value all right and now if i save it then you will see that i only get one value which is among the three api calls which got executed first and if you save it then you will see that this api is executed in 500 seconds and that is very obvious because that is the api which is going to take the minimum amount of time so that's all about the promises that you should know while writing your projects and promises is one of the very important concepts in javascript whenever we are dealing with the asynchronous programming so i hope you like the video a thumbs up is appreciated also don't forget to subscribe my channel and press the bell icon so that you don't miss the videos like this one you can also connect with me via facebook or instagram i will add the links in the description below also let me know in the comment section what topic you want to see in the next video thank you thanks for watching

Channel: Dipesh Malvia

Views: 1,247

Rating: 4.9148936 out of 5

Keywords: Async Programming JavaScript, JavaScript Promises, Promises in JavaScript, Promises Tutorial, Callback vs Promises, async, javascript, async await, js promises tutorial, js promises explained, promises explained javascript, promises tutorial, how to use javascript promises, javascript promises es6, javascript promises for beginners

Id: JvV4Rz2PpzA

Length: 18min 15sec (1095 seconds)

Published: Thu Dec 17 2020