Full Stack · Frontend · Backend

MockJS and Vite Break the Frontend's Dependency on Backend APIs

By dzhd · Aug 12, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Timeline coupling with backend teams is the silent killer of frontend velocity. A one-line baseURL switch and Vite-level request interception remove the wait, letting frontend work proceed on its own schedule and making integration a configuration change rather than a rewrite.

Summary

Frontend teams often stall waiting for backend APIs, even when codebases are separated. A full-stack Todos project demonstrates how a dedicated `api/` directory—with an Axios instance, centralized baseURL, and per-module request functions—creates an interface layer that the UI depends on exclusively. Vite's `vite-plugin-mock` intercepts `/api` requests at the dev-server level and returns fake data from a `mock/` directory, so the frontend can build, route, and test every state without a running backend.

A deliberately set `timeout: 2000` in mock responses forces loading-state handling during development, preventing the common bug where instant mock data hides missing spinners and skeletons. When the real backend is ready, changing one `baseURL` line in `config.js` switches every API call from mock to the live server.

The architecture separates concerns into three layers: mock data sources, a unified request-management layer, and UI components that never know where data originates. React Router handles page routing while the mock plugin handles API routing, keeping the two routing concerns from colliding.

Takeaways

— A dedicated `api/` directory with a centralized Axios instance and per-module request functions decouples UI components from data sources.

— Vite's `vite-plugin-mock` intercepts `/api` requests at the dev-server layer, returning fake data without a running backend.

— Setting a deliberate `timeout` (e.g., 2000ms) in mock responses forces loading-state handling during development, preventing production surprises.

— Changing one `baseURL` line in `config.js` switches every API call in the application from mock data to a real backend.

— React Router manages page routes while the mock plugin manages API routes; the `/api` prefix prevents collisions between the two.

— Wrapping `await` calls inside an IIFE within `useEffect` is necessary because React's effect callbacks cannot be async functions.

Conclusions

The `/api` prefix convention is a simple but load-bearing design decision: without it, a URL like `/todos` is ambiguous—it could be a page route or an HTTP request, and no tool can reliably tell them apart.

Mock speed is a hidden hazard. Instant responses during development train developers to ignore loading, empty, and error states, which then break under real-world latency. A deliberate delay is a cheap form of production hardening.

Frontend interface engineering treats API management as a first-class build concern, not an afterthought. The `api/` directory is the frontend equivalent of a backend's service layer, and it deserves the same discipline around configuration, timeouts, and environment switching.

Concepts & terms

Timeline Coupling

A form of dependency where frontend development progress is blocked not by code architecture but by the backend team's delivery schedule. The codebases may be separate, but the frontend cannot complete its development loop until backend APIs are available.

Frontend Interface Engineering

Treating the API consumption layer as a first-class engineering concern within the frontend codebase—centralizing request configuration, baseURL management, timeout policies, and per-endpoint methods in a dedicated `api/` directory, independent of UI components.

vite-plugin-mock

A Vite plugin that intercepts HTTP requests matching configured URL patterns at the dev-server level and returns mock responses directly, preventing requests from reaching any backend. It enables fully offline frontend development with realistic API simulation.

IIFE (Immediately Invoked Function Expression) in useEffect

A pattern where an async function is defined and immediately called inside a `useEffect` callback. Required because React's `useEffect` cannot accept an async function directly—it would return a Promise instead of a cleanup function or undefined, causing subtle bugs.

From the discussion

The discussion centers on practical benefits of the mock-driven workflow. One point emphasizes that establishing an API contract upfront prevents back-and-forth delays during integration. Another adds that injecting artificial delays into mocks helps surface UI state bugs before they reach production.

— Defining the API contract first reduces integration-testing bottlenecks.

— Simulating network latency in mocks exposes state-handling problems early in development.

Featured comments

亚雷

Defining the API contract first can reduce integration-testing bottlenecks.

卷土的土

Simulating latency can expose state issues early.

See top comments, translated →

Source: juejin.cn ↗ Google Translate ↗ Backup ↗