Como Cancelar Requisições HTTP com AbortController no JavaScript

Disparar múltiplas requisições sem cancelar as anteriores pode gerar race conditions, consumo desnecessário de dados e vazamentos de memória. O AbortController resolve esse problema permitindo interromper requisições do fetch pendentes quando o usuário altera a navegação ou dispara uma nova ação.

JavaScript

// Instancia o controlador para gerenciar o cancelamento
let controller = null;

async function buscarDados(url) {
  // Se houver uma requisição em andamento, cancela antes de iniciar a nova
  if (controller) {
    controller.abort('Requisição anterior cancelada pelo usuário.');
  }

  // Cria uma nova instância de AbortController para a requisição atual
  controller = new AbortController();
  const { signal } = controller;

  try {
    // Passa o sinal de cancelamento nas opções do fetch
    const response = await fetch(url, { signal });
    const data = await response.json();
    console.log('Dados recebidos:', data);
  } catch (error) {
    // Trata especificamente o erro de cancelamento
    if (error.name === 'AbortError') {
      console.warn('Requisição cancelada com sucesso:', error.message);
    } else {
      console.error('Erro na requisição:', error);
    }
  } finally {
    // Reseta a referência quando a requisição finalizar
    controller = null;
  }
}

// Exemplo Prático: Simulando chamadas consecutivas (ex: busca ao digitar)
buscarDados('https://jsonplaceholder.typicode.com/posts/1');

// A segunda chamada é disparada imediatamente, cancelando a primeira
setTimeout(() => {
  buscarDados('https://jsonplaceholder.typicode.com/posts/2');
}, 100);

• Instância do AbortController: Cria um objeto com a propriedade signal e o método abort(), responsável por disparar o evento de cancelamento.
• Propriedade signal no fetch: A opção { signal } vincula a requisição HTTP diretamente ao controlador ativo.
• Tratamento do AbortError: Quando abort() é chamado, a promessa do fetch é rejeitada lançando um erro do tipo AbortError, que deve ser capturado no bloco catch.
• Limpeza no React/Frameworks: Ideal para ser executado no retorno de um useEffect para cancelar requisições ativas na desmontagem do componente.
• Motivo customizado: É possível passar uma mensagem ou objeto dentro de controller.abort("motivo") para identificar por que a requisição foi interrompida no bloco catch.