Efficient ES6 async await with fetch

This video explains how to effectively combine async await functions with fetch and include proper error handling.
Code GIST: gist.github.com/prof3ssorSt3v...

[@mimishiba]

Wow that's a really neat way of error handling that no other channels have explained before! Definitely learned something valuable here. Thanks!

[@mohamedkhodary7831]

Your Channel is like gold mining Steve, thank you for this fantastic explanation and the pure content you delivered , keep it up.

[@gospodarsile4606]

Your videos are extremely well explained and contain quality content. However, your channel still doesn't have the number of views and followers it deserves to have. With this comment, first of all, I want to thank you for the knowledge you share with us and I also want to suggest an example of how to get more followers and viewers. I recommend that you create a bigger project, a realistic project that young developers face. May be divided into several small sections and unite to a playlist, or record it in its entirety for a couple of hours. An example project would be a CRUD application with ECMAScript 6+ standard. I hope that you will do something like that for your viewers. Have a nice day :)

[@SteveGriffith-Prof3ssorSt3v3]

Eventually I will create full courses. It has been my intention for a long time to do that either on here or Udemy or SkillShare or BitDegree or some other place. I have been approached by several online schools to create courses. It's just a matter having the time. These videos I can do in a day as I have the time. Full courses take a long time to plan, develop, record and edit. I do these videos in my spare time on top of my full-time job.

[@tedfitzpatrickyt]

A MERN-stack PWA using oAuth and deployed using Docker. Just cause I’m learning how to do this ;-) Thanks Steve

[@roshinimala3759]

Thanks a lot Prof 😄Today I learnt something new

[@quaternion-pi]

Fantastic content! (as always I learned new, useful techniques). Thanks for all your teaching.

[@PIRAKAS666]

Great as always.

[@MrSalFav]

Thank you !! Really well explained and calm to watch and straight to the point. I watched alot of your vids and they are all really well made.

[@MoDeadYT]

Today is a great day! It is the first day I have ever clicked the notification bell. haha

[@SteveGriffith-Prof3ssorSt3v3]

Thanks! :)

[@FranciscoJunior29]

Another great class. Excellent job.

[@iwswordpress]

Very good example, well explained.

[@geraldmartinez3865]

Thanks a lot Steve. Good tutorial

[@mahmoudmiz3531]

Great explanation, thank you!

[@maspoetry1]

nice to see this channel getting big. i don't know a better teaching style

[@SteveGriffith-Prof3ssorSt3v3]

I appreciate that!

[@se7en2021]

Love your channel

[@giandomenicoriceputi6275]

If want understand something I heve to follow your videos

[@kirillbaryba746]

Thanks, What I need!

[@MoDeadYT]

Thank you so so so so much!

[@TheRegalboss]

Excellent!

[@olubisidavid7864]

document.write("Thanks alot sir...these are awesome contents');

[@sabuein]

Thank you.

[@tezzarida]

Thank you for the video! Can you please say which microphone do you use?

[@SteveGriffith-Prof3ssorSt3v3]

Blue yeti USB mic

[@iliashterev38]

Greetings from Bulgaria. Thank you (perhaps 5ht time in different comments) for your time and efforts to put those so valuable tutorials. One question please, if you have time - what about the regular try catch blocks inside the async funct. Are they not applicable here or this is just more appropriate (or should I say professional) way of coding ??

[@SteveGriffith-Prof3ssorSt3v3]

You can use the standard .then() method with catch() or try catch with await or a combination. As long as you understand how the different ways work feel free to use any approach.

[@chikaodili]

Thanks Steve! One question though; is it possible to return the data from function f in your example instead of logging it to console ? Trying to return "data" still returned a promised. Is there a way around this ?

[@SteveGriffith-Prof3ssorSt3v3]

response.json() returns a promise. We can add the then( ) method to data to get at the actual data.

[@chikaodili]

@@SteveGriffith-Prof3ssorSt3v3 Many thanks

[@ironmanlifts]

Thanks , await makes more sense now. What if you just wrap everything inside the async function with try {}catch{} ? Would that work the same as the handleErr function ?

[@SteveGriffith-Prof3ssorSt3v3]

You can put a try catch block around it but I prefer to use the catch( ) method that comes with Promises.

[@RajveerSingh-yb6zq]

Great. One Question though. In the End, Why data.code && data.code == 400 ???????

[@RajveerSingh-yb6zq]

got it. First data.code check the code property availibity in the data obj.

[@dawidpomioto1595]

What about using try catch block instead of crating handleErorr function?

[@SteveGriffith-Prof3ssorSt3v3]

You can but then you are mixing the sync and async approaches. Just feels mismatched and inappropriate to me.

[@misterl8129]

when we need to use asyn fetch vs a regular fetch??

[@SteveGriffith-Prof3ssorSt3v3]

You, as the developer, get to choose. They are two solutions that are equal and solve the same problem. What is your preference in coding...

[@carbonio14]

I need to extract a price from an cryptocurrency exchange url address. Using a fetch request and getting a json response (crypto symbol and price) how can I take advantage using async/await? I need only the price data. thanks

[@SteveGriffith-Prof3ssorSt3v3]

Using or not using async / await has zero impact on how you get to specific values in the data. With it, like I show in the video, you are passing the value back from the fetch().then().then( ) to a variable. Without it you just use the data inside the second then( ) function.

[@evilwarrior4095]

why did you use two data.code inside if statement. im really new to this concept. please help me

[@SteveGriffith-Prof3ssorSt3v3]

The first one checks for the existence of a property called code inside the data object. The second checks for the value of that property. kzbin.info/www/bejne/hX27qqSrqrJja7M

[@evilwarrior4095]

Steve Griffith thank you very much sir . i was so consumed with this async stuff that i literally forgot and didn't pay attention to the basics 😅. im dumbfounded right now. thanks to your tutorial im on the clear now .

[@RajveerSingh-yb6zq]

@@SteveGriffith-Prof3ssorSt3v3 that we could have avoided with data?.code instead of data.code right?

[@SteveGriffith-Prof3ssorSt3v3]

@@RajveerSingh-yb6zq yes. But optional chaining still has limited support. It is still fairly new.

[@adilismail3593]

Messy code