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.
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.
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!
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.
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!
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?
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.
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'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 :)
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?
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!
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 .
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.
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.
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* }
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....
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?
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?
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)
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)
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...
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.
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.
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 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
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.
Clean syntax rules. The readability of code is so important, and this async/await stuff is solid.
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
It's too much fun watching you! Great series, thanks
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.
This might be the best async/promise explanation on YT.
Indeed
Indeed
Indeed
Indeed
cause it is ! thx a bunch Dan
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!
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.
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!
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.
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!
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
watching this video again .. Loved the way you explain the stuff ... Thanks a lot for such a great videos.. Loved the Sound efeect ;-)
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?
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.
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'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 :)
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
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?
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!
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 .
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.
8:48 look at stitch
Initially, I wanted to cancel the video, but ".then" I ".caught" the errors. 😅😅😅
Can you make a video about AJAX?
8:15 one of the ugliness of javascript, you can't know if you access right key of an object or not. anyway, great video
I would've made setup async and then used await on WordGIF() instead of .then & .catch
You inspire a lot. Keep it up.
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.
What if you want to resolve a promise only after completion of a loop? My promise is resolving early before loop is completed.
First time to undedrstand the async and await after many attempts, appreciated (":
8:47 @TheCodingTrain and Stitch celebrated at the same time cheering with thier hands up. 🤣
I am kind of late in the party, but I really enjoy your videos. Thank you.
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 ?
thankyou so much I really enjoy learning things from. you are really great at explanation
Great Tutorial, I understand much more when you make errors,
If setup() could be async, would it be possible to use await there instead of then?
"I am like a chef! Muah!"
Should have just gone with {word: word, img: img}
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?
4:43 is glorious! Light beats Darkness!!
i have seen few videos on promises and asynch things this is the best
its not "we did it" its "you did it" .. because I didnt understand shit
Did you just awaited Stitch to sync with him??!
I am so incredibly angry over that dot at line 11
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.
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*
}
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....
Making development fun
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!
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 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?
1:44 that little laugh he made killed me XDD
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.
SERIOUSLY good explanation! Thank you.
Why do i see him like Gerard Pique?
does http/ https matter in api calls?
Thanks, good explain ,when Isaw yours videos cours,Ifeel in real class room cours :)
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?
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)
Why not use `debugger` keyword for debugging, so that you don't need to console.log() step by step.
Your videos are amazing man
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)
sigh, why do these guys always cut off the right side of the code and have a huge blank IDE space on the left so we can't see all the code?
Apologies, I'm trying to get better at sizing everything for best viewing, thanks for the feedback!
I couldnt understand very much, but i finished my practice. Thnks
have you tried a tern plugin for your editor? It will point out such errors like naming mistakes and stuff...
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...
Can anyone tell me about those createP and createimg functions ! How it worked !! 😅
Love your energy!
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.
the coding kitchen #danthechef
That Rugrats gif lmao
It was amazing, thank you for your lessons. I learnd so much thing from you
The playlist needs changing a little. The next video is 16.16 instead of 16.15
I saw all the mistakes lol is what usually happens when cutting and pasting. Great tutorials on promises!
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.
I'M LIKE A CHEF! MWAH!
The most easily explain tutorial out there. Thanks a bunch coding train!
That is lovely!
Did anyone noticed the hand raising timing between him and the Koala??
this is the third video i clicked on trying to get this concept, you the best :)
Thank U so much
You are an excellent teacher. One of the best I've ever had.
I'm so glad I found this channel :D
you made my day!
why not make all the functions async :P
Thank you!!
thanks a lot!!
you are osm
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..
This guy is great. Gets you so hyped to code.
You are the best! thank you so much
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.
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
isbit.mx
8 people don't like to keep their promises
thanx, you are awesome!
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 :)
Thanks... The Coding Train....
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!)