I like he demoed the whole internals of callbacks and promises before coming to async and await, so that people have a good understanding. Great teacher!
One important thing you didn't mentioned in this video is that, async function always returns a promise object. I like how you make your content engaging. Thank you for the teaching. :)
Hey ! I watched your part 1 at 6am the other day, and two hours later I used it all over my code to revamp my own API's and basically halved my code .. . And everything is so smooth now. I'm working with big data, sql calls over 100 million lines and nodeJS is totally fine to deal with those things. I just keep struggling with promises inside loops, can't find a way to declare "arrays" of promises that will work exactly in the way I want. Maybe your next video, which I'm really waiting for, will help me towards that. Keep doing the good work ! You make code look fun and accessible ! :) (PS : i studied in one of the best IT schools in France and still find your content super relevant. And sometimes a 10/30 mins video is way easier to read/watch than a 10 pages of docs on an API even more at 6 am when you wake up.)
I'm still learning about promises, but according to Eloquent Javascript, creating an array of promises is better done with a recursive function than with a loop.
Your videos are amazing, I purchased a webdev course online and they couldn't explain promise and async await concept so well which you did. Big Fan from the first video I watched on this channel.
I'm about to learn how to use async functions in express and wanted to refresh on this topic before jumping into that. So where do I come for help...Possibly the best youtube channel EVER!!! seeing you figure out things on camera help us figure it out as well. It makes us feel okay about being lost/confused about new material.
Though I do enjoy your teaching style and this is without a doubt my favorite RUclips channel, that ASMR bit at 4:36 was necessary to this lesson, I don't think any of this would have made sense to me without it.
I've been stuck with understanding promises and async/await this past 4 days.. (yes I know.. don't judge me lol) I just want to say thank you so much for doing what you do! I finally managed to grab the ideas behind promises I can finally sleep with peace :)
4:36 That whispering killed me 😂 GREAT Video by the way, please never stop making them! I've never heard about promises and now I am happy like a little unicorn, that I'll never be stuck in callback hell again! Thank you for those great videos!
Thank you for explaining that the async function returns a promise. All the other tutorials just assumed I should've known that but I'm just a beginner idiot doing dangerous things with javascript so obviously I don't lol Also love the style and art of the channel!
By the way, you can use "await" with any value or object. If it doesn't have a .then() method then it will resolve to the value itself otherwise it will act the same way as a promise with the .then() method.
So, async and await return promise, right? if so, do they handle resolve and reject implicitly unlike we have to handle it by our own while creating our own promise?
Quick question, are we sure that the function waits for all the other instructions in the set of instructions within function to get executed and then will get to return statement ? or we need to make sure to apply "await" even to a return statement ? Please advice...
I understand that an async function has to return a promise, and that the returned object in wordGIF() is actually just a resolved promise. But why return anything? Why not call createP and createImg inside the wordGIF function itself? Would that work?
Did you ever make any tutorials on how to have something running async and something else running at the same time (like the loading bar) I'm trying to run a brute force computation and draw the most recent part of that to the screen, I think I'd like the brute force to run in a loop over and over async without having to worry about the draw FPS but I'm not sure how to do this. As it stands without the async I have to put the brute force inside the draw and either the draw doesn't run at the given frame rate or the brute force is slowed (it can only do a certain number of iterations per frame)
Hello, just a question please. How the function wordGif can return both a Promise object and the object { word : ... url : ... }. Can you explain the mechanism ? Thank you
Hey @TheCodingTrain! I have got a question. Is there a way to store (without using arrays, objects...) Promise's Resolve function's 2 parameters in a variable/variables (with await) Ex. function something() { return new Promise((resolve, reject) => { resolve(10, 20); }); } async function meh() { let data = await something(); console.log(data); *//Will log only 10* }
why do we need to call .then() under 'wordGif()' being that wordGif() only returns a value after all the 'await's are finished. It seems like wordGif() returns a value that you could just put into a variable instead of a Promise to be processed in .then().
Is this possible to use this if I have an app that requires to get a callbackUrl from third party provider that handles the payments. So when I get directed to the payment portal on the third party's website and after payment, i get redirected back to our webbapp after payment i with a callbackUrl/parameter. I can use await to wait for the callbackUrl to fire my next function?
Wouldn't it be faster to save each promise to a variable and then create another variable for each await of the promise? (Run them in parallel) Ex: let response1Promise = fetch(wordnikAPI); ... let response1 = await response1Promise; ...
you can use any word! you are just naming the object that the wordGif() function returns.but you can also do it with any word ex: .then( lucas => console.log(lucas.data));
I'm pretty sure it's because that line of code doesn't exectue a function. Like the function above, it does response2.json() and converts the data into Json, while line 20 already has the data, it's just a look-up in the object, which picks out the information he wants.
Why didn't you await json2 to pass it to img_url but did await response1 to pass it to json1. I am having a hard time to understand, shouldn't img_url be undefined or something like null because we didn't await json2?
The thing I find very confusing is I can't mentally map what parameters get passed to promise functions.... I can't figure out why and how a function that I might already be familiar with is reconstructed into the Promise format. For Example take the code: async function slowFast() { var fast = function (msg, cb) { setTimeout(() => { L("Waited 1 Second"); cb(msg); }, 1000); }; var slow = function (msg, cb) { setTimeout(() => { L("--Waited 3 Seconds--"); cb(msg); }, 3000); }; await slow("Just finished Call to slow", (result) => { L(result); }); await fast("Just finished Call to fast", (result) => { L(result); }); } //slowFast(); ///// Output: (verified) //Waited 1 Second //Just finished Call to fast //--Waited 3 Seconds-- //Just finished Call to slow Which it's intent is very clear to try and finish slow before fast... Until I can map this to a "Promise" oriented structure... I'm lost.. I can't tell which functions I can string along with then statements... Please consider making a video that starts with 2 c++ style function (because that's were we all start but the language doesn't matter) then make examples that map a 0 parameter call and return 1 parameter call and return and 2 parameter call and return to this async and await / Promise structure.... I think that would be helpful....
am i wrong to suspect here, that these two formulations of the wordgif function are not equivalent really? namely in the es6 version the looked up word is already being displayed before we even attempt to fetch the gif associated with it, so even if this fails we will still see the word. whereas in the es8 version we won't. if that's the case, then i would prefer es6 version then, because i think that it doing as much as possible with what i it managed to gather is better and more informative for the user, then it just breaking down whenever one of the possibly hundreds of pieces in this await chain failes to deliver.
because the data fetched from the URL is raw JSON type meaning that they are raw text and is not usable variables within the program. The .json() method helps to convert raw JSON to usable variables and the converting process takes time to finish. that is the reason why he used "await" there. Additionally, the .json() method returns a promise (so by its nature, it needs await)
The first fetch process should not have to "await" next one. The first one and it's json method should await themselves and same goes the second one with it's json but this awaiter two group start fetching data immediately and parallely. Another super promise should have to pack them and await that two parallel process. That is how you get all the benefits of async programming in javascript. As sampled in the video second fetch method wait first one with no reason. They are returning promise, so they're work asnycronously.
wordGIF function is returning object ,but you are using .then() for the wordGIF while calling . wordGIF is not returning a Promise right?please help me with this Iam stuck at this point .
Is there a specific reason for you never using the debugger? You could use breakpoints and debugging like with GDB or LLDB. It could make up a good series or tutorial, if you're interested in it as well
Well... I actually feel the same. I sometimes use it, am completely surprised how amazing it CAN be and then forget about it again and fill all my code with console.logs ;) Thanks for all your effort, by the way!
Julian Weinert instead of using debugger; in the code. Open up the browser debugger, insert a conditional breakpoint and for the condition put console.log(). The browser evaluates the condition. This way you get your breakpoints and console.logs all without littering the source.
You save not having all that promise.then .... boilerplate anymore, with the exception of the toplevel case where you still have to use the Promise.then() ... syntax because you only can use await in an async function
Am i wrong, or are you actually writing this synchronously? I'm a bit confused, because it seems that by using await you are telling one function to await executing until the completion of another. I thought that was the definition of synchronous. Thanks!
Oh, great question! It is happening asynchronously! But await allows you to simulate the idea of "synchronous" in the way you write your code. This can only happen in an async function to make sure it plays well with the rest of your application.
i don't understand why wordGIF() returns a promise. it just returns an object. howcome the .then works on line 8? what makes the wordGIF() into a promise? in an earlier video, you showed how to make promises, and this function isn't setup like that. what gives?
Good question! I didn't even consider it during the video. Seems the 'async' always returns a promise: javascript.info/async-await Quoted here for easy reference: The word “async” before a function means one simple thing: a function always returns a promise. If the code has return in it, then JavaScript automatically wraps it into a resolved promise with that value.
async function always return a Promise and you got these values in then() function. example: async function foo(){ return { name: "Josh", age: "22" }} function bar() { foo().then(result => { console.log(result.name, result.age) }).catch(err => console.log(err)); } so, when bar function is called, the return is the value of name and age properties.
![Lil Uzi Vert - Chill Bae [Official Music Video]](http://i.ytimg.com/vi/D7F42F_JM3U/mqdefault.jpg)
This might be the best async/promise explanation on YT.
Indeed
Indeed
Indeed
Indeed
cause it is ! thx a bunch Dan
I like he demoed the whole internals of callbacks and promises before coming to async and await, so that people have a good understanding. Great teacher!
One important thing you didn't mentioned in this video is that, async function always returns a promise object.
I like how you make your content engaging. Thank you for the teaching. :)
I saw the img_url mistake the moment you typed it but watched all your debugging just for it's entertainment value haha love it!
same!
8:48 Stitch also celebrating it's working hahaha
That's so amazing :D
Damn that perfect timing.
dang it! ;'c
GOLD
So perfect xd
Hey !
I watched your part 1 at 6am the other day, and two hours later I used it all over my code to revamp my own API's and basically halved my code .. . And everything is so smooth now.
I'm working with big data, sql calls over 100 million lines and nodeJS is totally fine to deal with those things.
I just keep struggling with promises inside loops, can't find a way to declare "arrays" of promises that will work exactly in the way I want.
Maybe your next video, which I'm really waiting for, will help me towards that.
Keep doing the good work ! You make code look fun and accessible ! :)
(PS : i studied in one of the best IT schools in France and still find your content super relevant. And sometimes a 10/30 mins video is way easier to read/watch than a 10 pages of docs on an API even more at 6 am when you wake up.)
Not to mention, your code is likely far easier to reason about without the chains of thens.
wow that's awesome man
I'm still learning about promises, but according to Eloquent Javascript, creating an array of promises is better done with a recursive function than with a loop.
Your videos are amazing, I purchased a webdev course online and they couldn't explain promise and async await concept so well which you did.
Big Fan from the first video I watched on this channel.
Clean syntax rules. The readability of code is so important, and this async/await stuff is solid.
I'm about to learn how to use async functions in express and wanted to refresh on this topic before jumping into that. So where do I come for help...Possibly the best youtube channel EVER!!! seeing you figure out things on camera help us figure it out as well. It makes us feel okay about being lost/confused about new material.
Though I do enjoy your teaching style and this is without a doubt my favorite RUclips channel, that ASMR bit at 4:36 was necessary to this lesson, I don't think any of this would have made sense to me without it.
I've been stuck with understanding promises and async/await this past 4 days.. (yes I know.. don't judge me lol)
I just want to say thank you so much for doing what you do! I finally managed to grab the ideas behind promises
I can finally sleep with peace :)
this is the third video i clicked on trying to get this concept, you the best :)
4:36 That whispering killed me 😂
GREAT Video by the way, please never stop making them! I've never heard about promises and now I am happy like a little unicorn, that I'll never be stuck in callback hell again! Thank you for those great videos!
You are an excellent teacher. One of the best I've ever had.
i have seen few videos on promises and asynch things this is the best
Thank you for explaining that the async function returns a promise. All the other tutorials just assumed I should've known that but I'm just a beginner idiot doing dangerous things with javascript so obviously I don't lol
Also love the style and art of the channel!
First time to undedrstand the async and await after many attempts, appreciated (":
4:43 is glorious! Light beats Darkness!!
SERIOUSLY good explanation! Thank you.
This guy is great. Gets you so hyped to code.
watching this video again .. Loved the way you explain the stuff ... Thanks a lot for such a great videos.. Loved the Sound efeect ;-)
I'm so glad I found this channel :D
The most easily explain tutorial out there. Thanks a bunch coding train!
I am kind of late in the party, but I really enjoy your videos. Thank you.
Great Tutorial, I understand much more when you make errors,
thankyou so much I really enjoy learning things from. you are really great at explanation
I saw all the mistakes lol is what usually happens when cutting and pasting. Great tutorials on promises!
Your videos are amazing man
It was amazing, thank you for your lessons. I learnd so much thing from you
If setup() could be async, would it be possible to use await there instead of then?
By the way, you can use "await" with any value or object. If it doesn't have a .then() method then it will resolve to the value itself otherwise it will act the same way as a promise with the .then() method.
So, async and await return promise, right? if so, do they handle resolve and reject implicitly unlike we have to handle it by our own while creating our own promise?
have you tried a tern plugin for your editor? It will point out such errors like naming mistakes and stuff...
1:44 that little laugh he made killed me XDD
I couldnt understand very much, but i finished my practice. Thnks
Quick question, are we sure that the function waits for all the other instructions in the set of instructions within function to get executed and then will get to return statement ? or we need to make sure to apply "await" even to a return statement ? Please advice...
You inspire a lot. Keep it up.
8:47 @TheCodingTrain and Stitch celebrated at the same time cheering with thier hands up. 🤣
8:48 look at stitch
When you wrote createImg(results.img_url) I was literally yelling at the screen that it was .img not .img_url haha xD
hahahah, same here xD
And saying him when he is `logging`: "Hey man! It`s the prop name!" kkk
I understand that an async function has to return a promise, and that the returned object in wordGIF() is actually just a resolved promise. But why return anything? Why not call createP and createImg inside the wordGIF function itself? Would that work?
you made my day!
Love your energy!
Did you ever make any tutorials on how to have something running async and something else running at the same time (like the loading bar)
I'm trying to run a brute force computation and draw the most recent part of that to the screen, I think I'd like the brute force to run in a loop over and over async without having to worry about the draw FPS but I'm not sure how to do this. As it stands without the async I have to put the brute force inside the draw and either the draw doesn't run at the given frame rate or the brute force is slowed (it can only do a certain number of iterations per frame)
What if something went wrong in the function wordGIF, how do you catch the error ? Does the function exit at the first error and throw an error ?
What if you want to resolve a promise only after completion of a loop? My promise is resolving early before loop is completed.
Hello, just a question please. How the function wordGif can return both a Promise object and the object { word : ... url : ... }. Can you explain the mechanism ? Thank you
Hey @TheCodingTrain! I have got a question. Is there a way to store (without using arrays, objects...) Promise's Resolve function's 2 parameters in a variable/variables (with await)
Ex.
function something() {
return new Promise((resolve, reject) => {
resolve(10, 20);
});
}
async function meh() {
let data = await something();
console.log(data); *//Will log only 10*
}
why do we need to call .then() under 'wordGif()' being that wordGif() only returns a value after all the 'await's are finished. It seems like wordGif() returns a value that you could just put into a variable instead of a Promise to be processed in .then().
You are correct, its wrong to use .then() when you're working with asyc/await
Great tutorial. Is the code on github? I don't see it but I may be looking in the wrong place.
Could you file an issue at github.com/CodingTrain/thecodingtrain.com , we'll try to get the code up if it's not!
Making development fun
Is this possible to use this if I have an app that requires to get a callbackUrl from third party provider that handles the payments. So when I get directed to the payment portal on the third party's website and after payment, i get redirected back to our webbapp after payment i with a callbackUrl/parameter. I can use await to wait for the callbackUrl to fire my next function?
Thanks... The Coding Train....
You are the best! thank you so much
Wouldn't it be faster to save each promise to a variable and then create another variable for each await of the promise? (Run them in parallel)
Ex:
let response1Promise = fetch(wordnikAPI);
...
let response1 = await response1Promise;
...
U cannot run in parallel if next fetch depends on previous data..
great tutorial!
where did the word 'results' came from?
you can use any word! you are just naming the object that the wordGif() function returns.but you can also do it with any word ex: .then( lucas => console.log(lucas.data));
does http/ https matter in api calls?
Thank you!!
That is lovely!
8:29 Why don't use await in line 20?
I'm pretty sure it's because that line of code doesn't exectue a function. Like the function above, it does response2.json() and converts the data into Json, while line 20 already has the data, it's just a look-up in the object, which picks out the information he wants.
Can you make a video about AJAX?
Why didn't you await json2 to pass it to img_url but did await response1 to pass it to json1. I am having a hard time to understand, shouldn't img_url be undefined or something like null because we didn't await json2?
thanks a lot!!
9:08 why we don't need the await keyword in line 20 (let img_url...)?
Thanks ...
From what I understand, you have already fetched the result and needed to just save it in a variable. So there wouldn't be any need to use the await.
WordGif is a regular function not return a promise then how you can use .then when calling it. I am confused
wordGif is an asynchronus function (notice how it is declared with 'async function'). Thus, whatever it returns is automatically a promise.
I would've made setup async and then used await on WordGIF() instead of .then & .catch
The thing I find very confusing is I can't mentally map what parameters get passed to promise functions.... I can't figure out why and how a function that I might already be familiar with is reconstructed into the Promise format. For Example take the code: async function slowFast() {
var fast = function (msg, cb) {
setTimeout(() => { L("Waited 1 Second"); cb(msg); }, 1000);
};
var slow = function (msg, cb) {
setTimeout(() => { L("--Waited 3 Seconds--"); cb(msg); }, 3000);
};
await slow("Just finished Call to slow", (result) => { L(result); });
await fast("Just finished Call to fast", (result) => { L(result); });
}
//slowFast();
///// Output: (verified)
//Waited 1 Second
//Just finished Call to fast
//--Waited 3 Seconds--
//Just finished Call to slow
Which it's intent is very clear to try and finish slow before fast... Until I can map this to a "Promise" oriented structure... I'm lost.. I can't tell which functions I can string along with then statements... Please consider making a video that starts with 2 c++ style function (because that's were we all start but the language doesn't matter) then make examples that map a 0 parameter call and return 1 parameter call and return and 2 parameter call and return to this async and await / Promise structure.... I think that would be helpful....
Thank U so much
am i wrong to suspect here, that these two formulations of the wordgif function are not equivalent really?
namely in the es6 version the looked up word is already being displayed before we even attempt to fetch the gif associated with it, so even if this fails we will still see the word. whereas in the es8 version we won't. if that's the case, then i would prefer es6 version then, because i think that it doing as much as possible with what i it managed to gather is better and more informative for the user, then it just breaking down whenever one of the possibly hundreds of pieces in this await chain failes to deliver.
Can someone tell me the reason why await is used in line 13 and 16 at 4:10, because in previous lines 12, 15 they are used. so why use it again
because the data fetched from the URL is raw JSON type meaning that they are raw text and is not usable variables within the program. The .json() method helps to convert raw JSON to usable variables and the converting process takes time to finish. that is the reason why he used "await" there. Additionally, the .json() method returns a promise (so by its nature, it needs await)
The first fetch process should not have to "await" next one. The first one and it's json method should await themselves and same goes the second one with it's json but this awaiter two group start fetching data immediately and parallely. Another super promise should have to pack them and await that two parallel process. That is how you get all the benefits of async programming in javascript. As sampled in the video second fetch method wait first one with no reason. They are returning promise, so they're work asnycronously.
thanx, you are awesome!
It's too much fun watching you! Great series, thanks
Why not use `debugger` keyword for debugging, so that you don't need to console.log() step by step.
wordGIF function is returning object ,but you are using .then() for the wordGIF while calling . wordGIF is not returning a Promise right?please help me with this Iam stuck at this point .
was I the only one to notice that stitch in the gif also lifted her arms the moment the code worked at min 8:51?
wonderful !
Is there a specific reason for you never using the debugger? You could use breakpoints and debugging like with GDB or LLDB.
It could make up a good series or tutorial, if you're interested in it as well
This is a good point. The only reason is that I'm not super comfortable with it and have old habits.
Well... I actually feel the same. I sometimes use it, am completely surprised how amazing it CAN be and then forget about it again and fill all my code with console.logs ;)
Thanks for all your effort, by the way!
Julian Weinert instead of using debugger; in the code. Open up the browser debugger, insert a conditional breakpoint and for the condition put console.log(). The browser evaluates the condition. This way you get your breakpoints and console.logs all without littering the source.
Cool you are great.
"I am like a chef! Muah!"
What is syntax sugar?
It's a term that refers to making the programming language syntax easier to read and understand (but the underlying way it works doesn't change!)
Can anyone tell me about those createP and createimg functions ! How it worked !! 😅
Ok I'm in a knot over this.
I get promises. I think I get async await.
I can't see any difference in the two just promises is longer. Am i crazy?
You save not having all that promise.then .... boilerplate anymore, with the exception of the toplevel case where you still have to use the Promise.then() ... syntax because you only can use await in an async function
Am i wrong, or are you actually writing this synchronously? I'm a bit confused, because it seems that by using await you are telling one function to await executing until the completion of another. I thought that was the definition of synchronous. Thanks!
Oh, great question! It is happening asynchronously! But await allows you to simulate the idea of "synchronous" in the way you write your code. This can only happen in an async function to make sure it plays well with the rest of your application.
Thanks, good explain ,when Isaw yours videos cours,Ifeel in real class room cours :)
the coding kitchen #danthechef
ETA on part 3?
Niceee
That Rugrats gif lmao
You are gesticulating all the time, but you don't propose any clean code for fetch error handling; in particular when we fetch multiple time.
dude... you are almost a demigod to me, greetings from Argentina!!
Did anyone noticed the hand raising timing between him and the Koala??
i don't understand why wordGIF() returns a promise. it just returns an object.
howcome the .then works on line 8? what makes the wordGIF() into a promise?
in an earlier video, you showed how to make promises, and this function isn't setup like that. what gives?
Good question! I didn't even consider it during the video. Seems the 'async' always returns a promise: javascript.info/async-await
Quoted here for easy reference:
The word “async” before a function means one simple thing: a function always returns a promise. If the code has return in it, then JavaScript automatically wraps it into a resolved promise with that value.
async function always return a Promise and you got these values in then() function.
example:
async function foo(){ return { name: "Josh", age: "22" }}
function bar() {
foo().then(result => {
console.log(result.name, result.age)
}).catch(err => console.log(err));
}
so, when bar function is called, the return is the value of name and age properties.
oh. okay :)
thanks.
that'll show me. trying to learn from youtube videos, and being too lazy to actually check the documentation xD
actually by just watching the video is pretty easy to deduct that async returns a Promise, just try to pay more attention :)
Did you just awaited Stitch to sync with him??!
I'M LIKE A CHEF! MWAH!
you are osm
Why did you use "await" before response.json()?
is it asynchronous call?
indeed!
I've been awaiting for that goodie
nice (y)
The playlist needs changing a little. The next video is 16.16 instead of 16.15