Tips For Using Async/Await in JavaScript

Рет қаралды 394,819

Күн бұрын

Async/Await is a much cleaner syntax for working with promises than using .then(). Let's take a look at how to convert an asynchronous function from using .then() to using async/await and learn a few tips along the way.
00:00 - Intro
00:45 - Fetch Example with .then
01:30 - Convert Promises to Async/Await
04:40 - Use Try/Catch for Errors
06:30 - Async Functions Return a Promise
07:40 - Use IIfe for Top-Level Await
09:00 - Promise.all()
_____________________________________________
Newsletter 🗞
Interested in exclusive content and discounts? 🤯 Sign up for the newsletter!
www.jamesqquick.com
_____________________________________________
Connect with me 😀
Live streams on Twitch - / jamesqquick
Follow me on Twitter - / jamesqquick
Join the 💬 Discord Server 💬 - / discord
_____________________________________________
COURSES 💻
Learn how to build Fullstack apps with React and Serverless Functions - www.jamesqquick.com/courses/r...
Learn everything you need to know about Visual Studio Code - www.udemy.com/learn-visual-st...
Build a Quiz App - www.udemy.com/build-a-quiz-ap...

Пікірлер: 459

@TheNelsonc24 3 жыл бұрын

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!

@QmFhbFpldnV2 2 жыл бұрын

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!

@nikkittb 2 жыл бұрын

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!

@danielwisniewski5989 2 жыл бұрын

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!

@rexxon1611 2 жыл бұрын

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

@varshasingh1299 3 жыл бұрын

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

@stevenleonmusic 3 жыл бұрын

" *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.

@jedirvine 3 жыл бұрын

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

@rafaelcanchola9417 2 жыл бұрын

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.

@ignacioanezin2352 3 жыл бұрын

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

@jonathanroy72 3 жыл бұрын

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.

@TheDandef 2 жыл бұрын

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!

@ChrisLove 2 жыл бұрын

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.

@LogansRun45 3 жыл бұрын

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!

@InsaneMetalSoldier 2 жыл бұрын

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

@nemesioansorin 2 жыл бұрын

..., 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.

@xpo11ox 3 жыл бұрын

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!!

@ricdotnet 2 жыл бұрын

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

@gregclarkreasons 3 жыл бұрын

Thank you for this awesome explanation and demonstration!

@rolandodiaz3381 Жыл бұрын

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

@sordahl 2 жыл бұрын

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

@RobertoGPuentesDiaz 3 жыл бұрын

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

@rameshjp7045 3 жыл бұрын

Thanks a lot for sharing this! This really helped.

@stevenng1040 Жыл бұрын

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

@JamesQQuick Жыл бұрын

Yeahhhh!!

@johnkeck 2 жыл бұрын

Very clear explanation! Thank you so much!

@mudyeet_ 3 жыл бұрын

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

@akusa03 3 жыл бұрын

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!! :)

@SebastianStein85 2 жыл бұрын

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

@dgonch 3 жыл бұрын

Great as always, thank you.

@PrimephotoStudio 3 жыл бұрын

Thank you for sharing this with us very helpful.

@SaidElnaffar 2 жыл бұрын

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

@jeromedicharry1340 3 жыл бұрын

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 ^^

@DuncanMargetts 3 жыл бұрын

Awesome! Thanks, learnt heaps.

@MatheusSouzaRigote 3 жыл бұрын

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

@johnrodger5467 2 жыл бұрын

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.

@nicholascutlip Жыл бұрын

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

@elisasoto1 3 жыл бұрын

Great explanation. Cristal clear

@sak1b 3 жыл бұрын

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

@JamesQQuick 3 жыл бұрын

Yayyyyyy

@cli23 3 жыл бұрын

Great explanation!

@smithscarborough9840 3 жыл бұрын

Super helpful video. Thank you!

@JamesQQuick 3 жыл бұрын

Glad it was helpful!

@seismico 3 жыл бұрын

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

@JamesQQuick 3 жыл бұрын

Yassss! :)

@maxtate906 2 жыл бұрын

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

@JamesQQuick 2 жыл бұрын

Thank you!

@tapantorbangla 3 жыл бұрын

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

@CvetaMobi Жыл бұрын

Thank you!!!! Very understandable!

@TheVisionBT 2 жыл бұрын

great tuto ! thank you!

@juliusekandem 2 жыл бұрын

Thank you soooo much!!! this really helped.

@PieJee1 2 жыл бұрын

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

@sabuein Жыл бұрын

Thank you, James.

@Asli_ 2 жыл бұрын

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

@RyanFlores9 2 жыл бұрын

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

@AdamCole1 Жыл бұрын

Really well explained. Thank you.

@AlThePal78 2 жыл бұрын

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

@ewalshp 2 жыл бұрын

Thnak you. Excellent video.

@184Simon 2 жыл бұрын

Perfect explanation!

@raguilaru 3 жыл бұрын

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

@RyanFlores9 2 жыл бұрын

Maybe in some scenarios, but not all.

@PFOctavio 2 жыл бұрын

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

@Kunal-jp8tn 2 жыл бұрын

amazing tutorial thanks.

@cmtv357 2 жыл бұрын

This helped a lot. Thanks ma!

@yb3985 2 жыл бұрын

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.

@Hertog_von_Berkshire 2 жыл бұрын

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

@oneinazillion 2 жыл бұрын

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

@mareboinaravi5272 3 жыл бұрын

Useful content,200th Like ❤️

@atiqbaqi Жыл бұрын

very helpful video, easy to understand

@hurleywflow2227 3 жыл бұрын

Love that !

@victory_lucky 3 жыл бұрын

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!!

@vladometodiev3086 Жыл бұрын

Thanks dude!

@Pareshbpatel 2 жыл бұрын

Thanks, James

@yoonustehraniam8891 2 жыл бұрын

Useful advice 👍

@alexhe8276 2 жыл бұрын

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?

@gustavo.paixao 3 жыл бұрын

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

@paoro814 2 жыл бұрын

thank you man.

@jazper808 2 жыл бұрын

I wanna marry your code it looks so clean :)

@bryanmora4996 2 жыл бұрын

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

@nicknesler 2 жыл бұрын

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

@ampinkus Жыл бұрын

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,

@matthiaskolley1048 3 жыл бұрын

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

@contentshark5122 2 жыл бұрын

lovely !!

@BrendanMetcalfe 3 жыл бұрын

Nice video!

@m2kdevelopments 3 жыл бұрын

Awesome Video

@sumitpandey7446 2 жыл бұрын

Well sumed up mate

@SinisterSlay1 2 жыл бұрын

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.

@michaelvadney5803 2 жыл бұрын

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

@bulletinmybeard Жыл бұрын

Since I started writing a JS SDK a while ago, I’m using Promises with then/catch a lot and without running into issues like “unhandledrejection” which you should catch, regardless. Especially when using promises in class constructors where Async/Await is not an option.

@pratyushkumar5740 2 жыл бұрын

Nice work♥️

@RichFinelli 3 жыл бұрын

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.

@MagnusAnand 3 жыл бұрын

Great video

@igpekasuryawan 2 жыл бұрын

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

@md.asifal-mahmud5952 3 жыл бұрын

thanks a lot

@davidhainovitz2838 2 жыл бұрын

Just a small amendment : results.json() converts json to a js object not vice versa (13:18 ) A quote from MDN web docs: Note that despite the method being named json(), the result is not JSON but is instead the result of taking JSON as input and parsing it to produce a JavaScript object.

@tarekm7766 3 жыл бұрын

Thank you! Needed this

@mrookeward 2 жыл бұрын

May I suggest that you include links to relevant MDN pages? A lot of people STILL have to deal with IE11 and these types of really nice JS features are just not available, so, if you're new to the games, then this would be a buzz kill. Nice video - keep up the good work!

@RyanFlores9 2 жыл бұрын

Just don't use newer JavaScript features if you need to support an audience or customer base that continue to use an outdated/insecure browser. Either force users to switch by displaying a message (after performing a browser detection), or limit those users to an old/nerfed version of your site/app if you do end up wanting to transition to using newer JS features. Your comment reminds of the good 'ol days of needing to continue support for IE5, IE7, IE9... If you're able to get the metrics on the percentage of your users who still use IE11, and the number is (relatively) small, it might be time to just cut your losses on those people. Not to mention, IE11 will reach EOL in June 2022, so is it really worth it to maintain a deprecated/dying code base? Some people just need to learn to move on.

@devprakash5320 2 жыл бұрын

loved it

@JoseMiguelLoor Жыл бұрын

Good explanation although I like using .then() more than async/await but in concur that for some scenarios it might result in hard to read code

@sertansantos3032 2 жыл бұрын

Both valid, all preference

@stefc4663 2 жыл бұрын

That was a really helpful hot tip! I've often wondered why I've seen code that checks res.ok/res.status if there's a try/catch. I did want to clarify one thing. So you use async/await for the fetch call but then you still have to use .then when actually calling the function? Thanks! Really great content.

@thatguynamedmorgoth8951 2 жыл бұрын

About your question, you can only use await inside of an async function, so inside the async function he used await but outside of the async function he can't because he's not in an async function

@hiteshsuthar1097 2 жыл бұрын

Thank you

@roziscoding 3 жыл бұрын

The problem with this is that you create a lot of intermediary variables that you're not really gonna use just so you don't have `. then` calls. You could've chained `then`s until you got the data and then awaited on that to get the data on a variable. Async / await isn't meant to eliminate then calls, it's meant to simplify working with them

@joshparker5779 2 жыл бұрын

Good point. I want to mention something else to consider. Having a lot of local variables can be convenient if you're using a debugger because the debugger would show all the values at a glance when it hits a breakpoint in scope. It's not always necessary, of course, but it can be nice sometimes.

@akashchoudhary8162 2 жыл бұрын

Can't you just do this? const data = await (await fetch(url)).json();

@roziscoding 2 жыл бұрын

@@akashchoudhary8162 you can, but IMHO it's the hardest one to read

@JonxuJJ 2 жыл бұрын

exactly, there is no real need to purposefully refactoring existing code to async/await.

@Javislaterlp 2 жыл бұрын

Lol no. Async await can and is meant to replace every then. I don't know if you meant it on a performance or readability POV but those intermediary variables you say replace the callbacks, which are also in memory, and variables are much more readable than anon funcs. JS is GC you shouldn't care about that; your concern is wrong but if you are concerned to that level use other lang. I would stare very weirdly to anyone who mixed then calls and await, seriously. If you are going to do that, keep chaining thens and ignore async/await altogether. The mix of both is the WORST posible scenario (in the same function obviously, not at a project level). Not to mention that if you have "a lot" of intermediary variables you are doing something completely wrong.

@yairv13 3 жыл бұрын

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?