Stop Sprinkling Axios Calls Through Your React Components

Frontend projects that skip an API layer accumulate duplicated Axios configuration and brittle endpoint strings across dozens of files. Centralizing that logic early costs almost nothing and prevents a painful refactor when the backend URL scheme, auth headers, or error handling inevitably change.

Dropping Axios calls directly into React components works for a demo but turns every page into a tangle of UI logic, endpoint URLs, and request configuration. Extracting all HTTP concerns into a dedicated `api/` directory with a single shared Axios instance and domain-specific modules like `user.js` gives pages a simple function call — `login(data)` — while the API layer owns the method, path, and serialization.

A Vite Mock plugin supplies a fake backend during development, intercepting requests such as `POST /api/login` and returning hardcoded JSON so the frontend can be built and tested without a real server. Mock and the API layer are separate concerns: one simulates the server, the other organizes how the client talks to it.

The result is a clear call stack: the page invokes an API function, the function delegates to the shared Axios instance, and the instance sends the HTTP request. This layering makes base URLs, timeouts, and interceptors changeable in one place and keeps components focused on user interaction.