Como cancelar um request HTTP com fetch

Neste artigo você vai aprender a como cancelar um request HTTP com fetch, vamos utilizar um recurso muito interessante

Fala programador(a), beleza? Bora aprender mais sobre JavaScript!

O Fetch API é uma forma padrão e moderna de realizar requisições HTTP em JavaScript.

No entanto, nem sempre é desejável que todas as requisições sejam concluídas.

Algumas vezes, pode ser necessário cancelar uma requisição antes que ela seja concluída.

Neste artigo, vamos explorar como cancelar um request HTTP com o Fetch API.

Antes de entrar em detalhes sobre o cancelamento de requisições com o Fetch API, é importante entender que o Fetch API não oferece suporte nativo para o cancelamento de requisições.

No entanto, existem algumas maneiras de implementar o cancelamento de requisições com o Fetch API.

Uma maneira de cancelar uma requisição com o Fetch API é usando o objeto AbortController.

O AbortController é uma classe que fornece uma forma de cancelar uma requisição antes que ela seja concluída.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Aqui está um exemplo de como usar o AbortController para cancelar uma requisição com o Fetch API:

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', {
  signal
})
.then(response => {
  if (!response.ok) {
    throw new Error(`Erro: ${response.status}`);
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.log(`Houve um problema na requisição: ${error.message}`);
});

// Cancela o request
controller.abort();

No exemplo acima, criamos um objeto AbortController e armazenamos sua referência em uma variável chamada controller.

Em seguida, passamos o signal do objeto AbortController como uma opção para a chamada fetch().

Quando chamamos o método controller.abort(), ele cancela a requisição que está sendo executada.

É importante notar que, uma vez que uma requisição foi cancelada, o Fetch API lançará uma exceção chamada AbortError.

Você pode capturar essa exceção e lidar com ela de acordo com suas necessidades, como no exemplo acima.

Em resumo, o cancelamento de requisições com o Fetch API é uma tarefa um pouco complexa, mas é possível com o uso do objeto AbortController.

Ao usar o AbortController, você pode cancelar requisições HTTP com o Fetch API antes que elas sejam concluídas.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Em conclusão, o cancelamento de requisições HTTP com o Fetch API pode ser uma tarefa importante em aplicações web.

Usando o objeto AbortController, é possível cancelar uma requisição antes que ela seja concluída e lidar com a exceção AbortError de acordo com suas necessidades.

Este artigo espera ter fornecido uma compreensão clara e detalhada sobre como cancelar um request HTTP com fetch, e como o objeto AbortController pode ser usado para esse propósito.

Em resumo, o cancelamento de requisições HTTP com o Fetch API é possível e pode ser realizado usando o objeto AbortController.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Quando vale a pena cancelar um request?

Antes de sair copiando código, entende o porquê

Toda requisição que ficou pra trás continua ocupando rede e memória, e pior: ela volta depois e sobrescreve um dado mais novo que já estava na tela

Os casos clássicos:

Busca que dispara a cada tecla digitada, onde a resposta da palavra antiga chega depois da nova

Usuário que sai da tela (ou fecha o modal) antes da resposta chegar

Botão que a pessoa clica duas vezes na ansiedade, gerando dois requests iguais

Requisição demorada, tipo uma resposta que vem em streaming, onde o usuário muda de ideia no meio do caminho

Se o teu caso é um desses, cancelar não é firula, é o que evita aquele bug chato de tela piscando dado errado 🙂

Cuidado com o abort() logo depois do fetch:

Repara no exemplo acima: o controller.abort() roda praticamente na linha seguinte ao fetch

Isso é ótimo pra demonstrar, porém na prática significa que a requisição SEMPRE vai ser cancelada, ela nem chega a terminar

No mundo real esse abort() nunca fica solto no meio do arquivo, ele mora dentro de um evento:

no clique de um botão Cancelar

na limpeza da tela, quando o componente sai do ar

na nova digitação da busca, cancelando a anterior antes de disparar a próxima

Ou seja: guarda a referência do controller num lugar que o evento consiga alcançar depois, senão não tem como abortar coisa nenhuma haha

O cancelamento cai no mesmo catch do erro de rede:

Detalhe que pega muita gente: quando você aborta, a promise não resolve, ela rejeita

E ela cai exatamente no mesmo catch que trata falha de verdade

Resultado: o usuário clica em Cancelar e leva um "Houve um problema na requisição" na cara, sendo que problema nenhum aconteceu, foi ele mesmo que pediu pra parar

Como o artigo mostrou ali em cima, o cancelamento chega no catch como AbortError

Então trata os dois de forma diferente: cancelamento é fluxo normal (tira o loading e segue a vida), erro de rede é que merece mensagem pro usuário

Parece bobagem, mas é isso que separa o código que funciona do código que só não quebra

Dá pra usar o mesmo controller como timeout?

Dá, e esse é um dos usos mais massa

A ideia é simples: logo depois de disparar o fetch, você agenda o abort com um setTimeout

Se a resposta chegar antes, você limpa o timer com clearTimeout e nada acontece

Se não chegar, o abort() dispara e a requisição morre ali, em vez de deixar a pessoa olhando spinner eterno

Mesmo controller, mesmo signal, muda só QUEM puxa o gatilho: em vez de um clique, o relógio

Bora testar? Coloca um tempo curto de propósito e vê o AbortError aparecer no catch, é a melhor forma de entender o fluxo