Posted by Axios e Ky são duas das bibliotecas mais usadas para realizar requisições HTTP em projetos JavaScript modernos. Ambas facilitam a comunicação com APIs REST, mas possuem diferenças importantes quanto a tamanho, funcionalidades e uso em diferentes ambientes.
Funcionamento Básico de Axios e Ky
Axios é uma biblioteca isomórfica baseada em promessas que funciona tanto no navegador quanto no Node.js. Ele usa XMLHttpRequest no browser e o módulo http do Node.js internamente.
Ky é um wrapper moderno sobre a API fetch, também compatível com navegadores e Node.js (usando node-fetch). Ky é mais leve e tem uma sintaxe mais limpa, ideal para projetos front-end menores ou aplicações que já usam fetch.
Exemplo de Requisição GET com Axios
import axios from 'axios';
const response = await axios.get('https://api.exemplo.com/data');
console.log(response.data);Exemplo de Requisição GET com Ky
import ky from 'ky';
const data = await ky.get('https://api.exemplo.com/data').json();
console.log(data);Ambas as bibliotecas oferecem suporte a async/await e tratamento automático de JSON, tornando-as fáceis de usar e integrar em frameworks como React, Vue ou Next.js.
Adicionando Token de Autorização nas Requisições
Uma necessidade comum em aplicações modernas é incluir tokens de autorização, como o Bearer Token, em todas as requisições.
Como Adicionar Token com Axios
Axios permite configurar headers globalmente ou por requisição:
// Configuração global
axios.defaults.headers.common['Authorization'] = 'Bearer seu_token_aqui';
// Ou na requisição específica
const response = await axios.get('https://api.exemplo.com/data', {
headers: {
Authorization: 'Bearer seu_token_aqui'
}
});Também é possível usar interceptadores para adicionar tokens dinamicamente:
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
config.headers.Authorization = `Bearer ${token}`;
return config;
});Como Adicionar Token com Ky
Ky permite definir headers diretamente ou criar uma instância customizada:
// Em uma requisição específica
const data = await ky.get('https://api.exemplo.com/data', {
headers: {
Authorization: 'Bearer seu_token_aqui'
}
}).json();Para reutilizar headers em múltiplas requisições:
const api = ky.create({
headers: {
Authorization: `Bearer ${localStorage.getItem('token')}`
}
});
const data = await api.get('https://api.exemplo.com/data').json();Essa abordagem simplificada ajuda a manter o código limpo e organizado.
Tamanho e Desempenho
Um dos principais critérios para escolher entre Axios e Ky é o tamanho da biblioteca.
- Axios: Tem cerca de 14 KB minificado e gzipado. É mais pesado, mas oferece mais recursos.
- Ky: Tem cerca de 1.6 KB minificado e gzipado. Ideal para projetos que buscam performance e tamanho reduzido.
Se você estiver preocupado com o tempo de carregamento e deseja manter seu bundle pequeno, Ky é a melhor opção. Se precisar de mais controle e recursos avançados, Axios é mais adequado.
Suporte a Recursos Avançados
Embora ambos façam requisições HTTP, eles diferem quanto ao suporte a certas funcionalidades:
| Funcionalidade | Axios | Ky |
|---|---|---|
| Interceptação de requisições | Sim | Não |
| Cancelamento de requisições | Sim | Sim |
| Retry automático | Não (mas há plugins) | Sim |
| Timeout padrão | Não | Sim |
| Tratamento de erros | Detalhado | Simples |
Axios é mais completo e indicado para sistemas complexos, enquanto Ky é mais enxuto e eficiente para aplicações simples ou componentes isolados.
Compatibilidade com Navegadores e Node.js
Axios tem compatibilidade ampla com navegadores antigos e não requer transpilação adicional. No backend, ele roda nativamente no Node.js.
Ky depende do fetch, que não está disponível em navegadores muito antigos (como o Internet Explorer). Para Node.js, é necessário instalar o pacote ky-universal ou configurar node-fetch manualmente.
