English 中文 العربية 日本語 Português

AbortController AbortController: Cancelamento de Requisição

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

AbortController AbortController: Cancelamento de Requisição

O AbortController é uma API nativa do navegador: passe seu signal para fetch e chame abort() para cancelar a requisição no meio do caminho. Desmontar um componente, mudar um parâmetro e aplicar debounce em uma busca se beneficiam disso — cancelar requisições obsoletas economiza banda e, mais importante, evita a corrida onde uma resposta antiga sobrescreve dados novos que já foram renderizados. O mesmo controller também pode abortar várias requisições de uma vez, então uma única rotina de limpeza cobre toda chamada em andamento iniciada por um componente.

GrupoDados e Engenharia
TipoAPI
DesdeNative browser API (DOM Living Standard)

ℹ️ 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 ctrl = new AbortController()

fetch('/api/search?q=' + kw, { signal: ctrl.signal })
  .then(r => r.json())
  .catch(err => {
    if (err.name === 'AbortError') return   // cancelled on purpose, not an error
    showError(err)
  })

ctrl.abort()   // triggers it: fetch rejects with an AbortError

⚙️ Parâmetros

signalA instância AbortSignal, passada para fetch como options.signal; o mesmo signal pode conduzir várias requisições e cancelar todas de uma vez.

Retorna：O construtor retorna { signal, abort() }: o signal é o que o fetch escuta, abort() dispara o cancelamento e a requisição rejeita com um AbortError.

▶ Exemplo

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

Saída：

Clicar em "Enviar requisição" entra no estado de carregamento; clique em "Cancelar requisição" antes da resposta chegar e o estado se torna aborted em vez de error — uma requisição cancelada nunca atualiza a UI.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso Um cancelamento não é um erro: o bloco catch deve reconhecer err.name === 'AbortError' por conta própria; caso contrário, um cancelamento deliberado exibe uma mensagem de erro para o usuário.
💡 Dica Abortar a requisição anterior na limpeza de um Effect é a cura padrão para a corrida que embaralha os dados quando você troca de abas rapidamente.
ℹ️ Informação O mesmo signal também pode ser passado para listeners de evento (a opção signal de addEventListener), então um único abort cancela todos eles.
usefetch-hook http-three-states effect-cleanup useref
Mais casos em breve.

📚 Tutoriais Relacionados

Requisições HTTP
Lição 19: AbortController e tratamento de condição de corrida.

❓ Perguntas Frequentes

P Uma requisição cancelada pode ser retomada?
R Não, a conexão já está fechada. Se precisar de semântica de pausar e retomar, você tem que implementar uma fila você mesmo, ou simplesmente disparar a requisição novamente.
P Um AbortError é o mesmo que um timeout?
R Não. Um timeout pode ser implementado com setTimeout(() => ctrl.abort(), 5000), e em navegadores mais novos AbortSignal.timeout(5000) faz isso em uma linha.
P Por que cancelar a requisição quando o componente desmonta?
R Após a desmontagem, o componente não precisa mais dos dados; deixar a requisição rodar desperdiça banda e a resposta pode até escrever dados obsoletos em uma renderização posterior.
Web-Tutorial.com

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.

100%