A Better Way to fetch() in JS

Read more in my full article: www.builder.io/blog/safe-data...
#javascript #typescript

[@mettle_x]

The last part is not "type-safe" unless you have a runtime response validator with something like Zod.

[@andreujuanc]

100%

[@newfluency]

Yes, the type would be just inferred in his code. I guess he is assuming we are fetching from our own API and not an external API, in which case it would be valid to infer rather than validate the response. Or at least so I think.

[@zeeeeeman]

like @newfluency has stated - using the `as` cast escape hatch because result.json() is any.

[@Tommy-ev6gv]

I'm happy to see your channel popup on my feed again, always enjoy your content. Hope everything is great!

[@Razunter]

Wretch library is nice Fetch wrapper

[@fueledbycoffee583]

i actually think fetch is really ok, no need for a wrapper

[@StCost]

Nice one, will simplify my fetches all over the project

[@mattiarasulo9934]

Hey this one I knew and used already all the time! I love throwing my own errors!

[@irfanmohammad7269]

nice content

[@TheTwober]

A few more lines and you advance to a Java programmer. :)

[@PraiseYeezus]

OOP is great and reliable until you try to choke me to death with dependency injection a forest of inheritance trees

[@nested9301]

To be honest a rather be a java programmer if it's more organised like this

[@TheTwober]

@@nested9301 httpClient.sendAsync(httpRequest, BodyHandlers.ofString()) .thenApply(this::processResponse) .exceptionally(this::handleException); And in the handleException you then get a HttpConnectTimeoutException as input.

[@tigrezno2626]

that's why I still use axios, it just works

[@mattp0123]

Nice video! Is there a better way to handle network error?

[@bring-shrubbery]

just use effect

[@dolevklefner811]

You should check Effect it is more robust and simplifies the fetch handling

[@tomm5765]

Effect seems to be getting some attention at the moment, are you using it in a project?

[@chinmayghule8272]

What's the difference between using Effect and using Tanstack Query?

[@skyhigheagleer6]

It does neither. No one is refactoring for Effect

[@invinciblemode]

Need to validate the fetch response too instead of just casting as ResponseType

[@enyelsequeira3619]

lol I had to implement this and created like my own axios around fetch because next js doesn’t play well with axios

[@dokkenrox]

Might as well just use an existing library like Axios that already has all these features and is well tested.

[@reaper84]

I wonder how many developers have wrapped fetch like this... I sure have done that myself.😅

[@rand0mtv660]

In my opinion fetch is unusable without a wrapper. At least if you are working on an actual project, not just some tech demo. I mean you can use it without a wrapper, but after some time you'll hate yourself for doing it that way.

[@pajeetsingh]

why are you awaiting the fetch call? don't you want it to be asynchronous?

[@lottexy]

In real world scenarios, you want to await calls before proceeding. IE: you submitted data, wait for submission request to complete before returning to list of submissions.

[@recursiv]

Await is what makes it async...

[@quadra5443]

dude you look like the benji dude from "You"

[@gabrieldelosrios811]

Lol, how did you even made that connection 🤣

[@joeys.4268]

I always like to do throw { status: "error", msg: ..., code: ..., etc } Instead of throw new Error because it allows me to throw anything I want

[@rand0mtv660]

But then you cannot check if an error is an instance of a specific error class since you just threw a random object basically. Error in catch block might be some other runtime error you didn't throw manually. You can of course create a TypeScript type guard that will check all these properties exist on the error object and assert a specific type for that error variable if they do exist, but at that point why not just use a custom class and use JS runtime features for that check.

[@guytonedhai]

Golang laughing in corner

[@jalbers3150]

I love error handling in golang. It’s so easy and simple to get exactly what you want.

[@bg2junge]

Don't you want to throw a HTTPError(???) in the try block?

[@Steve8708]

yeah, I neglected to do that at first, but fixed it in the “simpleFetch” abstraction step 😅