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.
Code: github.com/jherr/async-with-ts
PokeAPI: github.com/PokeAPI/pokeapi#do...
Promise pool: www.npmjs.com/package/@superc...
MSDN Promises documentation: developer.mozilla.org/en-US/d...
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
20:30 Promise.all
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
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 More Typescript videos: • JavaScript to TypeScri...
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: `yarn add typescript@4.4.2 ts-node@10.2.1 @types/node-fetch@2.5.12 -D` `yarn add node-fetch@2.6.1`

[@jherr]

Yeah, the ESM changeover to node-fetch messed this up. :(

[@hugodsa89]

And we are getting fetch API natively on Node 🤩

[@pittiplatsch6248]

thank you for your comment i think you saved me some sanity

[@ragtop63]

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.

[@george_bullock]

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

[@tarunsukhu2614]

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

[@dj_meta]

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

[@miteshsagar8149]

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

[@aleksamitic4070]

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!

[@elenafromny9567]

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

[@BlurryBit]

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

[@VinniiMiranda]

Awesome!! Keep this amazing work! Really good content, and the way that you explain is unique, very easy to catch the idea.

[@8koi245]

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

[@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! 🙏👍

[@jherr]

Thank you very much! It's really nice to hear that.

[@king-manu2758]

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.

[@abrahamanakagung4279]

I love that you included test here 👍🏻

[@lawrencejones51]

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!

[@alexeychernov3902]

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

[@cas818028]

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

[@zahoorkhattak736]

This is really a mature and easy to understand code.

[@llfalcao]

Really useful and easy to understand. Thanks!

[@denilsoncosta9837]

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

[@Merchance]

This is amazing! Thank you for the great content.

[@BigMintyMitch]

This video helped me out a ton! Thank you so much

[@AqibGatoo]

Fantastic video, Jack!

[@biswaviraj]

Great content, I'm learning so much from your videos, Promise as a cache 🤯

[@julienmayer9966]

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

[@samuelumoh6646]

Great content, as always.

[@hossammohamed5794]

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.

[@tonyrinaldi6846]

Excellent content, as always.

[@nonetry6071]

amazing work jack :) have a nice day

[@Sanyat100]

Those trees and foliage in the forest, sir, caught my attention !

[@thatboyneedstherapy]

Thanks for this, it's very useful!

[@sajedsoliman4780]

Awesome! I was looking for this (promise pooling, I didn't know it exists 😅

[@metacarpo10]

Omg I'm late but this was so helpful. Thank you very much!

[@marouaniAymen]

Thanks for this instructive video, I learned about Pooled Promises via the library Supercharged. But concerning the tests, I was expecting to see how to mock the fetch call to an API, because in our unit tests we mock axios and I saw others use MSW.

[@miklosnemeth8566]

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.

[@jherr]

Right! Man, when another dev showed me that I was immediately like; "Oh crap, I can take a ton of local cache management code and just chuck that."

[@boatcs]

To be honest I am really enjoying your channel too!

[@JulioDx3480]

This is amazing, thanks!

[@aryanvikash1967]

I thought i know promise very well , then I saw this one caching and all ❤️

[@syedhaider0916]

Wow wow wow, what a scenery!!!!!

[@iamilyes]

great content... Would love to see a course/playlist about react native with typescript and an api development uing clean code architecture

[@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.

[@joaquinnader]

really nice, thanks.

[@nashidmifzal79]

Love this !

[@eslammohsen1714]

Thank you Mr. Jack Herrington

[@360nickx]

Love these videos. :)

[@alexisghillis7799]

best voice, hands down!

[@davidzahiri9610]

Nice content

[@martiananomaly]

Yet another banger video

[@konstantinospascal1892]

What a great video, instantly subbed! What gives you that great code completion like at 32:16 on the map method?

[@jherr]

GitHub copilot

[@manishkumar1213]

Super cool. How did you configure your vscode terminal with suggestions popup?

[@jherr]

That's fig. fig.io/

[@Khriztopher6220]

Great video Jack!, I have a question, is it possible to have a video where you also explain asynchronous JS using Observable(RX) pattern? that would be amazing

[@jherr]

Yeah, I'll have a look at that. I know I've had some trouble finding good practical RxJS stuff. Not sure if I qualify as an expert on it. But I definitely think it's worth knowing.

[@slayern5951]

Awesome video as always Jack btw what's the vscode theme name though?

[@jherr]

Night Wolf [black] and Monolisa

[@evandromottaz]

Thank you

[@nerdydarkknight]

Would love to see the extensions that you are using in your visual studio code for the autocomplete, json to interface and auto generate code snippets

[@jherr]

JSON2TS to do the JSON conversion. And sometimes GitHub Copilot to get the hinting.

[@nerdydarkknight]

Awesome stuff!

[@miteshsagar8149]

Awesome

[@Luxcium]

I don’t know yet if you will explain it later (I am at 10:56 Cool so now you know how to [return await] a promise part of an [async function]) but if you return await it’s only when you want to handle the error in the current function… but you are probably going to explain this later because you are such a professional coder 😮 and I guess you will need to add your try catch anyway… 😅 I already liked+subscribed+commented hopefully 🤞🏼 my prediction is right ❤ Though that would make this comment useless 😂😂😂

[@ericzorn3735]

Keep up the great content! Just so you know, promise all works in parallel. Every promise that you pass inside of the array is fired off using parallelism. If one rejects, the entire promise will reject. The benefit to using the pool library is that you can specify how many concurrent requests are intended to be resolved

[@petercorrea]

Correct me if I’m wrong but Promise.all doesn’t execute anything. Promises are executed at the time of creation. Promise.all only impacts the way the promises are resolved. Additionally, JS and its related runtimes are single threaded event loops. All execution happens concurrently, not in parallel. I believe this is a common misconception.

[@ericzorn3735]

@@petercorrea Hey Peter, you are correct with your comment. The promises upon being invoked, are fired off immediately. However, the alternative to parallelism is the fact that each of the promises inside of the array are running in parallel and not in sequence. This allows each promise to be resolved much quicker, versus having to sequentially await every single promise invocation

[@ericzorn3735]

Concurrent is correct, parallel is incorrect

[@ajaydwarkani]

Thanks @Jack Harrington, very nicely explained. I have noticed your VS Code auto complete or autofills the code (see between 9 min - 10:30 minutes), what extension or settings is that?

[@jherr]

GitHub Copilot.

[@ajaydwarkani]

@@jherr Thanks for tool name. I have signed up with them and now on their waiting list :)

[@TheNsn666]

Hey, thanks for the video ! what is the code hint extension you use ?

[@jherr]

Github Copilot

[@felixlucien7375]

Hey Jack, at ~9 mins you use try / catch to wrap your async await and my question is; how much try catch is acceptable to use in code (esp production code)? Is there a computational disadvantage to using it liberally? For example in a more complex situation there may be many nested functions inside that try catch and in such a case do we need to do any optimization of our code to this end? Thank you so much for the great video! :D

[@jherr]

I only try/catch on something that could actually fire are runtime because of a resource issue, like file access, or a fetch. I don't try catch around access logic. Some folks wrap object or array dereferences in try/catch as a cheap way to catch if anything in the data is missing. But IMHO, it's better to use optional chaining and control the behavior in that case.

[@armaandhanji7151]

Hey Jack. Usually we need to call if (!res.ok) in fetch to properly check for an error since it doesn't an exception throw normally like axios does. According to your video here, it looks like node fetch is exhibiting more axios-like error handling behavior. Am I correct in saying node-fetch throws an exception for us, unlike browser fetch?

[@jherr]

Yeah, that's true. That 5050 request is generating a 500 and that's being thrown. You should test that out, but yeah, it certainly seems from the behavior like `node-fetch` is doing the throw for us.

[@sleepingUgly]

@Jack Herrington: awesome video... at t:15:55 where you're mentioning Promise's cached value, what happens when theoretically between your first call and the second call, the return value of the fetch at the origin is changed, i.e. if Bulbasrurus is changed to Hectasurus (sorry not a Pokemon guy as you can clearly tell), do we still get the cached value or is there a mechanism to check the diff and invoke a second call to then get the new and updated value?

[@jherr]

you'd get the cached value. to get the new value you would need to initiate a new fetch and get a new promise.

[@sleepingUgly]

@@jherr i see.. thank you. However, how would one go about detecting whether there _HAS_ been a change or not in order to initiate a new promise without having to resort to SWR or alike (assuming I understand their purpose correctly :P)

[@jherr]

@@sleepingUgly Nothing is going to auto-detect server changes for you, not SWR or React-Query. There are frameworks that do this, but they are using things like websockets, long-polling or just straight polling to keep the client more or less in sync with the server. More in the case of websockets, progressively less as you move towards polling. AFAIK, the only mechanism that SWR has for this is to enable a polling interval. Which is just a `setInterval` on a `fetch`.

[@sleepingUgly]

@@jherr Oh i see, wonderful, and thank you so much for the detailed explanations and quality content.

[@nickdhrones6425]

Would have loved this in Deno

[@sebmonti5904]

Hi Jack , do you have a testing playlist ?

[@jherr]

I don't. I probably should develop one.

[@sebmonti5904]

@@jherr That ll be good!

[@AlexJohnSuarez]

running npx ts-node index.ts doesn't work - "Must use import to load ES Module "

[@HIghtowerSever]

The same problem..

[@TiagoSalemaG]

Same... :/

[@agee4142]

The same problem ... I tried everthing...

[@shubhampawar7475]

My only one question, how do you find these awesome npm packages?

[@jean0179]

Which extension are you using for the auto complete?

[@jherr]

GitHub Copilot

[@jimshtepa5423]

This may sound a little off of the main subject but could you please explain why need to execute res.json() on the data that is returned from fetch? Thank you

[@jherr]

Sure. You have the raw response `res` and it has a bunch of metadata (result code, headers, etc.) and it has the payload that you can read using various methods depending on the type of payload you are expecting. But each of those payload accessors is in turn a promise. So what this is doing is returning that promise so that the next `then` will only be fired once all of the JSON is ready. And the value that is sent to `then` will be the decoded JSON object.

[@jimshtepa5423]

@@jherr Understood. thank you

[@danielsalahi]

I have a question: for the first page of Next.JS we have a lot of cards and endpoints that should be called. what is the most performant way to do this without making a performance issue? Can you please explain this or make a video for it?

[@user-kj7yz4sl2o]

Hey Master how to print a Hardcopy only with Code in a A6 size? I hope someone know this

[@jimshtepa5423]

In case of using a promise in place of cash how does it ensure that the data that it returns is not stale? e.g. if the result of fetch has changed would promise get executed once again and return different result? I am just trying to understand how does promise finds out if it is ok to return the previous data or to check if data has changed. Thank you

[@jherr]

Fetch has no way of knowing if your data has changed or of making subsequent requests. If the fetch was fulfilled or rejected then that is the value of that particular promise forever. If you are looking for a more complex polling type of interaction you might want to check out react-query.

[@Luxcium]

I think I exceeded the limit of comment per video and probably I should watch more advanced content but Jack is just so awesome 😎 I can’t stop… on the line 36 (at 13:09) I don’t understand why you need to mark async (I do it purposefully all the time myself because in TypeScript it will make the compiler know that I am returning a promise but other people will argue that it is useless) because it doesn’t make use of any `await` keyword… also I think that if you don’t use `new Promise` it would make your code more idiomatic of the async await paradigm… 😮😮😮 😅

[@Luxcium]

I am unsure if my comment is clear I tried to make it short 😂 But yea I believe it should have been explained in the context of what you are doing right then… but I might be wrong… I am watching this video just because I love TypeScript and you are an amazing _Tutorialist_ (I think I juste invented a word there)…

[@fredbluntstoned]

Is this going to include error handling patterns for async code?

[@jherr]

Yup.

[@sebmonti5904]

Hello, not in the book ? What is the latest version of the book 1.0.5 ?

[@jherr]

I'll be doing some new Design Patterns videos in the coming weeks and those will get some new book chapters. I've been pretty busy with a new job and updating the Module Federation book.

[@charlesenglebert8226]

why do we need to chain then ? Can't we do everything in a single then ?

[@paulinetema6218]

I'd agree that we could chain the thens in a better way. Then we'd only need one catch at the end :)

[@gandalfgrey91]

When I try to run the code with "npx ts-node index.ts" I'm getting an error: "Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension." and when I add "type": "module" to my package.json I get another warning: "[ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" Anyone know how to resolve this?

[@gerardpaul159]

Do you do one on ones?

[@jherr]

I do not. Sorry.

[@adamlerman4173]

Question: you defined the state as a pockemon[], but the initial state was an empty [] - how come ts allowed that? an empty [] is obviously not a pockemon[]

[@jherr]

An empty array is a valid pokemon[] as long as it's typed that way.

[@elliotsherman9894]

for some reason i am getting an error {Uncaught ReferenceError: exports is not defined} this is happening with axios too, anybody stumble by this ?

[@jherr]

Feel free to jump on the Discord server and ask your question there. But be sure to read the #rules before posting.

[@elliotsherman9894]

@@jherr Thanks for the quick reply

[@akashsurana2023]

Node Version: 14 Stuck with the error : TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts odejs\index.ts Can any one help. Node Version: 16 If i use the updated version of node, then I get the below error: TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for C:\Users\akashs\Desktop\Personal\UK\HandsOn\APIS\async-with-ts odejs\index.ts

[@jherr]

Jump onto the Discord server and ask in #typescript. I don't use Windows for development, so I can't answer easily, but there are a lot of folks on there who do and might be able to help.

[@Luxcium]

I was complaining on a different video the other day because it was not mobile 📱 friendly… I don’t know if something is different with this video but I think it is better for some reasons 😅😅😅 (4:20)

[@gauravverma1374]

Theme please sir?

[@jherr]

Probably Night Wolf [black] and Operator Mono

pro

[@examplewastaken]

Great video, but your monitor/recording scale is too large imo. It would be better to see more than just 10 lines as well as a little bit more of the terminal.

[@mortezatourani7772]

I use `import` just like you but it says you shouldn't use `require()`!?!?!? I couldn't figure it out what's wrong node: 16 ts: 4.4.2 ts-node: 10.2.1

[@jherr]

That's really weird. TypeScript doesn't really like require.

[@ebratz]

Faced same issue here Node: 14.17.6 ts: 4.4.2 ts-node: 10.2.1 node-fetch: 3.0.0

[@thrumilens6328]

I believe there is breaking changes for node-fetch and @type/node-fetch version 3. If you install version 2 as Jack's specific version, the return from await will work and it won't flag as issues in VS Code. I tried to cast the value like `return (await listResp.json()) as PokemonList but it will only suppress the error within VSCode. npx ts-node index.ts will throw error still

[@mortezatourani7772]

@@thrumilens6328 It worked. Thank you so much

[@sujithsabu6082]

Can you make MEAN full stack course

[@vizunaldth]

Second below

[@aikisustin3094]

damn bro ur teatching code in a forest, you just touched grass congrats

[@georgehammond867]

Great pause the video moment at 14:15, you should become a teacher!

[@holycake123]

Why am I NOT seeing my comments? Even though the count increases. I posted a question and sample code to show that Promise as cache not working for external endpoint.

[@jherr]

I'm not doing anything on my end to remove comments. I have heard the KZbin comment system can be flakey. Feel free to join the Discord server and ask your question there. But be. sure to read and follow the posting #rules.

[@artless-soul]

github copilot feature is amazing.. but having it in such tutorials, is more annoying than helpful to understand the concepts (breaks the flow by auto suggesting next sequence)

[@mohamedrifkan6577]

Who can guess this vscode theme 🤔 ?

[@paulinetema6218]

I agree that async awaits are nicer than thens and catches but your reasoning in the video seems odd to me. You are chaining your thens in an unfortunate manner and therefore you would need multiple catches. But if you would chain your thens differently, then you would only need one catch for all of them and the nesting is also less bad. You just have to return the second Promise within your first then etc. This way you end up with all of the nested Promises and thens within the most outer then, thus it is sufficient to use one catch at the end. :)

[@AlexJohnSuarez]

you are struggling to breath :)

[@jherr]

Yeah., that was like the fifth take and I was holding a pretty heavy gimbal and walking at the same time. Hahaha.

[@MrPlaiedes]

Love your video but you really gotta work on your cardio.

[@kolthir]

Best KZbin channel

[@LotusOpel]

im a noob.. and trying to learn... but this is imposible.... possible