Mastering async code with Typescript and Javascript

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

[@BlurryBit]

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

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

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

[@george_bullock]

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

[@King-Gilamashur2758]

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.

[@miteshsagar8149]

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

[@boatcs]

To be honest I am really enjoying your channel too!

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

[@tarunsukhu2614]

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

[@8koi245]

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

[@dj_meta]

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

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

[@abrahamanakagung4279]

I love that you included test here 👍🏻

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

[@cas818028]

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

[@alexeychernov3902]

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

[@denilsoncosta9837]

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

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

[@ScanWs]

Fantastic video, Jack!

[@zahoorkhattak736]

This is really a mature and easy to understand code.

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

[@VinniiMiranda]

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

[@syedhaider0916]

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

[@Sanyat100]

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

[@alexisghillis7799]

best voice, hands down!

[@tonyrinaldi6846]

Excellent content, as always.

[@BigMintyMitch]

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

[@Merchance]

This is amazing! Thank you for the great content.

[@nonetry6071]

amazing work jack :) have a nice day

[@eslammohsen1714]

Thank you Mr. Jack Herrington

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

[@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 :)

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

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

[@llfalcao]

Really useful and easy to understand. Thanks!

[@kolthir]

Best KZbin channel

[@aryanvikash1967]

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

[@metacarpo10]

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

[@JulioDx3480]

This is amazing, thanks!

[@hypealex]

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

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

[@nashidmifzal79]

Love this !

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

[@360nickx]

Love these videos. :)

[@sajedsoliman4780]

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

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

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

[@joaquinnader]

really nice, thanks.

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

[@sebmonti5904]

Hi Jack , do you have a testing playlist ?

[@jherr]

I don't. I probably should develop one.

[@sebmonti5904]

@@jherr That ll be good!

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

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

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

[@iamilyes]

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

[@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 :)

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

[@manishkumar1213]

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

[@jherr]

That's fig. fig.io/

[@shubhampawar7475]

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

[@TheNsn666]

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

[@jherr]

Github Copilot

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

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

[@thru_mi_lens]

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]

@@thru_mi_lens It worked. Thank you so much

[@jean0179]

Which extension are you using for the auto complete?

[@jherr]

GitHub Copilot

[@slayern5951]

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

[@jherr]

Night Wolf [black] and Monolisa

[@evandromottaz]

Thank you

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

[@ДиванныеВойска-о2ю]

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

[@OGBonesPro]

Do you do one on ones?

[@jherr]

I do not. Sorry.

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

[@davidzahiri9610]

Nice content

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

[@miteshsagar8149]

Awesome

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

[@nickdhrones6425]

Would have loved this in Deno

[@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)…

[@gauravverma1374]

Theme please sir?

[@jherr]

Probably Night Wolf [black] and Operator Mono

[@sujithsabu6082]

Can you make MEAN full stack course

[@fredbluntstoned]

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

[@jherr]

Yup.

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

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

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

pro

[@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 🤔 ?

[@vizunaldth]

Second below

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

[@hypealex]

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.

[@LotusOpel]

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

[@samuelumoh6646]

Great content, as always.