DEV Community

Cover image for A Go-inspired approach to handling fetch API
mmvergara
mmvergara

Posted on

2 2 1 1 1

A Go-inspired approach to handling fetch API

Javascript error handling can sometimes be confusing especially in using fetch, if you are using await you will need to wrap it in a try catch block to handle the error and we all know that it's a headache

Well what if i tell you we can do something like this

import { get } from "./eavfetch";

interface Book {
  id: string;
  title: string;
  author: string;
}

async function fetchBooks() {
  // data type is inferred as Book[]
  const [data, error] = await get<Book[]>("/books");

  if (error) {
    console.error("Failed to fetch books:", error);
    return;
  }

  if (data) {
    console.log("Fetched books:", data);
  }
}
Enter fullscreen mode Exit fullscreen mode

Now all of the sudden handling fetch seems easy and very straightforward and safe way to handle error and data right? Well that's the power of error as values approach

you can copy the eavfetch.ts/js in the repo and start using it right away.

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (5)

Collapse
 
fyodorio profile image
Fyodor

There’s nothing bad with try/catch actually — it’s very explicit as opposed to the Go way. Also the native language constructs are always better than hidden abstractions, fwiw. But it all is personal of course.

If you like this specific approach you probably should check out Effect — they do something extremely clever around error handling.

Collapse
 
mmvergara profile image
mmvergara

Yeah i agree, this approach is going away from js idiomatic way of handling errors.
is this the effect library you are talking about? im quite new on this.

Collapse
 
fyodorio profile image
Fyodor

Yes, this one. The guys augment the habitual language patterns with some opinionated approaches from other languages and ecosystems.

Collapse
 
madhan_s profile image
Madhan S

That's a nice method of handling it.

There is a flaw in the code

fetchOptions.headers = {
    "Content-Type": "application/json",
     ...options.headers,
};
Enter fullscreen mode Exit fullscreen mode

The override should come atlast,

fetchOptions.headers = {
     ...options.headers,
    "Content-Type": "application/json",
};
Enter fullscreen mode Exit fullscreen mode

else whatever passed in the options.header will take precedence

Collapse
 
mmvergara profile image
mmvergara

thanks for the heads up!

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay