I finally got the idea of async in JS, up to this moment I struggled with understanding sequences of actions when running async code. Now I understand it completely, thanks James!

You just don't give a basic example of the usage of asyc/await, you give how to use them in multiple calls scenarios. Great work!!! And thank you for sharing!

This has been a big help James, thanks so much! I have been struggling trying to convert promises to async/await functions and seeing you walk us through it step-by-step really helped a lot!

Heeey! Thanks for all that async/await content on Your channel! I did get my first junior react dev job thanks to You! I used async/await and try-catch in my tech meeting interview task, and they were impressed! I'm really, really grateful for that!

Clearest explanation I've found for how these all relate. Thanks!

Wow!! I was literally waiting for this content...very nicely explained❤️ thanks James..

The best video that explains the two different ways of calling async function! await is always much cleaner than the .then .catch.

I'm glad there a lot of people disagreeing with you. Your video is nice and well explained, but I got to say I prefer ".then" over "async/await". I simply found it way easier to understand. It's closer to how a human would think about something asynchronous. "do this and when you will have the data, then do that." when I was learning JavaScript, the async/await was bugging me and what made me understand it was the "then"

@RyanFlores9

2 жыл бұрын

I agree. Seems like a lot of (relatively) newer JavaScript improvements are making it possible to write more lean and compact code, but that doesn't necessarily make it more (human) readable. One could argue it could be due to lack of familiarity, but for me personally, I'd use that argument for learning a new framework/toolkit/API/SDK over an evolving language. I see other languages improving over time, but a lot of changes that were made to JavaScript introduced a lot of inconsistencies IMHO. The changes introduced a lot more "ways to skin a cat" instead of focusing on readability and a single "best/right way" to do things.

@PerttuSaarsalmi

2 жыл бұрын

I disagree! I can’t wait to get refactoring our messy asynchronous code in my current project! 😂

@arturmrozinski7536

2 жыл бұрын

I have a 300 lines long test and async/await cut execution time from 14 sec to 4. Who cares about human undertanding? Its not for regular bread buyer. You learn it in a day and benefit for life. '.then' is slowwww

@chess4964

2 жыл бұрын

.then is just for old people, you need to cope up 😂

@thepetesmith

Жыл бұрын

Jonathan, you’ll get used to it. It’s cleaner.

Loved this one! Thanks for clearing it out for me. Keep it up!! 🚀🎉

I finally learned how to use the Promise.all method in an Async/Await function. Thanks, bro for your work...

@JamesQQuick

3 жыл бұрын

You’re very welcome!!

I must say I still think working with Promises is a lot more clean than working with async/await. With async/await, you end up with a lot more LOC's, you still have to deal with a promise if values are returned from the async function, or you have to use top-level async/await, which is ultimately undesirable since asynchronous code can lead to frustrating long debugging when not applied correctly in respect to synchronous code.

@bulletinmybeard

Жыл бұрын

I agree!

I can finaly say I understand all this promises and async stuff. This video was perfect to wrap it all.

Congratulations Finally. A good path to understand. Tks man.

Amazing, just about a few hours I was making several sequential fetch's to an API, and now I crossed with your video, now I feel the power, and how to make then kinda asynchronous again, thanks.

Great tutorial! You have a great, even keel persona in your presentation and that works great! I have personal OCD sort of things around try catch I am trying to overcome. You made this much more approachable :) Love the use of the .map call to manage the results!!! Great little trick.

this is one of the most useful videos I have watched in a long time. Thanks man 👍

Very clear explanation! Thank you so much!

Thank you for this awesome explanation and demonstration!

Thank you for this video. Really helped me understand not only why but how to migrate from .then to await. As a bonus, you helped me solve the multiple url problem I was going to work on this weekend! Thanks again.

@JamesQQuick

3 жыл бұрын

Glad it was helpful!

One of the clearest explanation of async/await I have ever seen. Thanks James!!

@JamesQQuick

Жыл бұрын

Yeahhhh!!

Thank you!!! i was stuck with this for 2 days but now I was able to solve the problem. Amazing tutorial.

James, you are a legend :) have seen multiple of your videos and your approach to coding is very inspiring.

" *We* completely missed that"-Hey man you're flying solo on this one.

@JamesQQuick

3 жыл бұрын

What? lol

@BobbyBundlez

2 жыл бұрын

The haters on these comments is just so funny. Shut up bro this tutorial is great

@stevenleonmusic

2 жыл бұрын

@@BobbyBundlez I'm pretty sure I was just poking fun at his use of "we" when the video is just him, alone. It's a 20-minute video from a year ago though so it's not really worth my time to try and remember. I cannot imagine why it was worth your time commenting to begin with.

@zeta519

Жыл бұрын

@@stevenleonmusic says the person who replied with an entire essay

@stevenleonmusic

Жыл бұрын

@@zeta519 Buddy if you think that's an essay all I can say is you need to read more.

..., just one of your best episodes - many JS programmers are doing `this` or `that` just because one API set of paradigms or another will give them what they need for their immediate task. But the deep knowledge reside in knowing WHY `this` is better `that` in very a particular or a very general circumstance. It would be perfect if you can talk more about how JS engine is working behind the scene, about JS Event Loop / JS Call Stack / etc. Thanks again for your very explicit shows.

Muito bom, parabéns. Sempre achei um problema utilizar Async/Await

Thanks! I'm new to JS and building the back end of a web app. This is exactly the info I was looking for.

Really well explained. Thank you.

Wow -- a tough topic and you managed to explain it with good examples.

Hey all! I have a few clarifications about Promise.all coming in a new video shortly.

@adamlbarrett

3 жыл бұрын

It’s nice that you made the video, but actually you weren’t wrong then and now the “I was wrong”’ video has misinformation about Promise.all() You do the best with what you have at the time though, I love that you wanted to do the right thing and admit you were wrong …unfortunately you were not. The single threaded nature if JavaScript the language allows it to be predictable but you can call out to host systems and do things in parallel, like for example making request. Simple proof would be just making a quick service that responds after 1 second and you’ll see that the Promise.all() version does in fact take about 1 second while awaiting each takes approx 3. The stuff that does not happen in parallel is placing resolutions in the micro task and dealing with the stack calls as the event loop resolved them but that is trivial compared to the network call. Anyway, nice to try and do the right thing, can’t wait for the I was wrong about being wrong video 🙂

@JamesQQuick

3 жыл бұрын

@@adamlbarrett Yep, I'm now scrambling to figure out how to fix this again lol I started overthinking it all while reading comments. I'm creating another video shortly for extra clarification and unlisting the other :)

@adamlbarrett

3 жыл бұрын

@@JamesQQuick I immediately regretted adding to the cesspool that is "KZread comments" as soon as I posted it. But good luck with this whole thing!

@adamlbarrett

3 жыл бұрын

@@JamesQQuick You may want to dip into parallel vs concurrent when you explain why the Promise.all() happens at the same time. People get pedantic about the word parallel sometimes, and I think that was the cause of the original commenters confusion

@JamesQQuick

3 жыл бұрын

@@adamlbarrett Uploading a new video shortly and mention a bit of the difference there!

Thank you, James.

Thank you for sharing this with us very helpful.

Thx, helped me a lot to improve some ugly parts in a current project. Specially the part with Promise.all.

Thnak you. Excellent video.

Thanks for the wonderful video. All concepts cleared. I was using multiple awaits without understanding the reason behind. The promise.All solution is fantastic. Waiting for more such tutorial.

@JamesQQuick

3 жыл бұрын

So glad this was helpful!! :)

even though I've been using this stuff for a good while now, the Promise.all part was really useful :D

Thanks a lot for sharing this! This really helped.

Great explanation. Cristal clear

very helpful video, easy to understand

They both have their place. Promises are cleaner for pipeline type stuff, particularly if you can go point-free: fetch(url) .then(res => res.json()) .then(console.log) .then(console.error) It's often a more concise syntax, (reduce lines of code by 30%) so can be great for testing also. Also less cognitive load. Async await has its place, especially for writing big chunks of procedural code where you really need space to work in. Also it's easier to debug.

@DemanaJaire

2 жыл бұрын

Very much that, babs.

Thanks this helped , especially the Promise.all() part.

Thank you!!!! Very understandable!

Perfect explanation!

Great as always, thank you.

Thank you soooo much!!! this really helped.

Awesome! Thanks, learnt heaps.

I think this cannel is the most useful one about programming, especially for JS. Thank you!

@JamesQQuick

3 жыл бұрын

Yassss! :)

This helped a lot. Thanks ma!

Man it's going to make my life easier, thank you.

@JamesQQuick

3 жыл бұрын

Yayyyyyy

great tuto ! thank you!

Thanks for sharing ! Will try to apply this to my current react project where i am fetching companies then convert all their adresses to lat, lng with the google geocoding api and then display a google map with all the markers. Would be a nice video ^^

Await/async has two very great advantages. If you dont transpile to es5 async functions give better stacktraces. Also error handling is easier to read as many programmers make mistakes about what is the difference between catch and the second optional argument to then

Great explanation!

amazing tutorial thanks.

Useful advice 👍

super awesome tutorial!!! i learned async/await in first 5 minutes of video.best video.❤❤❤❤❤❤❤❤ much love from iran

@JamesQQuick

2 жыл бұрын

Thank you!

Thanks, James

Super helpful video. Thank you!

@JamesQQuick

3 жыл бұрын

Glad it was helpful!

Great material, thank you very much!!!!!!!!!!!!!!!!!!!!!!

nicely explained.. just gone fear about async, await.. thanks a lot.

Useful content,200th Like ❤️

One other thing to probably be weary of, if you have too many await statements or long chained promises and then succeed them by some logic that is not directly related to the response they generate, you would potentially block JS from rendering the UI. Its important to put all your awaits only within an async function scope and not do anything else in there.

@JoseMiguelLoor

Жыл бұрын

I think that a good example of that is using observables in typescript

Well sumed up mate

Thanks dude!

async/await being syntactically "cleaner" is pretty well a value judgement. There are some real advantages to async/await though, chiefly (1) an asyncFunction is guaranteed to throw by way of returning a rejected promise (or rejecting its returned promise), even from a sync code fail ... the advantage accrues in the caller (2) .then().then() related scope issues disappear ... remember all those "how do I access previous results?" questions in StackOverflow?

@timderks5960

2 жыл бұрын

I definitely agree on the "cleaner" part, the example from this video is a lot cleaner in the .then syntax IMO. It can also be a lot shorter than the async await version, since it could easily be on 4 lines without losing any clarity. Even though the async await version is a lot more verbose, it's a lot messier than the .then version.

@thatguynamedmorgoth8951

2 жыл бұрын

Honestly, the promise.all example was really ugly. I'd rather just do: let urls=[....... ] return Promise.all( urls.map( url => fetch(url).then(res=>res.json()) ) ) This is so much cleaner than the example in the vid

@mlntdrv

2 жыл бұрын

@@thatguynamedmorgoth8951 Promise/then hell detected - the then is nested. Should be chained under the Promise.all() call.

@thatguynamedmorgoth8951

2 жыл бұрын

@@mlntdrv the then callback would also need to have a map operation which I find kinda ugly, though it's a valid answer

Nice work♥️

Really great video! Many good insights on how promises work. I agree async/await > .then

@RyanFlores9

2 жыл бұрын

Maybe in some scenarios, but not all.

thank you man.

Love that !

lovely !!

Excellent video. You explained things very clearly and coherently. I wish I had your skill to explains things the way you did in this video. This goes without saying that I'm not 100% convinced that I should refactor all my code to use await/async. But I'm glad to see that I have the option and ability to use them. Thanks.

@JamesQQuick

2 жыл бұрын

Glad this was helpful. It's definitely good to be aware of your options1

I wanna marry your code it looks so clean :)

Awesome Video

Nice video!

I'm currently working on a project where I needed to upload images to an API and get the returned URL so I could store it in the database, and this video helped in solving the puzzle.

@JamesQQuick

3 жыл бұрын

yasss!!

Thank you

Great video

So, my mindset all this time is wrong. I thought you still have to use then catch with await keyword. Now, i'm fully understand, thank you for this lesson.

Really great content. When you start having multiples functions across multiple files handling promises gets hard as hell.

thank you for explaining properly how getting that data needs to be handled by a .then. I tried understanding stack overflow but they just rude lol

loved it

Hi James, many thanks for the clear explanation! I have a question: What code do I need to add in order to load on an array the information that I get on “data” instead of printing it to the console? Let’s say I have an array: answerList: any = [ ]; And I want to load all the Jason / Jason’s that I get from the WEB site. Many thanks in advance and best regards,

Both valid, all preference

Very neat. Dumb question: what is this tool that you are using for editing and viewing results? Thanks!

You always Good

thanks a lot

Both are valid!

Good stuff 👍

@JamesQQuick

2 жыл бұрын

Thank you!

I personally prefer the .then syntax, instead of multiple try-catch you can catch each promise easily. Async await is a new synthetic sugar that you don't have to use, but may. Plus you can use it on top level as well with no IIFEs or whatever.

@mykalimba

2 жыл бұрын

I think you mean syntactic sugar?

fetch(url).then(res=>res.json()).then(console.log).catch(console.error); Anyway: what about `finally`?

@MrMudbill

3 жыл бұрын

Finally works as expected for both approaches. Either with chaining .finally() after .catch()/.then() or in an async/await "finally" block on the try-catch

Thanks a lot James, this is reall helpful. I do have a quetion that if I have a function A() using async/await, when I call A() in another function B(), do I still need use "await A();" or just "A()" should do the work?

change your fetch(url1 // etc) to fetch(url1).then(r=>r.json()) and you remove the need for the array map entirely. You can also add .catch to each to handle errors specific to each URL. Just an example of the power of combining await and promises together to make clean code. This trick becomes useful when you end up needing several different resources at the same time (instead of 3 todo's as shown here that return the exact same structure). Invariable some years later one of those calls will change and you will end up using another .then to reformat the data to match whatever it needs to be.

Thanks

Thank you! Needed this

Cool tips James. What is the benefit using Asycn await?

Watching someone make a coding error on KZread is the adult version of Steve asking where Blue is. He's right there! We can see his tail! You forgot await!

Amazing video, first comment 😀

The amount of hate in these comments and pestering nerds trying to one up is so funny. Relax guys. Thanks for the tutorial

Nice explanation! I am always bummed though to use try / catch for error handling. I wish async / await had some better way to handle that. Thanks!

@RyanFlores9

2 жыл бұрын

Why? Try-catch should be used often in most/all programming languages. Heck, even SQL has try-catch error handling. It's usually a good idea to have an exception handler for specific scenarios.

@RichFinelli

2 жыл бұрын

@@RyanFlores9 agreed that error handling and try / catch is key. I just like the .catch() method you can use with promises a little better. It’s cleaner. But you’re right try/catch not only works but is needed with async await. It doesn’t stop me from using async await over promises either.

Excellent Explanation! the IIFE tricky function I knew that as a Anonymus Func, is the same?

@JamesQQuick

3 жыл бұрын

The IIFE makes use of an anonymous function but they’re not the same thing. The IIFE is used to immediately call the function that’s there

I'd like to take a different approach when fetching and parsing to json, you can do await(await fetch(url)).json() and it will return the actual data in just a line of code