"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Diferença entre Axios e Fetch em Javascript

Diferença entre Axios e Fetch em Javascript

Publicado em 01/11/2024
Navegar:854

Difference Between Axios & Fetch in Javascript

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:

1. Facilidade de uso:

  • 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));
    

2. Tratamento de respostas:

  • Eixos: O Axios resolve automaticamente a resposta e gera um erro se o status da resposta estiver fora do intervalo de 2xx, para que você possa lidar diretamente com os erros no bloco .catch().
  • 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));
    

3. Interceptação de solicitação e resposta:

  • 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.

4. Compatibilidade do navegador:

  • Eixos: Axios funciona em navegadores mais antigos (IE 11 e anteriores) e lida com polyfills internamente.
  • Buscar: A API Fetch não é compatível com o Internet Explorer. Você pode precisar de um polyfill como whatwg-fetch para suportá-lo em navegadores mais antigos.

5. Manuseio de dados:

  • 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' })
     });
    

6. Cancelamento de solicitações:

  • 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();
    

7. Tratamento de erros:

  • Eixos: O Axios gera erros automaticamente para respostas não 2xx, e o tratamento de erros é mais consistente e centralizado.
  • Buscar: A busca requer mais tratamento manual de erros, pois rejeitará apenas a promessa para erros de rede, não para códigos de status de erro HTTP.

Conclusão:

  • Axios é mais rico em recursos, fácil de usar e fornece melhor abstração para lidar com solicitações.
  • Fetch é uma API moderna e nativa que requer menos dependências, mas precisa de mais trabalho manual para lidar com certos recursos como erros, interceptadores e manipulação de dados.

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.

Declaração de lançamento Este artigo é reproduzido em: https://dev.to/pulkitgovrani/difference-between-axios-fetch-in-javascript-25od?1 Se houver alguma infração, entre em contato com [email protected] para excluí-lo.
Tutorial mais recente Mais>

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