No mundo acelerado do desenvolvimento web, gerenciar solicitações de API de maneira eficiente é crucial. Às vezes, você precisa cancelar essas solicitações para economizar recursos ou evitar resultados indesejados. Axios, uma biblioteca JavaScript popular, fornece uma maneira integrada de lidar com esses cenários. Neste post do blog, vamos explorar as complexidades de cancelar solicitações de API com Axios e apresentar a você o Apidog, uma ferramenta que simplifica os testes e a gestão de APIs. E a melhor parte? Você pode baixar o Apidog gratuitamente!
Por que você pode precisar cancelar solicitações
Vamos começar com um cenário relacionado. Imagine que você está construindo um recurso de pesquisa para seu aplicativo web. À medida que o usuário digita na caixa de pesquisa, você quer buscar sugestões de uma API. No entanto, se o usuário continuar digitando rapidamente, você não quer sobrecarregar o servidor com solicitações desnecessárias para cada pressionamento de tecla. Em vez disso, você gostaria de cancelar quaisquer solicitações pendentes e enviar apenas a mais recente. É aí que os cancelamentos de solicitações axios entram em ação!
Como funciona o cancelamento de solicitações Axios
Então, como funciona esse cancelamento? Bem, a chave está no CancelToken fornecido pelo Axios. Esse token permite que você crie uma "operação cancelável" e a associe a uma solicitação específica. Se você decidir cancelar a operação, o Axios automaticamente interromperá a solicitação correspondente.
Criando um CancelToken
Para começar, você precisará importar o CancelToken do Axios:
import axios from 'axios';
const source = axios.CancelToken.source();
O objeto source possui duas propriedades: token e cancel. A propriedade token é o que você passará junto com sua solicitação Axios, enquanto a função cancel é usada para, bem, cancelar a solicitação.
Fazendo uma solicitação que pode ser cancelada
Agora que você tem um CancelToken, pode anexá-lo à sua solicitação Axios da seguinte forma:
axios.get('/api/suggestions', {
cancelToken: source.token
})
.then(response => {
// Lidar com a resposta bem-sucedida
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
// Lidar com o cancelamento
} else {
// Lidar com outros erros
}
});
Passando source.token como a opção cancelToken, você está dizendo ao Axios que essa solicitação pode ser cancelada. Se a solicitação for cancelada com sucesso, a Promise será rejeitada com um objeto Cancel, que você pode lidar no bloco catch.
Cancelando a Solicitação
Para realmente cancelar a solicitação, você simplesmente chama a função cancel fornecida pelo objeto source:
source.cancel('Operação cancelada pelo usuário.');
Você pode passar uma razão opcional para cancelar a solicitação, que estará disponível no objeto Cancel gerado pela Promise rejeitada.
Exemplo do mundo real: Sugestões de Pesquisa com Axios Cancel Requests
Agora que você entende o básico, vamos ver como você pode implementar cancelamentos de solicitações axios em um cenário do mundo real. Vamos construir um recurso simples de sugestões de pesquisa usando React e a API apidog (uma API fictícia para fins de teste).
Primeiro, vamos configurar nosso componente React:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const SearchSuggestions = () => {
const [query, setQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [cancelToken, setCancelToken] = useState(null);
// ... (A lógica do componente vai aqui)
return (
<div>
<input
type="text"
value={query}
onChange={handleInputChange}
placeholder="Pesquisar..."
/>
<ul>
{suggestions.map(suggestion => (
<li key={suggestion}>{suggestion}</li>
))}
</ul>
</div>
);
};
Em seguida, vamos implementar a função handleInputChange, que buscará sugestões da API apidog:
const handleInputChange = (event) => {
const newQuery = event.target.value;
setQuery(newQuery);
// Cancelar a solicitação anterior, se existir
if (cancelToken) {
cancelToken.cancel('Cancelando solicitação anterior');
}
// Criar um novo CancelToken para a solicitação atual
const source = axios.CancelToken.source();
setCancelToken(source);
// Fazer a solicitação da API com o novo CancelToken
axios.get(`https://api.apidog.com/suggestions?query=${newQuery}`, {
cancelToken: source.token
})
.then(response => {
setSuggestions(response.data.suggestions);
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Solicitação cancelada:', thrown.message);
} else {
console.error('Erro ao buscar sugestões:', thrown);
}
});
};
Neste exemplo, estamos cancelando qualquer solicitação anterior antes de fazer uma nova. Criamos um novo CancelToken para cada solicitação e o armazenamos no estado do componente usando a função setCancelToken. Quando o usuário digita na caixa de pesquisa, cancelamos a solicitação anterior (se existir) e fazemos uma nova solicitação com a consulta atualizada e o novo CancelToken.
Se a solicitação for cancelada com sucesso, o bloco catch lidará com o cancelamento e registrará a razão. Se houver outro erro, ele será capturado e registrado também.
Técnicas Avançadas
Agora que você dominou o básico das solicitações de cancelamento axios, vamos dar uma olhada em algumas técnicas avançadas que podem aprimorar ainda mais suas habilidades.
Instância Axios Reutilizável com Cancelamentos Automáticos de Solicitações
Em vez de criar um novo CancelToken para cada solicitação, você pode criar uma instância Axios reutilizável que cancela automaticamente solicitações anteriores quando uma nova é feita. Essa abordagem pode ser particularmente útil ao trabalhar com aplicativos complexos que têm múltiplos componentes fazendo solicitações de API.
Aqui está um exemplo de como você pode criar tal instância:
import axios from 'axios';
const axiosInstance = axios.create();
let cancelToken;
axiosInstance.interceptors.request.use(
config => {
if (cancelToken) {
cancelToken.cancel('Cancelando solicitação anterior');
}
config.cancelToken = new axios.CancelToken(c => {
cancelToken = c;
});
return config;
},
error => Promise.reject(error)
);
export default axiosInstance;
Neste exemplo, criamos uma nova instância Axios usando axios.create(). Em seguida, configuramos um interceptor para solicitações, que cancela automaticamente qualquer solicitação anterior antes de fazer uma nova. O cancelToken é armazenado globalmente e atribuído à opção cancelToken de cada nova solicitação.
Você pode usar essa axiosInstance em toda sua aplicação para fazer solicitações de API, e ela lidará automaticamente com os cancelamentos para você.
Lidando com Múltiplas Solicitações Canceláveis
Em alguns casos, você pode ter várias solicitações canceláveis em um único componente ou função. Para lidar com essa situação, você pode usar um array ou objeto para armazenar várias instâncias de CancelToken.
Aqui está um exemplo de como você pode gerenciar múltiplas solicitações de cancelamento:
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MultipleRequests = () => {
const [cancelTokens, setCancelTokens] = useState({});
const fetchData = (endpoint) => {
// Cancelar qualquer solicitação existente para o mesmo endpoint
if (cancelTokens[endpoint]) {
cancelTokens[endpoint].cancel('Cancelando solicitação anterior');
}
// Criar um novo CancelToken para a solicitação atual
const source = axios.CancelToken.source();
setCancelTokens(prevTokens => ({ ...prevTokens, [endpoint]: source }));
// Fazer a solicitação da API com o novo CancelToken
axios.get(`https://api.apidog.com/${endpoint}`, {
cancelToken: source.token
})
.then(response => {
// Lidar com a resposta bem-sucedida
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Solicitação cancelada:', thrown.message);
} else {
console.error('Erro ao buscar dados:', thrown);
}
});
};
return (
<div>
<button onClick={() => fetchData('endpoint1')}>Buscar Dados 1</button>
<button onClick={() => fetchData('endpoint2')}>Buscar Dados 2</button>
</div>
);
};
Neste exemplo, usamos um objeto cancelTokens para armazenar múltiplas instâncias de CancelToken, com o endpoint como a chave. Ao fazer uma nova solicitação, primeiro verificamos se há um CancelToken existente para esse endpoint e o cancelamos, se necessário. Em seguida, criamos um novo CancelToken e o armazenamos no objeto cancelTokens, sobrescrevendo qualquer valor anterior para esse endpoint.
Essa abordagem permite que você gerencie múltiplas solicitações canceláveis dentro do mesmo componente ou função, garantindo que apenas a solicitação mais recente para cada endpoint seja executada.
Como cancelar solicitações de API com Apidog?
Para cancelar uma solicitação de API usando Apidog, você normalmente seguiria estas etapas:
- Abra o Apidog e crie uma nova solicitação.
2. Defina o método da solicitação como DELETE.
3. Insira a URL do recurso que você deseja excluir e adicione quaisquer cabeçalhos ou parâmetros adicionais que precisar.
4. Clique no botão “Enviar” para enviar a solicitação e analisar a resposta
Isso enviará uma solicitação DELETE para a URL especificada, que é a maneira padrão de remover recursos via APIs. No entanto, se você estiver procurando cancelar uma solicitação que está em andamento, isso pode não ser suportado diretamente pelo Apidog, pois dependeria da funcionalidade da API e se ela suporta o cancelamento de solicitações em andamento.
Para APIs que não suportam o cancelamento, você precisaria implementar essa funcionalidade no lado do servidor, onde o servidor pode verificar um sinal de cancelamento e encerrar o processamento da solicitação adequadamente.
Conclusão
Dominar a arte de cancelar solicitações de API com Axios pode melhorar significativamente o desempenho e a confiabilidade de suas aplicações. Como vimos, o Axios oferece um método direto e eficaz para abortar solicitações sempre que necessário. Para colocar esse conhecimento em prática e otimizar seu processo de teste de API, não se esqueça de baixar o Apidog. É um aliado poderoso em seu kit de ferramentas de desenvolvimento, e está disponível sem custo algum. Abrace o poder do Axios e do Apidog, e leve sua gestão de APIs para o próximo nível!
