Async/Await in JavaScript | JavaScript Tutorial in Hindi #59
Async/Await in JavaScript | JavaScript Tutorial in Hindi #59
Link to the Repl - https://replit.com/@codewithharry/59A…
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.3 -> Guys, in today's video, I'll
introduce you to such a topic
3.683 -> When you hear it, you'll say that
JavaScript has such nice things,
8.566 -> and those are async await.
9.949 -> First, let me tell you
what async await are
12.732 -> You can put your code on hold.
First, we declare async to a function.
18.467 -> And by holding many pieces of code
in it, we wait for their return value.
25.15 -> We'll see exactly how it goes. Let's
move to our computer screen and begin...
35.933 -> Today, we'll discuss a syntax that, once
you know it, will make you admire promises
41.116 -> and increase your
appreciation for javascript.
44.799 -> So let's quickly cover async await,
for which I have already created a repl.
54.082 -> The first thing I need
to mention to you is that
57.265 -> async await makes your
life easier just like promises.
61.848 -> You may not like the syntax of .then,
65.631 -> frequently using .then
may lead you to forget.
69.414 -> Let's say you have
solved the call hell problem
72.397 -> but there's a chance that you people may
74.98 -> forget your way in the
frequent use of .thens,
77.463 -> you start counting .thens,
no! You don't need to do that.
80.346 -> Instead you can use async
await syntax inside a function.
85.129 -> We'll read notes, just for a
while so that you get some clarity.
88.712 -> There is a special syntax to
work with promises in javascript.
92.495 -> A special syntax known as async
await. We can assign async to any function
99.378 -> What is this syntax. Wait for a moment.
But we can assign to any function
104.561 -> There, after assigning
async, we can await promises
109.944 -> I'll say again, any function can be
asynched and then can await promises too.
116.627 -> And then we can await a promise in it.
121.61 -> I'm repeating so that
you grasp it easily.
124.3 -> An async function always
returns a promise. Got it?
127.893 -> You also need to remeber that other values
are wrapped in a promise automatically
131.676 -> If you returned 7 here, then a
promise which resolves in 7 will appear
136.459 -> We can do something like this-
138.742 -> "harry.then alert"; which means
that if this is an async function then we
142.425 -> can put .then after. As it returns a
promise we can easily return.promise.
147.408 -> So async insures that a functions returns
a promise and wraps non promises in it.
154.391 -> Got it. Now let's move on and understand.
157.75 -> and I should also run my inspect to
start my console and close this here
164.433 -> just for some space, let's also zoom in.
167.316 -> And it's obvious that I
would like to type in script.js.
171.499 -> Now let me tell you that if I type
async function harry just like our example
177.882 -> then I can write something like..., let
me end replit's ghost writer here because
183.265 -> I know it's fantastic, but it
will keep me from properly
186.851 -> teaching. It's why I stopped it
so it wouldn't do my work for me.
191.348 -> Now, I typed async
function harry, and let's
194.189 -> say I returned 5. Are
you joking? you'll ask.
197.031 -> I can type harry.then and a value, value
is not needed In its place, I can type x
205.714 -> I could also type alert x, or
I could simply write an alert.
212.397 -> But due to maintaining simplicity, I
typed alert, so don't get confused.
216.68 -> Typing an alert or the same function in
alert.function produces the same result.
221.163 -> So that's what I did. If I reload it for
you, you'll see that I get the value 5.
227.946 -> What'll happen here if I remove async?
232.029 -> If I remove async, wait for
a moment it did not reload
236.612 -> .then is not a function
appears on the screen.
241.195 -> So it's clear that if we put
async with a function then
248.778 -> we are assured that a
promise will be returned.
251.161 -> But what are the gains do we get here? Why
253.402 -> would javascript
developers did such a thing?
255.744 -> They did so because, let's
say we have 2 promises,
260.127 -> one p1 and another p2, to
provide you a realistic example
265.11 -> I'll feed p1 a new promise.
273.893 -> Let me just complete it and then
I'll tell you what we'll happen here.
280.576 -> Yes we'll use set
timeout, it's so important
284.159 -> So set timeout will take
a function and then it'll
289.142 -> resolve it with a value let's say data 1.
293.925 -> And with our p1 promise, let's say
we requested the weather info of Delhi.
301.908 -> We requested "delhiWeather" information
and let's say we got 27 degrees Celsius.
311.491 -> Assume that you requested from a server,
a central server which maintains the data
318.074 -> Following that, you
requested "bangaloreWeather",
321.899 -> which arrived at 21 degrees Celsius.
325.757 -> When you request Delhi's
weather, it'll return in...
331.64 -> Don,t get confused by all of this.
I just mad an promise here
337.723 -> When we need to do something like
this, whenever is the incorrect term.
341.806 -> Usually, we won't have
to do anything like that.
344.889 -> Why do we need it? Because
the functions we'll deal
347.91 -> with will automatically
return a promise for us.
350.872 -> For example let's use mongoose.
When you take data from mongoose,
355.455 -> let's say you want it to find
1, so it will return a promise.
358.738 -> What does "return a promise"
mean? It means we have to wait
362.179 -> for it to bring us the data
before it can resolve it. Got it?
365.621 -> So I made a new promise,
"delhiWeather," and tried to mimick
371.624 -> these functions that
automatically return a
373.815 -> promise, so I've added a new promise here.
376.207 -> You can do the same if
you follow this example,
379.42 -> but usually when you code in javascript,
382.29 -> You don't need to enter a new
promise; you'll automatically
385.34 -> be returned with a new
promise. With that said,
388.073 -> we are left with 2 promises, one is
"delhiWeather" which resolves in 1 sec,
392.156 -> and "bangaloreWeather"
which resolves in 2 sec
395.839 -> I made "async function
harry" for you guys to know that
400.247 -> this way you can perform
.then, which will fulfil a promise?
405.422 -> Now let's say that when"delhiWeather"
appears, I get to see the weather,
410.605 -> when "bangaloreWeather" appears, I get to
see the weather; So what will I do here,
415.088 -> You may think of me to do something
like "delhiWeather.then" and then I'll do
421.071 -> "bangaloreWeather.then" and to
make this an crispy example, I'll put
428.154 -> everything that's happening
here inside a function.
433.237 -> Finally, the function is not even
returning anything; I made it to
438.42 -> show you that async functions always
return a promise, regardless of its type.
444.003 -> Now focus on
delhi and bangalore weather
447.286 -> We have two options, such as
"delhiWeather.then" and then run
454.869 -> an alert. And in this
way, it will call harry.
462.652 -> Let me run it.
466.135 -> 27 degree will appear in how
many seconds? After one second.
470.718 -> Let me do one thing here,
after typing console.log
476.401 -> "Welcome to weather control room".
482.884 -> "Welcome to weather control room"
will appear and then in 1 sec we can
487.575 -> see Delhi's weather info and in next
sec comes bangalore's weather info
492.767 -> No such big thing. So you get it and then
499.55 -> we should have get 21
after 27; What went wrong?
506.533 -> Ok we got 21 now.
509.216 -> Let's say if I change it to 6 or 7 sec
513.399 -> and then reload it, I'll get 27
immediately and 21 will follow in a while
520.282 -> sWe get it after 7 seconds, ok?
524.065 -> We saw this already but
is there any better way
526.848 -> Yes, and what is it?
529.631 -> I can store the one that returns
"delhiWeather" in a variable.
535.014 -> I mean it's good, it's handy too but
538.597 -> I can type something like, "let
delhiW= await delhiWeather" Got
545.488 -> it? I'll wait and the promise
that resolves this value will come.
552.98 -> And I'll also type "Let bangaloreW=
await bangaloreWeather Got it?
564.163 -> And let's say I want to
"return[delhiW, bangaloreW].
572.946 -> So what'll happen, as long
as I don't get delhi weather, it'll wait.
577.629 -> and then, as long as I don't
get bangalore weather, it'll wait.
580.812 -> Which means that first, this
whole thing will resolve, its
583.353 -> value will appear, and then
this'll go down. Which means I
585.895 -> stopped function's execution in
some way; This async function
590.578 -> ran this and this. This is a
comment, so this won't run obviously.
597.861 -> But the moment it notices the presence
of the await function, it'll stop.
601.544 -> It won't move ahead
until the promise resolves.
607.327 -> So it has been resolved. 27 degrees
appeared in Delhi. So let's move ahead.
613.91 -> It's bangaloreW's turn. Await
for this promise's value to resolve.
619.993 -> or, in technical terms,
wait until the promise is
623.172 -> fulfilled. Resolve reject is
not the concern right now.
627.176 -> We wish it to be resolved,
but it can also be rejected. But,
630.659 -> The promise should be
fulfilled and not stay pending.
633.542 -> And to wait for "bangaloreWeather"
promise to resolve or reject.
640.325 -> And finally this will
be returned down here
644.108 -> Assume that I print "let a= harry{}"
647.791 -> and let's say I run console.log(a).
651.974 -> Let me wait for replit to save
655.557 -> or promise pending appears here
659.24 -> So basically it returns a promise.
661.523 -> It always returns a promise.
663.806 -> You should know this. And as you
can see our promise is finally fulfilled.
668.989 -> And it has 2 variables one 27
degrees and another 21 degrees.
675.072 -> So you utilize it like this. Now I
want to point out that it actually stops
680.355 -> You'll want a proof to know that.
682.438 -> After delhi and
bangalore weather it stops.
685.721 -> So I'll put console.log
687.404 -> and there I'll type
691.886 -> "Fetching Delhi Weather Please wait".
698.803 -> And I'll do the same
with bangalore weather.
703.292 -> "Fetching Bangalore Weather
please wait" and I'll type
708.742 -> Delhi's weather has been fetched. And
Bangalore's weather has been fetched.
716.849 -> "is" and here "+ bangalore W".
726.906 -> and I'll type fetched bangalore weather
733.336 -> and I'll copy the same for Delhi too.
738.986 -> And I'll type that Delhi's
weather has also been fetched.
745.213 -> Save it and then look at how it'll work.
748.727 -> First of all, it'll print theconsole.log(Fetching
Delhi Weather please wait).
753.957 -> After 1 sec.., let me increase
the time so that you see clearly.
758.028 -> Delhi's weather will appear in 2 sec and
Bangalore's weather will appear in 5 sec.
764.841 -> It'll run this function and then
768.635 -> I'll have to wait till
the fetching completes.
771.869 -> And as the Delhi's weather fetch,
775.985 -> Then it'll print "Fetched Delhi Weather".
779.512 -> And the fetched whether will appear.
782.425 -> As in Delhi, it will print "Fetched
Bangalore's Weather" and then
785.714 -> in the next 5 sec, you'll
see the fetched value.
791.226 -> And if done properly,
I'll perform console.log(a)
795.566 -> a.then((value)=>{})
801.071 -> and then I'll put
console.log(value); Got it?
807.183 -> And after this, let's wait
as it formats the script.
812.461 -> Sometimes due to slow
internet it takes some time.
817.365 -> If your internet is running
slow or not available.
821.269 -> Now see Delhi's weather has
been fetched after 2 seconds
824.552 -> Bangalore's has also been fetched
in the next 5 seconds. I stopped
828.07 -> functions' execution in a way,
otherwise it is a tough task.
831.726 -> Otherwise, this is very tough to do
in JavaScript. Now what can you do?
836.571 -> You can control the flow of
your programme as it pleases you.
844.217 -> If you code in JavaScript, then
tell me how the code is executed.
848.58 -> The 1st will run, the 2nd will
run, the 3rd will run and then
851.854 -> callback will run, the 4th will
run and then callback will run.
855.244 -> So you can never stop it. You
can't stop the execution. Assume that
859.612 -> You made a variable
a, a variable b, a variable
863.574 -> c, and to make variable d, you needed c.
867.337 -> But value c was a promise that
was never resolved. So it's a problem.
870.943 -> But doing something like
this will create a process which
875.194 -> will provide the value
which you have to use first.
877.607 -> The needed value, where
you want to stop the execution,
880.398 -> Use the await keyword where you want
to await the promise, async your promise.
884.419 -> make the whole function an async
function. Different async functions,
889.293 -> are executed in parallel.
Assume I typed "let a=harry",
893.449 -> and let's say we have another
function named "cherry".
897.936 -> let b=cherry.
900.059 -> It won't happen like first harry
executes and then cherry executes.
904.874 -> harry will be executed and then put aside.
908.805 -> And then cherry will be executed. That means
they will both be executed in parallel.
915.568 -> Let's say, "cherry= "; Basically
I'm making an arrow function.
924.886 -> Let's say I type console.log("Hey
I'm cherry and I'm not waiting").
934.697 -> I'll reload it.
936.896 -> You can see, it immediately
appeared. Whatever harry
940.83 -> required from this function
was called immediately.
945.819 -> However, cherry runs, and
when that occurs, this prints.
951.443 -> It's not like it will wait for whole
function or for "Hey I'm cherry" , No
956.257 -> It'll be put to execution in parallel.
960.36 -> This one as well; But something
will be certain for Harry inside it.
966.71 -> Because it is an async
function, the number of
969.147 -> times the await keyword
has been used within harry,
972.175 -> Work will be overdue in those locations.
974.512 -> And if I make the entire
function async from start to finish,
978.619 -> Then I type "await
harry" and "await cherry";
981.441 -> whole Harry will run
first, then whole Cherry.
984.296 -> Do I need to do that too? Okay
Let's do it, let me do it for you.
988.55 -> Let me type "const main
= " and an arrow function.
994.747 -> OK, and from now on,
everything I type will be saved
998.869 -> in the "main" function
then I'll as well call it.
1003.583 -> And "main" is an async function.
I want that they run one by one.
1008.705 -> So I'll await harry as well as cherry. Now
1012.976 -> It's saying,"await has no effect on this
type of expression"; The reason for this
1019.664 -> Let me just make it an async
function so that it returns some promise.
1023.418 -> Now if I type, "let b= await
cherry", what'll happen?
1028.065 -> First and foremost, Harry
will run, and then the entire
1031.131 -> cherry will run, unlike before
when the cherry ran in between.
1035.093 -> But this time it will follow the
flow of execution. Let me reload it.
1039.207 -> And you can see that; Actually I can't
make a function named "main" I'll change
1048.402 -> it to "main1". main1 should be fine.
1053.907 -> Let me reload and let's wait now,
1057.959 -> "Welcome to weather control room", Delhi's
weather is fetching along with Bangalore's
1063.855 -> it shows a.then is not a
function, why I don't know?
1068.282 -> Actually i have ben putting a= await,
so it'll consist a value for promise
1073.939 -> So "a" is not a promise, it just consists
a value for one. So I need to change that.
1078.685 -> Everything else's fine, you see
first harry runs, yeah it's running well.
1085.221 -> At last, " I'm Cherry and
I'm Not Waiting" is running. I'll
1088.656 -> change it to " I'm waiting"
because technically it is waiting.
1093.699 -> I hope you understand this. Now I'll
like to share something with you guys
1097.655 -> If you take "async await"as
a tough topic for any reason,
1100.61 -> then I'll strongly recommend you,
1103.975 -> start watching our videos from the point
when we started discussing promises
1109.154 -> one more time, there's
no harm in doing so.
1113.385 -> You go back there, download our notes,
1116.64 -> Start reading from the point when
I introduced promises to you guys.
1121.387 -> When you don't fully know a part of notes,
go back to the video and start over.
1127.257 -> I have explained every
single line written in the notes.
1130.523 -> I'll do the same for this
video too. I have written,
1133.978 -> "There is another keyword called
await that only works in async function."
1137.703 -> we did "let value = await promise"; So the
value of promise will come inside value.
1142.597 -> "Await keyword makes javascript wait until
promise setlles and returns it's value."
1149.453 -> Got it? It's so simple.
1152.088 -> "It's just a more elegant
syntax than promise.then"
1157.022 -> It means, rather than using
.then to get the result, using
1159.988 -> await, you can directly get
the result into the variable.
1162.956 -> "+ it's easier to read and write."
1165.85 -> Because when you read the syntax,
1167.967 -> It's predictable that
first harry will run and its
1170.45 -> value will come in "a".
And then cherry will run.
1172.93 -> So it's clearly known
what's happening in the code.
1175.514 -> I hope you enjoy JavaScript,
and if you aren't already,
1181.002 -> I hope you will be in the near future. Ok!
1183.393 -> That's all for today's video.
Thankyou so much guys for watching this video
1187.103 -> And I'll see you next time....
Source: https://www.youtube.com/watch?v=bLre6Uf4Op0