Frontend Academy · Aula

AbortController para limpeza

Crie um AbortController, passe seu sinal para fetch e cancele solicitações em andamento na função de limpeza para impedir atualizações de estado em componentes desmontados.

AbortController para limpeza é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que cancelar solicitações de busca?

Quando um componente é desmontado ou uma nova busca é feita, a solicitação anterior ainda pode estar em andamento. Se ela for concluída depois da nova solicitação, dados obsoletos substituirão dados atualizados. AbortController cancela solicitações em andamento de forma limpa.

Noções básicas de AbortController

Crie um AbortController, passe seu signal para a função de busca e chame controller.abort() para cancelar. A busca lança um AbortError quando é cancelada.

const controller = new AbortController();

try {
  const res = await fetch('/api/data', { signal: controller.signal });
  const data = await res.json();
  setData(data);
} catch (err) {
  if (err instanceof DOMException && err.name === 'AbortError') {
    console.log('Request was cancelled');
  } else {
    setError((err as Error).message);
  }
}

// To cancel:
controller.abort();

Na limpeza de useEffect

Crie um AbortController no início do efeito e chame abort() na função de limpeza. Isso cancela automaticamente a solicitação quando as dependências mudam ou o componente é desmontado.

useEffect(() => {
  const controller = new AbortController();

  async function load() {
    try {
      const res = await fetch(`/api/user/${userId}`, { signal: controller.signal });
      if (!res.ok) throw new Error(`${res.status}`);
      setUser(await res.json());
    } catch (err) {
      if ((err as DOMException).name !== 'AbortError') {
        setError((err as Error).message);
      }
    }
  }

  load();
  return () => controller.abort();
}, [userId]);

AbortError versus erro de rede

Uma solicitação cancelada lança uma DOMException com o nome 'AbortError'. Sempre verifique esse caso especificamente e não o mostre como um erro visível para o usuário — é um comportamento esperado da limpeza.

Propriedade signal.aborted

Verifique controller.signal.aborted para testar se um signal foi cancelado. Isso é útil para verificar a situação antes de uma chamada a setState em código assíncrono.

const data = await fetchData();
if (!controller.signal.aborted) {
  setData(data); // safe to update state
}

Cancelando várias solicitações

Um AbortController pode cancelar várias solicitações de busca passando o mesmo signal para todas elas.

const controller = new AbortController();
const { signal } = controller;

await Promise.all([
  fetch('/api/users',    { signal }),
  fetch('/api/products', { signal }),
  fetch('/api/settings', { signal }),
]);

controller.abort(); // cancels all three

AbortController com Axios

O Axios aceita o signal do AbortController por meio da opção signal na configuração. A interface signal é a mesma usada pela função de busca.

const controller = new AbortController();
await axios.get('/api/data', { signal: controller.signal });

// In cleanup:
return () => controller.abort();

O React Query trata disso automaticamente

Ao usar o TanStack Query (React Query), o cancelamento é tratado automaticamente. O React Query cria e cancela controladores internamente. Esse é um dos motivos para preferi-lo aos padrões manuais de busca.

Timeout com AbortController

Combine AbortController com setTimeout para implementar tempos limite das solicitações.

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5s timeout

try {
  const data = await fetch(url, { signal: controller.signal });
  // ...
} finally {
  clearTimeout(timeoutId);
}

AbortSignal.timeout() — atalho moderno

Nos navegadores modernos, AbortSignal.timeout(ms) cria um signal que é cancelado automaticamente após a duração especificada, sem a necessidade de um controller manual.

const res = await fetch('/api/data', {
  signal: AbortSignal.timeout(5000) // 5 second timeout
});

A limpeza é essencial no Strict Mode do React 18

O Strict Mode do React 18 monta os efeitos duas vezes durante o desenvolvimento. Sem a limpeza com AbortController, você verá buscas duplicadas e possíveis avisos sobre atualização de estado em componentes desmontados. O padrão de limpeza evita ambos.

Verificação rápida

Como impedir que uma resposta de rede obsoleta atualize o estado depois que um componente for renderizado novamente?

Recapitulação: AbortController

Crie um AbortController por efeito. Passe signal para a busca ou para o Axios. Cancele na função de limpeza. Ignore AbortError — isso é esperado. Use signal.aborted antes de setState em código assíncrono. Um controller pode cancelar muitas solicitações. Use AbortSignal.timeout() para tempos limite. O React Query trata tudo isso automaticamente.

Perguntas Frequentes

A aula “AbortController para limpeza” é grátis?

Sim — o texto completo de “AbortController para limpeza” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “AbortController para limpeza”?

Crie um AbortController, passe seu sinal para fetch e cancele solicitações em andamento na função de limpeza para impedir atualizações de estado em componentes desmontados. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.

Quanto tempo leva a aula “AbortController para limpeza”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Fundamentos de useEffect: dependências e limpeza
Buscando dados na montagem
Lidando com estados de carregamento e erro
AbortController para limpeza

← Voltar para Frontend Academy