Versão em português
Axios e Fetch são ferramentas populares para fazer requisições HTTP em JavaScript, mas possuem algumas diferenças chave. Aqui está um resumo:
Axios
- Recursos Embutidos: O Axios vem com muitos recursos embutidos, como transformação automática de JSON, interceptores de requisição e resposta, e cancelamento de requisições.
- Compatibilidade com Navegadores: Suporta navegadores mais antigos, incluindo o Internet Explorer.
- Tratamento de Erros: O Axios rejeita automaticamente promessas para status de erro HTTP (como 404 ou 500), facilitando o tratamento de erros.
- Interceptores de Requisição/Resposta: Permite modificar requisições ou respostas globalmente de forma simples.
- Cancelamento de Requisições: O Axios oferece uma maneira fácil de cancelar requisições.
Fetch
- API Nativa: Fetch é uma API nativa da web, ou seja, não é necessário instalar bibliotecas adicionais.
- Baseado em Promessas: Utiliza Promessas, mas é necessário verificar manualmente o status da resposta para erros.
- Manipulação de Streams: Fetch suporta streaming, o que pode ser útil para lidar com grandes respostas.
- Mais Controle: Oferece mais controle sobre requisições, mas requer mais código adicional para recursos como configuração de padrões ou interceptação de requisições.
-
Sem Suporte Embutido para JSON: É necessário chamar
.json()
no objeto de resposta para analisar dados JSON.
Casos de Uso
- Use Axios se precisar de um conjunto rico de recursos prontos para uso, especialmente para aplicações complexas.
- Use Fetch para casos de uso mais simples ou quando quiser evitar dependências externas.
Exemplo de Uso
Axios:
axios.get('/api/data')
.then(response => console.log(response.data))
.catch(error => console.error(error));
const options = {
url: 'http://localhost/test.htm',
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
data: {
a: 10,
b: 20
}
};
axios(options)
.then(response => {
console.log(response.status);
});
Fetch:
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json;charset=UTF-8",
},
body: JSON.stringify({
a: 10,
b: 20,
}),
};
fetch(url, options)
.then((response) => response.json())
.then((data) => {
console.log(data);
});
Observações:
- Para enviar dados,
fetch()
usa a propriedadebody
para uma requisição POST, enquanto o Axios usa a propriedadedata
. - Os dados em
fetch()
são transformados em uma string usando o métodoJSON.stringify
. - O Axios transforma automaticamente os dados retornados do servidor, mas com
fetch()
, é necessário chamar o métodoresponse.json()
para analisar os dados em um objeto JavaScript. - Com Axios, a resposta de dados fornecida pelo servidor pode ser acessada dentro do objeto
data
, enquanto no métodofetch()
, os dados finais podem ser nomeados com qualquer variável.
Conclusão
Ambos têm seus pontos fortes, e a escolha muitas vezes depende das suas necessidades específicas e preferências. Se você estiver construindo uma aplicação maior com muitas interações de API, o Axios pode facilitar algumas tarefas, enquanto o Fetch é ótimo para tarefas diretas.
O Axios oferece uma API amigável que simplifica a maioria das tarefas de comunicação HTTP. No entanto, se você prefere usar recursos nativos do navegador, definitivamente pode implementar funcionalidades semelhantes por conta própria com a API Fetch.
Como exploramos, é totalmente viável replicar os recursos essenciais do Axios usando o método fetch()
disponível nos navegadores. A decisão de incluir uma biblioteca HTTP do cliente depende, em última análise, do seu conforto com APIs nativas e dos requisitos específicos do seu projeto.
Para mais informações: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59
Top comments (0)