Promise .then() and .catch() | JavaScript Tutorial in Hindi #55
Promise .then() and .catch() | JavaScript Tutorial in Hindi #55
Link to the Repl - https://replit.com/@codewithharry/55t…
Join Replit - https://join.replit.com/CodeWithHarry
Download Notes - https://drive.google.com/drive/folder…
Ultimate JS Course Playlist: • JavaScript Tutorials for Beginners in…
►Checkout my English channel here: / @programmingwithharry
►Instagram: www.instagram.com/codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 by CodeWithHarry
►Learn in One Video[++]:
Python[15 Hr]: • Python Tutorial For Beginners In Hind…
Python Advance[3.5 Hr]: • Python Programming Course in Hindi (A…
Python[1 Hr]: • Learn Python In Hindi In One Video - …
Python[2 Hr]: • Python Tutorial In Hindi 🔥
Python[15 Min]: • 15 Minute Python Tutorial For Beginne…
JavaScript[1 Hr]: • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial For Beginners:…
php[1 Hr]: • Learn Php In One Video In Hindi - हिं…
php[2.3 Hr]: • Php Tutorial for Beginners in Hindi w…
php[Project]- • Login And Registration Form Using Php…
HTML[30 Min]: • HTML 5 Tutorial For Beginners In Hind…
CSS[8.5 Hr]: • CSS Tutorial In Hindi (With Notes) 🔥
CSS[1.4 Hr]: • CSS 3 Tutorial For Beginners: Learn C…
Wordpress[3.2 Hr]: • How To Make a WordPress Website | Wor…
Angular[2 Hr]: • Angular Tutorial in Hindi
Java[2.3 Hr]: • Java tutorial in hindi 🔥
Web Scraping[1 Hr]: • Web Scraping Tutorial using Python an…
MongoDB[2 Hr]: • MongoDb Tutorial For Beginners in Hin…
Numpy[1 Hr]: • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tutorial For Begi…
Linux[1 Hr]: • Linux Tutorial For Beginners in Hindi
JQuery[1.1 Hr]: • jQuery Tutorial For Beginners In Hind…
Git and GitHub[1.1 Hr]: • Git \u0026 GitHub Tutorial For Beginners I…
►Complete course [playlist]:
React: • React Js Tutorials in Hindi
Python- • Python Tutorials For Absolute Beginne…
OOP Python- • Object Oriented Programming Tutorials…
Java: • Java Tutorials For Beginners In Hindi
JavaScript- • JavaScript Tutorials In Hindi
PHP- • PHP Tutorials in Hindi
C- • C Language Tutorials In Hindi
C++- • C++ Tutorials In Hindi
Git \u0026 GitHub- • Git and GitHub Tutorials In Hindi
Android Dev- • Android Development Tutorials in Hindi
Python GUI- • Python GUI: Tkinter Tutorial In Hindi…
Web Development- • Web Development Tutorials For Beginne…
Python Django: • Python Django Tutorials In Hindi
Projects Using HTML, CSS \u0026 Javascript- • Projects Using HTML, CSS \u0026 JavaScript…
Data Structure and Algo: • Data Structures and Algorithms Course…
Follow Me On Social Media
►Website (created using Django Rest \u0026 Angular): https://www.codewithharry.com
►Facebook: https://www.facebook.com/CodeWithHarry
►Instagram: https://www.instagram.com/codewithharry/
Twitter: https://twitter.com/CodeWithHarry
Comment “#HarryBhai” if you read this 😉😉
Content
0 -> Guys in todays video we will see that when a promise gets fulfilled
3.29 -> as resolved or as rejected then in what ways we can start doing some work?
8.74 -> For example, if a promise gets fulfilled then we will want
14.04 -> an alert after that or something else, you want to call another function.
18.44 -> We will see in this video how to perform all these tasks; .then() and .catch()
22.14 -> are two methods. let's move to our computer screens and get started...
32.5 -> Guys our last video rocked!! Many of you asked questions about promises
36.3 -> and I'm so happy that you asked questions because I can answer you now
40.28 -> in a nice way and now I know what are the doubts you guys have. So look
44.32 -> first of all promise is here to make your work easy not hard.
50.49 -> Let's quickly make a repl. Promise means "to promise a code execution which is asynchronous".
59.19 -> Overall this is what promise means. You can make custom promises
63.73 -> Now I'll tell you just let me finish my repl first
68.63 -> I'll make it into html css javascript which will feel like browser.
74.1 -> This is our video no. 55 and I'm naming it "55_then_catch".
86.64 -> Now, you need to understand that promises are not difficult
90.68 -> and here the proof, you just simply open a script and write
96.61 -> " let p = new promise " and then " resolve reject ".
102.74 -> This is the syntax for this. Not me, nor someone you know have made this.
112.59 -> This person is not your neighbour nor your relative. We will follow this
118.44 -> Now your work on promise syntax will be executed into the background
127.54 -> and after it's execution you will be notified. How?
134.64 -> By the help of .then() and .catch()
137.54 -> What is promise? It's the promise of code execution. It have some state
142.29 -> for eg. I put set timeout into this promise and make it to run after 4 seconds
153.14 -> or 5 seconds and do nothing but just alert me
157.59 -> that " I'm a promise and I'm fulfilled ".
162.39 -> Ok.
Now what does fulfilled, rejected and resolved means?
166.69 -> Fulfil means that you are done with it. Let's say you ordered from Zomato
173.04 -> You ordered 2 aloo ke parathe . Now let's say that they don't have it today
180.04 -> so they can't deliver it and giving you a refund
184.39 -> Now this order is fulfilled and closed we don't have anything to do with it.
190.84 -> Resolve means that you actually get your aloo ka paratha
194.91 -> and reject means that you won't get your aloo ka paratha
198.95 -> Now fulfilment can happen whether by getting resolved or rejected
202.54 -> you might get aloo ka paratha or not. You are waiting for you paratha
207.83 -> but your promise is pending. Isn't it simple? I think it's so simple
214.24 -> ok now I'll run console.log write promise is pending.
221.54 -> ok and I'll write I'm a promise and I'm fulfilled
230.49 -> and to fulfil that I need to call resolve and the value which I need to fulfil it
238.04 -> let's say I want true(boolean) value to fulfil it or maybe a string value
246.59 -> I may fulfil it with an array it's my choice.
250.19 -> Now we can see that it prints promises are pending
256.34 -> then the set timer will run but the promise will remain pending
262.44 -> and the moment our promise gets resolved you will see it in console
270.14 -> Let me show it you can see the error and after 5 sec our function works.
277.54 -> If I immediately put this promise here then what'll happen?
284.58 -> If I do so then the promise is pending and it's true it doesn't have any value
288.52 -> But it will come when it's fulfilled so you can see
290.94 -> it's state is pending and result is undefined and why is that
295.44 -> because it does not have any value right now and is yet to be resolved that's why
300.04 -> if it was resolved then we would have seen the result Do you get it.
306.54 -> Next we will reject this promise ok and I'll type reject and new error
318.49 -> I can throw errors like this into javascript and I'll type
322.39 -> " I'm an error ." Please be patient with me I know I haven't taught you errors yet
326.43 -> but just remember now that to throw an error you need this syntax
332.39 -> ok for new errors this is used as well.
336.19 -> Now let's run it and see after 5 sec I'm a promise and I'm fulfilled has come but
347.03 -> but the error is coming here, I should type technically rejected here
355.03 -> or it would be wrong because I'm rejecting it right now.
358.04 -> So a promise can be rejected and can be resolved when resolved
362.08 -> then it will give some value and when rejected will give some error as simple as that.
366.44 -> And this code will be executed parallelly.
369.48 -> If I make 10 promises let me replicate this code completely
373.89 -> and I make it p1, p2 as promise 1 and 2
379.14 -> and I do exactly the same thing 1'st one is getting
resolved and 2'nd is getting rejected
385.18 -> ok let me just resolve it here and let me change it as rejected
395.29 -> so if I do p1, p2 here and run it so will they take 10 sec to load? No,
405.39 -> both will be fired parallelly and just after 5 sec you will see the result
410.43 -> So only to do such things promise is used that even if
you have a dozen promises they will be executed parallelly.
417.5 -> And after execution you will be notified. Now let's say that I want
422.945 -> just after p1's execution I would do some work I don't want to print.
425.54 -> I want p1.then; that after p1 is fulfilled
then simply print this new value
445 -> and then I will replicate this and will do the same with p2 as well.
451.34 -> But let me just start with p1 right now because our p2 is reacting on p1
457.38 -> p1 is resolving and p2 is rejecting. I'll reload and then
461.54 -> after 5 sec one promise will be resolved and
other will be rejected as it's showing error
473.04 -> Technically you don't do anything here all
your work is done by using .then and .catch
479.04 -> Here we don't sum console.log. So what we will do here
483.29 -> is that i have done p1.then and after reloading and 5 sec later
492.29 -> it's value will come and the other will throw
an error so console is with an error now
497.44 -> Now I want to catch the error that p2 is throwing.
505.39 -> Let's say I don't want an error then I'll use p2.catch syntax
511.14 -> and I'll simply put " some error occurred in p2 " into the console.log
522.54 -> Ok. So let's save it and after 5 sec
we'll see true and some error occured in p2.
532.44 -> Did you notice that we just catch the error
and that's why we don't see it into console
537.54 -> because we handled it.
540.03 -> So let's get into the notes and I know that it's still confusing
545.1 -> that's why I'll start reading from the previous
page and we need to rehydrate it
549.74 -> if we want to understand promises we need to
get back and try understanding it again.
553.78 -> "The solution to the callback hell is promises."
How I'll tell you in a while
556.61 -> "Promise is the promise of code execution" We already saw it
559.2 -> The code either executes or fails, in both the
cases the subscriber will be notified.
562.2 -> we notify by using .then and .catch method like
we got your value or this is the error
569.425 -> The syntax of promise looks like this- (shown in the notes)
which is provided to us by javascript engine
580.549 -> You can call resolve and reject, calling resolve then
your promise is fulfilled by resolve.
590.039 -> Fulfilment can happen in 2 ways either be resolved or rejected.
593.209 -> If you want to resolve in an value then it will be
fulfilled as a resolved value
600.449 -> and in my personal opinion it's an happy resolution
that you got an value which you desired.
607.639 -> Reject means unexpected fulfilment which is given as an error and it's not an happy fulfillment.
616.64 -> "Reject and resolve are two callbacks provided by javascript" (shown in notes)
620.68 -> By putting the value into resolve you can indicate
that your work is successfully finished.
625.943 -> Putting an error in reject you can indicate that your work is failed.
630.043 -> "The promise object returned by new promise constructor has these properties"
634.083 -> Every promise has some state and result. Initially it's in pending state
and then it's fulfilled or rejected.
640.243 -> For eg. our p1 is fulfilled and p2 is rejected.
656.243 -> Now let's talk about consumers if the promise has given an value or error?
666.543 -> "The consuming code can receive the final result of a promise through then and catch."
674.243 -> The most fundamental one is then
you can pass 2 functions an result and an error.
681.043 -> I did only once as I was only interested in result so
I passed the highlighted function.
689.09 -> But I can also catch an error here if I want to use .then
instead of catch then I can use it right here
698.3 -> but I don't want to confuse you. Most frequently used
.then calls look like this
705.59 -> you type p1 .then and after that you pass value and then run it.
713.39 -> The most fundamental one is .then you type the function you
run the result and you handle it.
720.36 -> and you handle error in the other function.
723.64 -> When you'll look at any promise like this one is fetching data from the network
730.54 -> So error can come in any case like fault in your
internet connection and you can't control it.
740.94 -> So you have to handle that error and how you'll do it by the help of .catch.
747.04 -> "If we are interested in only successful completions,
we can provide only one function argument to .then"
753.04 -> which you can see I have already shown you.
757.19 -> Now I have given it promise and .then alert so I'll get the value after alert
765.29 -> don't get confused from this syntax. I give a function to .then
770.29 -> I make my function and I give an alert. Ok it's the same thing any
value promise has will get resolved in when alerted
777.24 -> If you write this syntax and I want you to write it into your browser.
781.69 -> Write it on repl or anywhere else.
784.34 -> If we are interested only in errors we can use null
as our first argument or we can use .catch
796.38 -> you have both the options here.
800.94 -> I told you both of them to get the value and to catch the error
814.29 -> Let's decorate our code so we can use .catch here.
822.54 -> Let's say I don't want to use p2.catch then I can use p2.then
829.41 -> and what'll I do when I get my value and when I don't get it.
836.63 -> Let me give such function but first let me
format my code. Now after that
849.146 -> I have given an error and after running, both are
pending at first and then worked just fine.
873.03 -> And if I remove p2.catch then we will not see any error but if I
remove second argument then we will see an error.
891.14 -> Just gain an understanding of this ok.
896.24 -> You'll see an error after 5 sec because I ran p2 .then
and assumed that no error will come
908.44 -> This is the reason you also need to catch the errors. Wherever you think
an error can come, you need to catch it there.
917.04 -> The classic example for this is network calls if you
want to call from network
924.64 -> and you want to receive some data then 2 things may happen
928.68 -> you may get data(resolve) or you may not(reject).
934.72 -> Now in next video we'll be doing an excellent work which is our quiz
940.76 -> in which we will be writing load script function with the help of promises
946.04 -> We'll be enjoying that so much and you'll understand
why we are doing things this way.
955.091 -> And then we'll see promise chaining and
we'll enjoy this chapter so much
959.131 -> and finally when we'll make projects then
promises will be cleared to you
962.541 -> So don't worry that you will not understand that and just be making notes
968.391 -> and just doing it. Just give it some time these are time consuming
973.04 -> and when you'll understand it your life will change
977.46 -> Because the way you'll code after understanding it will be phenomenal.
982.5 -> With that being said you must access this javascript playlist.
986.54 -> And that's all for today's video thankyou so much guys
988.499 -> for watching this video and I'll see you next time....
Source: https://www.youtube.com/watch?v=Fsv4IEH-4Lw