Three-State Fetching Busca de Dados em Três Estados

Última atualização: 2026-11-03

Three-State Fetching Busca de Dados em Três Estados

Toda requisição de dados tem três estados: loading enquanto está em andamento, success quando os dados chegam, e error quando falha. A UI deve preparar um quadro para cada um deles, e deixar faltar qualquer um produz tela em branco, espera infinita ou falha silenciosa. Este é o modelo mental compartilhado por código fetch escrito à mão e por toda biblioteca de requisições, então aprender uma vez vale em qualquer lugar.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

const [state, setState] = useState({ status: 'loading', data: null, error: null })

useEffect(() => {
  fetch(url)
    .then(r => r.ok ? r.json() : Promise.reject(new Error('HTTP ' + r.status)))
    .then(data => setState({ status: 'success', data, error: null }))
    .catch(err => setState({ status: 'error', data: null, error: err }))
}, [url])

if (state.status === 'loading') return <p>Loading…</p>
if (state.status === 'error')   return <p>Error: {state.error.message}</p>
return <List data={state.data} />

⚙️ Parâmetros

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

A primeira requisição automática mostra "Carregando", uma resposta bem-sucedida revela o título do todo, e quando a rede ou a API falha você obtém a mensagem de erro junto com um botão de tentar novamente — um quadro para cada um dos três estados.

💡 Pontos-chave

🏷️ Mais Dados e Engenharia

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós