Dominando Requisições de API com Axios Retry: Um Guia Abrangente
Aprenda a dominar as solicitações de retry do Axios para lidar com erros de rede de forma elegante em suas aplicações web.
Imagine isso: você está construindo uma aplicação web elegante. O front end parece perfeito, a experiência do usuário é suave e tudo parece no lugar. Mas então, do nada, suas chamadas de API começam a falhar intermitentemente. É um cenário de pesadelo para qualquer desenvolvedor. Então, qual é a solução? Chegam os pedidos de repetição do Axios. Neste post do blog, vamos explorar como implementar e otimizar os pedidos de repetição do Axios para lidar com esses irritantes erros de rede de forma elegante. E adivinha? Ao final, você será um especialista em lidar com pedidos de API como um campeão!
Por que Axios?
Primeiro, por que você deve usar Axios para suas chamadas de API? Axios é um cliente HTTP baseado em promessas para JavaScript. É popular por sua facilidade de uso e versatilidade, permitindo que você faça solicitações tanto para APIs de backend quanto de terceiros. Suporta todos os métodos HTTP e funciona perfeitamente com Node.js e aplicações de navegador. Além disso, vem com um monte de recursos úteis como interceptadores, transformação automática de dados JSON e, mais importante para nós, pedidos de repetição.
O Problema com Redes Não Confiáveis
Imagine que você está trabalhando em uma aplicação que depende fortemente de chamadas de API. Poderia ser um aplicativo de clima, um painel de mídia social ou um site de comércio eletrônico buscando detalhes de produtos. Seus usuários esperam dados em tempo real. No entanto, a confiabilidade da rede pode ser imprevisível. Uma breve falha no servidor ou um pequeno erro na rede pode resultar em solicitações de API falhadas. É aqui que os pedidos de repetição do Axios entram em cena, permitindo que sua aplicação tente automaticamente repetir solicitações falhadas e melhore a experiência geral do usuário.
Configurando o Axios
Antes que possamos implementar pedidos de repetição, precisamos configurar o Axios em nosso projeto. Se você ainda não instalou o Axios, pode fazê-lo usando npm ou yarn:
npm install axios
ou
yarn add axios
Uma vez instalado, você pode importar o Axios e começar a fazer chamadas de API. Aqui está um exemplo simples:
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Apresentando o Axios Retry
Então, como fazemos o Axios tentar novamente uma solicitação quando falha? A resposta está nos interceptadores do Axios. Os interceptadores permitem que você execute seu código ou modifique a solicitação/resposta antes que a solicitação seja enviada ou após a resposta ser recebida. Para tentar novamente as solicitações, usaremos interceptadores de solicitação.
Precisamos instalar um pacote adicional, axios-retry, que torna a implementação de tentativas bem simples. Instale-o usando npm ou yarn:
npm install axios-retry
ou
yarn add axios-retry
Em seguida, vamos configurar a repetição do Axios em nosso projeto:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, { retries: 3 });
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Neste exemplo, configuramos o Axios para tentar novamente solicitações falhadas até três vezes. É tão simples!
Personalizando o Axios Retry
A configuração básica é ótima, mas podemos fazer muito mais com o Axios retry. Por exemplo, podemos personalizar a lógica de repetição com base no tipo de erro, no atraso entre as tentativas e até mesmo na estratégia de backoff exponencial.
Lógica de Repetição Personalizada
Vamos personalizar a lógica de repetição para tentar novamente apenas em erros de rede ou códigos de status específicos:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryCondition: (error) => {
return error.response.status === 500 || axiosRetry.isNetworkOrIdempotentRequestError(error);
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Neste exemplo, o Axios tentará novamente a solicitação se o status da resposta for 500 ou se for um erro de rede.
Atrasando Entre as Tentativas
Você também pode adicionar um atraso entre as tentativas para evitar bombardear o servidor com solicitações em rápida sucessão. Veja como:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryDelay: (retryCount) => {
return retryCount * 1000; // 1 segundo de atraso entre tentativas
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Essa configuração introduce um atraso de 1 segundo entre as tentativas.
Backoff Exponencial
Para uma abordagem mais sofisticada, considere usar o backoff exponencial, que aumenta o atraso exponencialmente a cada nova tentativa. Isso pode ser especialmente útil para dar ao servidor um tempo para se recuperar.
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
retryDelay: axiosRetry.exponentialDelay
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Lidando com Métodos HTTP Específicos
Às vezes, você pode querer tentar novamente apenas métodos HTTP específicos. Por padrão, axios-retry tenta novamente as solicitações GET, mas você pode personalizar isso:
import axios from 'axios';
import axiosRetry from 'axios-retry';
axiosRetry(axios, {
retries: 3,
shouldResetTimeout: true,
retryCondition: (error) => {
return axiosRetry.isRetryableError(error) && error.config.method === 'get';
}
});
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Erro ao buscar dados:', error);
});
Caso de Uso do Mundo Real: Buscando Dados de uma API
Vamos juntar tudo isso com um exemplo do mundo real. Imagine que você está construindo um aplicativo de clima que busca dados de uma API de terceiros. Problemas de rede são comuns, e você quer garantir uma experiência do usuário suave.
Veja como você pode implementar a repetição do Axios em seu aplicativo de clima:
import axios from 'axios';
import axiosRetry from 'axios-retry';
// Configurando a repetição do Axios
axiosRetry(axios, {
retries: 3,
retryDelay: axiosRetry.exponentialDelay,
retryCondition: (error) => {
return error.response.status === 503 || axiosRetry.isNetworkOrIdempotentRequestError(error);
}
});
// Função para buscar dados do clima
const fetchWeatherData = async (city) => {
try {
const response = await axios.get(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
return response.data;
} catch (error) {
console.error('Erro ao buscar dados do clima:', error);
throw error;
}
};
// Uso
fetchWeatherData('San Francisco')
.then(data => {
console.log('Dados do clima:', data);
})
.catch(error => {
console.error('Falha ao buscar dados do clima após tentativas:', error);
});
Neste exemplo, configuramos o Axios para tentar novamente solicitações até três vezes com um atraso exponencial, especificamente para erros de rede ou um código de status 503.
Apidog: uma ferramenta gratuita para gerar seu código Axios
Apidog é uma plataforma colaborativa de desenvolvimento de API tudo-em-um que fornece um conjunto abrangente de ferramentas para projetar, depurar, testar, publicar e simular APIs. O Apidog permite que você crie automaticamente o código Axios para fazer chamadas HTTP.
Aqui está o processo para usar o Apidog para gerar o código Axios:
Passo 1: Abrir o Apidog e selecionar um novo pedido
Passo 2: Digite a URL do endpoint da API para o qual deseja enviar uma solicitação,insira quaisquer cabeçalhos ou parâmetros de string de consulta que deseje incluir na solicitação, em seguida, clique em "Design" para mudar para a interface de design do Apidog.
Passo 3: Selecione "Gerar código do cliente" para gerar seu código.
Passo 4: Copie o código Axios gerado e cole-o em seu projeto.
Usando Apidog para Enviar Solicitações HTTP
Apidog oferece vários recursos avançados que aprimoram ainda mais sua capacidade de testar solicitações HTTP. Esses recursos permitem que você personalize suas solicitações e lide com cenários mais complexos sem esforço.
Passo 1: Abrir o Apidog e criar um novo pedido.
Passo 2: Encontre ou insira manualmente os detalhes da API para a solicitação POST que deseja fazer.
Passo 3: Preencha os parâmetros necessários e quaisquer dados que deseja incluir no corpo da solicitação.
Melhores Práticas
Monitore as Tentativas de Repetição
Embora as repetições possam melhorar a confiabilidade, elas também podem aumentar a carga em seu servidor. Monitore as tentativas de repetição e ajuste sua lógica de repetição conforme necessário. Ferramentas como Apidog podem ajudá-lo a monitorar e testar suas APIs de forma eficaz.
Lide com Diferentes Cenários
Customize sua lógica de repetição com base nas necessidades específicas de sua aplicação. Por exemplo, você pode querer lidar com erros de limitação de taxa de forma diferente, implementando um atraso maior ou uma estratégia de repetição diferente.
Mantenha o Usuário Informado
Informe seus usuários quando as repetições estão ocorrendo, especialmente se resultar em um atraso visível. Isso pode ser tão simples quanto mostrar um indicador de carregamento ou uma mensagem indicando que o aplicativo está tentando se reconectar.
Limite as Tentativas de Repetição
Evite repetições infinitas definindo um limite razoável. Isso impede que sua aplicação fique presa em um loop infinito de solicitações falhadas.
Conclusão
Dominar os pedidos de repetição do Axios pode melhorar significativamente a confiabilidade e a experiência do usuário de suas aplicações web. Ao personalizar a lógica de repetição, introduzir atrasos e lidar com diferentes cenários, você pode garantir que seu aplicativo se recupere de problemas de rede de forma elegante.
Pronto para levar seu desenvolvimento de API para o próximo nível? Não se esqueça de conferir Apidog para um conjunto abrangente de ferramentas que simplificam o desenvolvimento e teste de APIs. Com o Apidog, você estará preparado para lidar com qualquer desafio de API que surgir em seu caminho.
