Cancelar solicitações de aplicativos React assíncronas com AbortController

Ao desenvolver aplicações web, é prática comum enviar solicitações assíncronas a um servidor backend. No entanto, há momentos em que essas solicitações se tornam redundantes e precisam ser canceladas, como quando um usuário inicia acidentalmente o download de um arquivo grande e decide interrompê-lo.

Oferecer um mecanismo para os usuários cancelarem solicitações não intencionais é benéfico, e a API da web AbortController é uma maneira eficaz de fazer isso em aplicativos React.

O que é AbortController?

AbortController é uma API web que pode abortar uma ou mais solicitações web conforme e quando necessário. Isto é particularmente útil para gerenciar tarefas assíncronas, como fetch solicitações em desenvolvimento web. AbortController cria um sinal que pode ser passado para a API Fetch ou outras APIs que suportam o encerramento de solicitações da web. Você pode ligar para o abort na instância AbortController quando desejar interromper a operação em andamento. Isso sinaliza para a solicitação que ela deve ser cancelada.

Os benefícios do AbortController incluem:

• Experiência do usuário aprimorada: Cancelar solicitações desnecessárias pode reduzir a carga do servidor e aliviar o congestionamento da rede. Isso pode melhorar o desempenho geral do seu aplicativo e melhorar a experiência do usuário.
• Ajude a resolver as condições de corrida: Uma condição de corrida ocorre quando dois ou mais processos tentam acessar ou modificar um recurso compartilhado simultaneamente, resultando em uma saída imprevisível. O resultado do processo depende da ordem de execução, e essa ordem pode variar dependendo de fatores como velocidade da rede, desempenho do dispositivo ou carga do servidor. AbortController pode ajudar a mitigar condições de corrida, permitindo cancelar uma solicitação que não é mais necessária, evitando assim colisões desnecessárias entre diferentes processos.

Como usar o AbortController no React

Demonstrarei como o AbortController pode ser usado para resolver o problema de condição de corrida com o cliente HTTP Axios para Node.js.

Configurar o AbortController

O código a seguir cria um componente React com dois botões: um obtém uma imagem aleatória usando a API do gerador de usuário aleatório e outro cancela a solicitação. Ele também renderiza condicionalmente uma imagem gerada a partir da solicitação. Além disso, inclui uma pictureUrl estado que armazena a URL da imagem gerada.

Adicionar solicitações de API

O código a seguir importa Axios, que permite fazer a solicitação de API para a API do gerador de usuário aleatório. Também inclui um onClick ouvinte de evento que chama o getPicture função. Esta função solicita o endpoint e define a imagem gerada para ele pictureUrl estado.

Cancelando a solicitação

O código a seguir cria uma referência para o abortController e inicializa-o com uma string vazia. Isso evita que o React renderize o componente quando o valor ref for alterado. Para cada solicitação de API, ele cria uma nova abortController e passa sua propriedade de sinal (uma propriedade somente leitura do abortController que pode ser usado para se comunicar com a solicitação) à solicitação. Isso garante que cada solicitação tenha seu próprio objeto controlador. Ele também adiciona um onClick ouvinte de evento para o botão cancelar, que chama o controlador abort() método para cancelar a solicitação.

Conclusão

AbortController é uma ferramenta poderosa para gerenciar solicitações assíncronas em aplicativos React e pode ajudar a melhorar o desempenho e a confiabilidade do aplicativo.

Se você estiver trabalhando com solicitações assíncronas em seu aplicativo React, considere cenários em que você gostaria de cancelar solicitações e use a API AbortController para fazer isso de forma eficaz.

À medida que a demanda por aplicativos projetados em React continua a crescer, também aumenta a necessidade de desenvolvedores qualificados! Aprenda como contratar um desenvolvedor React Native baixando Como contratar desenvolvedores React Native: um guia abrangente.

A postagem Cancelar solicitações de aplicativos React assíncronas com AbortController apareceu pela primeira vez em The New Stack.