Why You Should Know Vanilla Fetch (Especially Now)

A few years ago, using libraries like Axios felt like the obvious choice. Cleaner syntax, built-in JSON parsing, interceptors… it just made life easier.

But recently, after security concerns and ecosystem risks (including incidents where popular packages were compromised), one thing became very clear:

👉 The more you depend on abstractions, the more fragile your stack becomes.

This isn’t about abandoning tools. It’s about understanding the foundation.

And when it comes to making HTTP requests in the browser or Node.js, that foundation is fetch.

What is Fetch?
fetch is a native JavaScript API that allows you to make HTTP requests.

No dependencies. No installs. No surprises.

It’s already available in modern browsers and in Node.js (v18+).

At its core, fetch returns a Promise that resolves to a Response object.

The Simplest Fetch You Can Write

fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Simple, right?

But for real-world apps, we need something more structured, reusable, and safe.

Step-by-Step: Building a Clean Fetch Function
Let’s build a proper data-fetching function from scratch.

1. Define a Base URL This keeps your endpoints clean and maintainable.

const baseUrl = "https://jsonplaceholder.typicode.com";

1. Create an Async Function Using async/await makes the code easier to read and reason about.

export async function getUsers() {

1. Make the Request

const response = await fetch(${baseUrl}/users);

At this point, response is not your data yet — it's a wrapper with metadata (status, headers, etc).

1. Parse the Response

const processedResponse = await response.json();

This converts the raw response into usable JavaScript data.

1. Handle Errors Properly Never trust the network.

try {
// request logic
} catch (err) {
console.error("Error fetching users:", err);
return [];
}

Final Version (Production-Ready Baseline)
Here’s the complete function:

const baseUrl = "https://jsonplaceholder.typicode.com";
export async function getUsers() {
try {
const response = await fetch(${baseUrl}/users);
const processedResponse = await response.json();
console.log(processedResponse);
return processedResponse;
} catch (err) {
console.error("Error fetching users:", err);
return [];
}
}

Important Improvement (That Most People Miss)
fetch does NOT throw errors for HTTP failures (like 404 or 500).

Join The Writer's Circle event
That means this:

fetch("/wrong-url")

👉 will NOT go to catch.

So you should always check:

if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}

Safer Version

export async function getUsers() {
try {
const response = await fetch(${baseUrl}/users);
if (!response.ok) {
throw new Error(HTTP error! status: ${response.status});
}
const processedResponse = await response.json();
return processedResponse;
} catch (err) {
console.error("Error fetching users:", err);
return [];
}
}

Why This Matters More Than Ever
When you rely entirely on libraries like Axios:

You inherit their vulnerabilities
You depend on their maintenance
You abstract away critical knowledge
When something breaks… you’re stuck.

But when you understand fetch:

You can debug faster
You reduce dependencies
You stay in control
And honestly?

For most use cases, you don’t need Axios anymore.

When Should You Still Use Axios?
To be fair, Axios still shines when you need:

Request/response interceptors
Automatic transforms
Older browser support
But even then — knowing fetch makes you a better engineer.

Final Thought
Frameworks change. Libraries come and go.

But fundamentals?

They compound.

Learning fetch isn’t just about making requests — it’s about owning your stack.

And in a world where dependencies can break overnight…

That’s not optional anymore.

👋 Follow for more
I share simple, real-world programming tips and snippets.

Follow me as @adams.nxt

You can find more code examples on my GitHub:
https://github.com/adamsnxt