YTread Logo
YTread Logo

Async JS Crash Course - Callbacks, Promises, Async Await

Jun 04, 2021
and we could pass the function with resolve reject and let's set that so we do a set timeout and we'll call resolve and call that in two thousand milliseconds and we'll just say goodbye okay now what we can do is call promise dot all and what this does is it requires a series of

promises

, so we have three of these up here, let's say Promised One, let's make the promise and promise three and then this will take a point, so we want to make a point and then pass here or a callback, so we're going to use an arrow function and it's going to take values ​​like that and then we're just going to console.log, so we don't need that, we're going to console the dot log values, okay, let's see what happens if I save this okay, so what happened is it gave us back an array with hello world, so the first promise, the second one which is just a number and then this one, bye, we actually set a timeout of two thousand or two seconds and that's why he took two. seconds to return all it will take, however the longest promise is the time it will take to show us the values, and just to add one more thing here, let's say constant promise for now, well, I'm sure many of you have Worked with the Fetch API to make Ajax calls or make HTTP requests.
async js crash course   callbacks promises async await
I should say it returns a promise so search from let's let's use Jason write some code or jate what is it is Jason placeholder type dot echo calm and we can make a request to say users right here and get users I'm going to take that URL and pass it here now this returns a promise now find is a bit strange because what happens is you need to make two point curves when you use find because first you need to format it usually to Jason and then the next point will give you the data so if I keep them as they are and I pass the promise and save them, it will work, but if we look at the response here, we get weird things, what we want to do is search, we want to do a dot, then and we want to map the response to res dot Jason like that and now, if we run it, it should give us the actual data that you can see here, it's going to be ten users, so we promise it's not at all easy, now let's see look, let's see a waiting sink, okay, so I'm going to comment this out and we don't want to change nothing of this.
async js crash course   callbacks promises async await

More Interesting Facts About,

async js crash course callbacks promises async await...

I mean, a wait sink is a way of handling responses, it's not a different way of writing them or basically, we need to have a function labeled

async

hronous, so let's go down here, we'll actually go over this because this promise point doesn't has nothing to do with the code above, let's say a sink, oh wait, okay, so what do we want to do? is to create a function and I'm just going to call it and now this function needs to be tagged as

async

hronous if we want to use a weight inside of it and a weight does just that, it waits for a synchronous process or action to complete. so what we're going to do is call create posts, so I'm just going to copy this here without the dot and then just create posts with the title and body passed in, except we want to call right before. one peso is fine and after that we can just call get posts so we're waiting for this to be done until we go ahead and call this so now we just need to call it and save it and we should see them appear. on the screen and there we go, that's how a sync works.
async js crash course   callbacks promises async await
It's just a more elegant way of handling

promises

now, if we wanted to use it, say with fetch, we could do that too, so I'll move on. and comment that out let's go out here let's say a sync oh wait with fetch okay let's copy what we did here let's just take that and we'll need an async function let's just call this we'll say fetch data or fetch function users. and then we want to call that fetch except we want to put this in a variable and let's call it response or res and set it to fetch wait because remember this returns a promise.
async js crash course   callbacks promises async await
Now again, the fetch API is a little strange because the first promise comes back, we're going to need to call res dot Jason on that, so what we would do is create another variable called data and set it to a weight and then res dot jason like this and then we could console dot log the data. so let's save that and it won't do anything because we don't call it so let's call find users and save and voila we should get 10 users so it's just a cleaner way of dealing with promises instead of making the point. then, and all that, especially with fetch, makes it look even better, we just have these variables and everything is one after another, there's no point, then no point, you know whatever, and it's cleaner than the returns of call, so that's it guys.
I just wanted to cover the basics and you know those of you who weren't really understanding this stuff and I know a lot of you already know this and okay, you know a refresher never hurts, but that's going to whether you're guys, so I'm working on some longer form content, some projects, some views, J views, and get some deals in order in my personal life and you know if you watched my last video it tells you a little bit about what's going on but thanks for watching I hope you like this if you did please leave a like and let us know we see in the next video

If you have any copyright issue, please Contact