API Calls Done Right: From Messy Fetch to Clean Data Layer (opens in new tab)

I've seen this file in almost every frontend project I've ever touched. It's usually called api.js or utils.js or sometimes just helpers.ts. It starts small. One function. Two functions. Then, six months later, it's 800 lines long, nobody fully understands it, and everyone is afraid to change it. It looks something like this: // Somewhere in a React component, at 3pm on a sprint deadline const res = await fetch(`/api/users/${id}`, { headers: { Authorization: `Bearer ${localStorage.getItem('to...