Why should you care?

Scattered fetch calls duplicate error handling and forget tokens.

See it live — copy this example

Run examples in your MernVerse client/ (Vite React) or server/ (Express) folders. Keep secrets in .env.

const API = import.meta.env.VITE_API_URL;

export async function api(path, { token, ...opts } = {}) {
  const res = await fetch(API + path, {
    headers: {
      'Content-Type': 'application/json',
      ...(token ? { Authorization: `Bearer ${token}` } : {})
    },
    ...opts
  });
  if (!res.ok) throw new Error(await res.text());
  return res.status === 204 ? null : res.json();
}

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Use VITE_ env for the public API URL.
• Throw on !ok so UI can show errors.
• Skip JSON parse on 204.

Practice next

1. Add VITE_API_URL=http://localhost:5000.
2. Call api("/api/health").
3. Pass token from auth context.
4. Support FormData without forcing Content-Type.
5. Add timeout with AbortController.

Remember

One client helper. Attach Bearer when present. Surface HTTP errors.

SPA talks API

Notes page loads list.

Outcome: One helper used everywhere.