Simular Respostas HTTP para Desenvolvimento Frontend

Desenvolva interfaces sem depender do backend. Configure estados de loading, erro, lista vazia e dados reais com um mock de API HTTP.

Frontend sem esperar o backend

Em times ágeis é comum o frontend e o backend serem desenvolvidos em paralelo. Mas o frontend precisa de dados para renderizar componentes, testar estados de UI e validar integrações. Esperar o backend ficar pronto cria gargalos — o mock de API resolve isso no primeiro dia.

Com o httpdrop você tem uma API HTTP real funcionando em minutos, com a mesma URL que será usada em produção. Quando o backend ficar pronto, basta trocar a URL base — nenhum código de frontend muda.

Simulando diferentes estados de UI

Crie múltiplas Mock Rules para o mesmo endpoint, ativando a que precisa testar:

// Estado: lista com dados
GET /api/usuarios → 200
[
  { "id": 1, "nome": "Ana Silva", "cargo": "Engenheira" },
  { "id": 2, "nome": "Bruno Costa", "cargo": "Designer" }
]

// Estado: lista vazia
GET /api/usuarios → 200
[]

// Estado: erro de servidor
GET /api/usuarios → 500
{ "error": "internal_server_error", "message": "Serviço temporariamente indisponível" }

// Estado: não autorizado
GET /api/usuarios → 401
{ "error": "unauthorized", "message": "Token inválido ou expirado" }

Testando paginação

Simule respostas paginadas com metadados de total e páginas:

// GET /api/usuarios?page=1&per_page=10
{
  "data": [
    { "id": 1, "nome": "Ana Silva" },
    { "id": 2, "nome": "Bruno Costa" }
  ],
  "meta": {
    "total": 47,
    "page": 1,
    "per_page": 10,
    "total_pages": 5
  }
}

💡

Simule delays reais: Configure um delay de 300–800ms nas Mock Rules para simular a latência real de rede. Isso ajuda a identificar problemas de UX como botões sem feedback de loading e telas sem skeleton.

Configurando CORS para dev local

Por padrão, todos os endpoints httpdrop têm CORS habilitado com Access-Control-Allow-Origin: *. Isso significa que seu app local (localhost:3000, localhost:5173, etc.) pode chamar a API sem nenhuma configuração adicional.

Integrando com React, Vue e Angular

Use a URL do httpdrop como base URL da sua integração HTTP:

// React com fetch
const API_BASE = 'https://httpdrop.com/mock/SEU_ENDPOINT_ID';

async function getUsuarios() {
  const res = await fetch(`${API_BASE}/api/usuarios`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

// Com axios
import axios from 'axios';
const api = axios.create({ baseURL: API_BASE });
const { data } = await api.get('/api/usuarios');

🚀

Próximo passo: Use Mock Rules com templates para gerar dados dinâmicos como IDs únicos, datas atuais e listas com tamanho variável — tornando os testes mais realistas.