Mastering async code with Typescript and Javascript

Async code can be some of the hardest code to write in Typescript and Javascript, and we write it all the time. So let's build up some patterns for writing async/await code well, doing multiple stacked async calls, testing our async code, using promises for caching, and even supporting old school callbacks.

00:00 Introduction
00:32 Project setup
02:31 Promises with then
04:55 Error handling with catch
06:30 Promises with async/await
08:55 Error handling with try/catch
12:15 Making your own promises
13:39 Promises as a cache
16:00 Async looping
22:15 Promise pooling
24:11 Testing async code
28:55 Async in React
33:19 Callbacks and Function Overloading
38:22 Outroduction
38:48 Requisite silliness

👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#async #await #javacsript #typescript #react

[MrKeepItTrill]

If anyone else is struggling with node-fetch related errors: it had some package management-related changes since this video was recorded. If you just want to follow along with the video, you can do so by installing the exact versions of stuff that Jack is using:

[ragtop]

A couple years ago I built a Chrome extension that converts Amazon HTML invoices to CSV format. Needless to say, I ended up using async/await in my code. I had no idea what I was doing then and I still have no idea what I'm doing now. Thankfully, the extension worked, miraculously.

[aleksamitic]

To be honest I am really enjoying your channel ! Started with micro-frontends, but your videos continue to show me interesting things that I didn't know about in a very simple manner :)
All the best and keep going!

[cas]

Really love your teaching style would love to see a whole course done on react native with typescript

[BlurryBit]

That promise pool extension is brilliant!! Will help a lot. Thanks for the tip, man. Keep up the great work.

[king-manu]

When i was learning to code I had John Smilga who helped me learn a ton of stuff. Now that I finally got a job, I have you to teach me the next, more advanced phase of learning that I need. And it's really awesome. Thank you so much for this brilliant channel you run.

[george_bullock]

This video is great. Love that you included a section on async testing.

[miteshsagar]

Your techniques are really awesome, I appreciate your efforts towards juniors developers

[elenafromny]

Thank you for this great video! I've just started to study TS, I'm so happy to find your channel!

[julienmayer]

I’m really surprised you touched on the compatibility of loops with promises. And sequential execution of promises. Good shit 👍

[tarunsukhu]

This is pure gold and that too free !!
Thank you for your continued service. As always look forward to more amazing stuff

[lawrencejones]

Great video. Helped me not only to understand how to write async code in both TypeScript and JavaScript but also the consequences of the different mechanism and a mechanism to support *different* mechanisms using overloading. Now to try to understand and write my own!

[miklosnemeth]

Wow, what you are explaining at 15:52 is awesome, I thought that I am an experienced pro, still I didn't know that. Thank you.
That reduce trick is to be prohibited in a multi-member team :-) at 20:17
38:00 actually, it is not function overloading in a traditional way, it is just a function definition overloading, since you have here only one implementation of the function, and all other function signature definitions must match the implementer function's signature. Great, video, anyway.

[koi]

I was only looking for the Promise<DataType> but got engaged with the other examples ty!

[dj_meta]

This is very extensive and thorough. Thank you, Jack.

[alexeychernov]

forEach against for loop, Promise all, promise pool, jest testing, function overloading - really useful, thx!

[gavquinny]

Jack, you're awesome! I find it so easy to consume the lessons in the tutorials you put together, and you also do really great, relevant foundational topics. I have learned a lot in a little time this week from your v-insightful vids ~ thanks so much, and keep up the fantastic work! 🙏👍

[hossammohamed]

Even though I’m well familiar with the subject but yet I enjoyed every second of the video. I actually watch your videos as distresses at the end of my day haha.

[denilsoncosta]

A very good explanation about async JavaScript. I'm waiting for your video about the new Typescript 4.4!

[studiowebselect]

For info an async function return an promise. So except for callback you never need to use new Promise(). If you whant to reject an acyn function (promise.reject) you just need to throw .

Also, you dont need to "return await response" if you dont want to handle the error in this function. It will return an promise in either way. Only where the error is handled is different.