Saltar al contenido

Dev tool

API Mock Builder

Diseña endpoints falsos con metodo, status, latencia y JSON de respuesta para probar estados de UI antes de tener backend real.

EstadoListo
EndpointGET

Mock config

/api/users
JSON valido
{
  "method": "GET",
  "path": "/api/users",
  "status": 200,
  "latencyMs": 250,
  "body": {
    "users": [
      {
        "id": 1,
        "name": "Ada Lovelace",
        "role": "admin"
      },
      {
        "id": 2,
        "name": "Grace Hopper",
        "role": "editor"
      }
    ]
  }
}

Snippet fetch reutilizable

const mockEndpoint = {
  "method": "GET",
  "path": "/api/users",
  "status": 200,
  "latencyMs": 250,
  "body": {
    "users": [
      {
        "id": 1,
        "name": "Ada Lovelace",
        "role": "admin"
      },
      {
        "id": 2,
        "name": "Grace Hopper",
        "role": "editor"
      }
    ]
  }
};

export async function mockFetch(input, init = {}) {
  const url = new URL(typeof input === 'string' ? input : input.url, window.location.origin);
  const method = (init.method || 'GET').toUpperCase();

  if (url.pathname !== mockEndpoint.path || method !== mockEndpoint.method) {
    return fetch(input, init);
  }

  await new Promise((resolve) => setTimeout(resolve, mockEndpoint.latencyMs));

  return new Response(JSON.stringify(mockEndpoint.body), {
    status: mockEndpoint.status,
    headers: { 'content-type': 'application/json' },
  });
}