0Pricing
JavaScript Academy · Aula

Cancelando requisições com AbortController

Cancele de forma organizada as requisições em andamento.

Cancelando requisições com AbortController é uma aula grátis de JavaScript 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Por que cancelar uma solicitação

Às vezes, você inicia uma solicitação que não é mais necessária: o usuário navega para outra página, digita uma nova pesquisa ou um timeout é atingido. O AbortController permite cancelar uma solicitação em andamento.

Criando um controller

Crie um AbortController. Ele expõe um signal que você passa à função de requisição e um método abort() para cancelar.

const controller = new AbortController();
console.log(controller.signal); // an AbortSignal

Passando o signal

Forneça o sinal do controller à função de requisição por meio do objeto de opções. Agora a solicitação pode ser cancelada.

fetch(url, { signal: controller.signal });

Chamando abort

Chame controller.abort() para cancelar. A promessa da solicitação pendente é rejeitada com um AbortError.

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // cancels the request

Capturando o AbortError

Diferencie um cancelamento intencional de uma falha real verificando err.name === "AbortError" no seu catch.

try {
  await fetch(url, { signal: controller.signal });
} catch (err) {
  if (err.name === "AbortError") console.log("Cancelled");
  else throw err;
}

Padrão de timeout

Combine com setTimeout para cancelar automaticamente solicitações lentas. Limpe o temporizador se a solicitação terminar primeiro.

const c = new AbortController();
const t = setTimeout(() => c.abort(), 5000);
await fetch(url, { signal: c.signal });
clearTimeout(t);

Auxiliar de timeout integrado

Os ambientes modernos oferecem AbortSignal.timeout(ms), que retorna um signal que cancela automaticamente. É mais simples do que configurar setTimeout por conta própria.

fetch(url, { signal: AbortSignal.timeout(5000) });

Cancelando a pesquisa anterior

Em uma pesquisa conforme o usuário digita, cancele a solicitação anterior antes de iniciar uma nova. Isso impede que respostas antigas substituam resultados recentes.

let current = null;
function search(q) {
  if (current) current.abort();
  current = new AbortController();
  return fetch("/search?q=" + q, { signal: current.signal });
}

Um signal, várias solicitações

Um único signal pode cancelar várias solicitações de uma só vez. Passe o mesmo signal a várias chamadas e um abort() cancelará todas elas.

const c = new AbortController();
fetch(a, { signal: c.signal });
fetch(b, { signal: c.signal });
c.abort(); // cancels both

Signals já cancelados

Se um signal já estiver cancelado quando for passado à função de requisição, a solicitação será rejeitada imediatamente. Verifique signal.aborted se precisar saber o estado dele.

if (controller.signal.aborted) console.log("already cancelled");

Limpeza ao desmontar

Em interfaces baseadas em componentes, cancele as solicitações pendentes quando o componente for destruído para evitar alterar o estado de algo que já não existe.

const controller = new AbortController();
// on teardown:
controller.abort();

Verificação rápida

Cancelando solicitações.

Recapitulação

Crie um AbortController, passe o signal dele à função de requisição e chame abort() para cancelar. A promessa é rejeitada com um AbortError, que você pode detectar pelo nome. Use-o para timeouts (AbortSignal.timeout), para cancelar a pesquisa anterior, para cancelar várias solicitações e para fazer a limpeza ao desmontar.

Perguntas Frequentes

A aula “Cancelando requisições com AbortController” é grátis?

Sim — o texto completo de “Cancelando requisições com AbortController” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Cancelando requisições com AbortController”?

Cancele de forma organizada as requisições em andamento. Você pratica JavaScript 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 JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript 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 “Cancelando requisições com AbortController”?

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 JavaScript Academy?

Sim. Cada aula de JavaScript 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

  1. Fazendo requisições GET
  2. POST e envio de dados
  3. Tratando erros e códigos de status
  4. Cancelando requisições com AbortController
← Voltar para JavaScript Academy