Entendendo biblioteca de requisições HTTP Axios

Primeiramente o que é AXIOS e sua finalidade

Axios é uma biblioteca JavaScript que facilita a realização de requisições HTTP (como GET, POST, PUT, DELETE, entre outros) a partir do front-end, mas que também pode ser utilizado no lado do back-end especificamente no Node-JS. É uma alternativa popular a outras bibliotecas como jQuery.ajax e Fetch API.

Exemplo de uso para o verbo GET:

// Faz uma requisição GET para a URL "https://dominio.com/posts"
axios.get("https://dominio.com/posts")
  .then(function (response) {
    // Manipula a resposta da requisição
    console.log(response.data);
  })
  .catch(function (error) {
    // Manipula erros
    console.log(error);
  });

Exemplo de uso para o verbo POST:

// Faz uma requisição POST para a URL "https://dominio.com/posts"
axios.post("https://dominio.com/posts", {
    title: "Post Exemplo",
    body: "Este é um exemplo de uma requisição de post"
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Exemplo de uso para o verbo PUT:

axios.put("https://dominio.com/posts/1", {
    title: "Post Exemplo atualizado",
    body: "Este é um exemplo de post atualizado"
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Exemplo de uso para o verbo DELETE:

axios.delete("https://dominio.com/posts/1")
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Vantagens no uso da biblioteca de requisições HTTP Axios

1. Suporte a diversos tipos de requisições HTTP: Axios suporta diversos tipos de requisições HTTP, incluindo GET, POST, PUT, DELETE e outros.
2. Tratamento de erros simples: Axios fornece uma forma simples e direta de lidar com erros em requisições HTTP.
3. Integração fácil com Promises: Axios é baseado em Promises, o que torna a sintaxe para manipular requisições HTTP mais simples e concisa.
4. Configuração global: Axios permite a configuração de opções globais para todas as requisições, como headers, baseURL, timeout, entre outras.
5. Suporte a Cancelamento de Requisições: Axios permite que você cancele uma requisição a qualquer momento antes de sua conclusão.
6. Suporte a Intercepções: Axios permite que você adicione intercepções de requisições e respostas, o que é útil para adicionar lógicas globais, como autenticação ou manipulação de erros.

Já suas desvantagens…

1. Não é nativo do navegador: Axios não é uma API nativa do navegador e, portanto, requer uma biblioteca externa para ser usada.
2. Pode ser lento em comparação com soluções nativas: Devido ao fato de ser uma biblioteca externa, o Axios pode ser mais lento em comparação com soluções nativas, como o Fetch API por exemplo.
3. Não oferece suporte ao modo de sincronização: Axios só suporta requisições assíncronas, o que pode ser um problema em alguns casos específicos.
4. Não é fácil personalizar a biblioteca: Axios pode ser uma solução rígida para certos casos, onde é necessário personalizar a biblioteca de acordo com as necessidades do projeto.
5. Pode haver problemas de compatibilidade: Axios é uma biblioteca baseada em JavaScript moderno e pode haver problemas de compatibilidade em navegadores antigos ou com outras bibliotecas.

Configurando o AXIOS

Você pode configurar o Axios globalmente no seu projeto, estabelecendo configurações padrão para todas as requisições. Aqui está um exemplo de como configurar o Axios:

import axios from "axios";

const instance = axios.create({
  baseURL: "https://dominio.com/posts",
  timeout: 1000
});

export default instance;

Neste exemplo, estamos criando uma instância do Axios com uma baseURL padrão e um timeout de 1000 milissegundos. Em seguida, exportamos essa instância como o módulo padrão do Axios para ser usado em todo o projeto.

Você também pode adicionar intercepções e configurações adicionais à instância do Axios usando métodos como instance.interceptors.request.use() ou instance.defaults.headers.common.

Como funcionam os interceptors do AXIOS

Os interceptors do Axios permitem intercetar as requisições e respostas para realizar tarefas comuns, como adicionar cabeçalhos de autenticação ou manipular erros de resposta.

Existem dois tipos de interceptors: request interceptors e response interceptors.

Interceptors de requisição são funções que são executadas antes de uma requisição ser enviada. Por exemplo, você pode adicionar um interceptor de requisição para adicionar um cabeçalho de autenticação às requisições:

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = "Token 12345";
  return config;
});

Interceptors de resposta são funções que são executadas após a resposta de uma requisição ser recebida. Por exemplo, você pode adicionar um interceptor de resposta para manipular erros de resposta:

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  if (error.response.status === 401) {
    // Handle unauthorized error
  }
  return Promise.reject(error);
});

Os interceptors permitem adicionar comportamentos comuns a todas as requisições sem precisar repeti-los em cada requisição individual. Além disso, os interceptors também podem ser removidos se necessário.