Em JavaScript, tanto o Axios quanto a API Fetch nativa são usados para fazer solicitações HTTP, mas têm algumas diferenças em termos de recursos, facilidade de uso e funcionalidade. Aqui está um detalhamento:
Eixos:
Axios simplifica a realização de solicitações e o tratamento de respostas. Ele analisa automaticamente as respostas JSON, facilitando o trabalho.
axios.get('/api/user') .then(response => console.log(response.data)) .catch(error => console.error(error));
Buscar:
Com fetch, você precisa lidar explicitamente com a análise JSON, o que adiciona uma etapa extra.
fetch('/api/user') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
Buscar:
Com a busca, os códigos de status diferentes de 2xx (como 404 ou 500) não são tratados como erros. Você deve verificar manualmente o status da resposta e gerar um erro, se necessário.
fetch('/api/user') .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));
Eixos:
Axios fornece interceptores integrados, permitindo modificar solicitações ou lidar com respostas globalmente, o que pode ser útil para adicionar tokens de autenticação, registro, etc.
axios.interceptors.request.use(config => { config.headers['Authorization'] = 'Bearer token'; return config; });
Buscar:
Fetch não possui interceptores integrados, portanto, você precisará agrupar manualmente a chamada de busca em uma função personalizada se precisar desse comportamento.
Eixos:
O Axios restringe automaticamente os dados ao fazer solicitações POST e define o Content-Type como application/json. Ele também suporta o envio de dados em outros formatos como FormData com facilidade.
axios.post('/api/user', { name: 'John' });
Buscar:
Na busca, você precisa restringir manualmente os dados e definir os cabeçalhos para solicitações POST.
fetch('/api/user', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John' }) });
Eixos:
Axios possui suporte integrado para cancelamento de solicitações usando CancelToken.
const source = axios.CancelToken.source(); axios.get('/api/user', { cancelToken: source.token }); source.cancel('Request canceled.');
Buscar:
Com fetch, você precisaria usar AbortController para cancelar solicitações, o que pode ser um pouco mais complexo.
const controller = new AbortController(); fetch('/api/user', { signal: controller.signal }); controller.abort();
Se preferir mais controle sobre suas solicitações, você pode optar pela busca. Se você quiser algo que simplifique as solicitações HTTP, axios seria a melhor opção.
Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.
Copyright© 2022 湘ICP备2022001581号-3