Aprendendo Axios 👾 · DevPunkDaSilva

Intro

Repositório

Confira no link o repositório dos códigos do artigo: https://github.com/MrNullus/learn-axios;

O que é Axios

Axios é um cliente HTTP baseado em promessa (promisse) para NodeJS e navegador.
Ou seja é uma library do ecossistema do JavaScript para fazer requisições HTTP.

É isómorfico - pode ser executado no navegador e no NodeJS com a mesma base de código.

No lado do servidor, ele usa módulo HTTP NodeJS nativo, enquanto n cliente ele usa XMLHttpRequests.

Promisse

É a promessa feita que tem uma resposta (positiva, ou negativa) e enquanto a promessa existir ela será pendente até ter uma resposta.

    ___________
    |        | |
    | Client | |  ______
    |        |/         |
    /--------/          |
  /[][][][]/            | Requisição
  ---------             |
                        |
         / \            |
          |            \ /
          |         _________
Resposta  |        | [    o] |
          |        |---------|
          |        | [ o   ] |
          |        |---------| 
          |_______ | [    o] |
                   |---------|
                   | [ o   ] |
                   |---------|
                   |  Server |

Transformando uma operação em código Axios:

axios.get('user/?ID=12345')
  .then(( response ) => {
    // manipular sucesso
  })
  .catch(( error ) => {
    // manipular erro
  })
  .then(( ) => {
    // manipular sempre que for executado
  });

Install

Para instalar vá a documentação do Axios: https://axios-http.com/docs/intro;

Requisição GET

A requisição GET é usada para em geral para retornar dados do servidor.

A utilização do Axios se dá em implementar a variável axios;

Para o método GET é necessário no mínimo dois atributos dentro
do objeto de configuração, sendo eles: o método e a url;

Ex |>

axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts'
});

// O GET funciona de modo default então pode-se apenas omitir um argumento:
axios({
  url: 'https://jsonplaceholder.typicode.com/posts'
});

Pode-se usar de outra forma mais enxuta e limpa:

axios.get(url);

// Servindo para os outros métodos:
axios.post(url);

Passagem de parametros

Pode-se usar o atributo params para passar os parametros da requisição dentro dele usa-se o nome do parametro e o seu valor.

Ex |>

axios.get('https://jsonplaceholder.typicode.com/posts', {
  params: {
      _limit: 5
  }
})
  .then(( response ) => {
      renderOutput(response);
  });

Requisição POST

Para usar o método POST é necessário ter também dois parâmetros:

url
data (dados que se quer enviar)

Ex |>

const data = {
  title: 'foo',
  body: 'bar',
  userID: 1,
};

axios.post(url, data)
  .then(( response ) => renderOutput(response));

Requisição PUT e PATCH

Os dois verbos HTTP, são parecidos, mas:

PUT -> é usado para quando for alterar todos os atributos de um dado objeto;
PATCH -> é usado quand for ter que alterar um único atributo deste dado objeto;

Ex |>

const put = () => {
    const data = {
        id: 1,
        title: 'Dev Punk',
        body: 'Dev Full Punkoso Mobile',
        userID: 1,
    };

    axios.put(`${url}/1`, data)
        .then(( response ) => renderOutput(response));

    console.log('put');
}


const patch = () => {
    const data = {
        title: 'Dev Punk da Silva',
    };

    axios.patch(`${url}/1`)
        .then(( response ) => renderOutput(response));

    console.log('patch');
}

Requisição DELETE

Verbo usado para deletar dados no banco de dados.

Ex |>

const del = () => {
  axios.delete(url)
    .then(( response ) => renderOutput(response));

  console.log('delete');
}

Múltiplas Requisições

Para fazer essas requisições o Axios usa as promisses do próprio JS.
Usando o método all para fazer isso:

Ex |>

const multiple = () => {
  Promisse.all([
      axios.get(`${url}?_limit=5`),
      axios.get(`${url_users}?_limit=5`),
  ]).then(( response ) =>  {
      console.table(response[0].data);
      console.table(response[1].data);
  });

  console.log('multiple');
}

Transformar Respostas

Usado quando precisa adicionar um campo assim que for pego o payload (dados);

Ex |>

const transform = () => {
  const config = {
      params: {
          _limit: 5
      },
      transformResponse: [( data ) => {
          const payload = JSON.parse(data).map(( item ) => {
              return {
                  title: item.title
              }
          });

          return payload;
      }],
  };

  axios.get(url, config)
      .then(( response ) => renderOutput(response));

  console.log('transform');
}

Tratamento de Erros

Os erros no Axios podem ser tratados da seguinte forma:

axios.get(`${url}/url-errada`)
  .then(( response ) => renderOutput(response))
  .catch(({ response }) => {
      renderOutput(response);
      console.log(response.data); // dados do erro
      console.log(response.status); // status desse erro
      console.log(response.headers); // retorna os headers dessa resposta
  });

Cancelamento de Requisição

Para fazer isso, usa-se AbortController (nativa do JS) ou CancelToken
que são recomendadas pela Documentação do Axios.

Ex |>

const cancel = () => {
  const controller = new AbortController();
  const config = {
    params: {
        _limit: 5
    },
    signal: controller.signal
  };

  axios.get(url, config)
    .then(( response ) => renderOutput(response))
    .catch(( e ) => {
        console.log("MENSAGEM DE ERRO: ", e.message);
    });

  controller.abort();
  console.log('cancel');
}

Interceptadores

Usados para fazer alguma transformação geral da aplicação, já que sempre fara isso quando tiver uma requisição;

Ex |>

// #> Intercept Request
// usado por exemplo para interceptar a requisição e injetar um json web token
axios.interceptors.request.use(( config ) => {
	config.headers.Authorization = 'dsfkandcuilmxmcmsaxZXdkaxmkc';
	console.log(config.headers);

	// Qualquer status que seja 2XX terá esse retorno
	return config;
}, ( error ) => {
		console.log('errooo');

		// Qualquer status que não seja 2XX terá esse retorno
		return new Promise.reject(error);
});


// #> Intercept Response
// usado por exemplo para interceptar a requisição e injetar um json web token
axios.interceptors.response.use(( response ) => {
	console.log(config.headers);

	// Qualquer status que seja 2XX terá esse retorno
	return response;
}, ( error ) => {
	console.log('errooo');
	
	// Qualquer status que não seja 2XX terá esse retorno
	return new Promise.reject(error);
});

O Interceptadores de response podem ser usados para handling error assim não usaria catch.

Multiplas Instâncias do Axios

Criar múltiplas instâncias do Axios para manipular ele com varios contextos.

Desse jeito:

const newAxios = axios.create({
	baseURL: 'https://egg.api.com'
})

newAxios.defaults.headers.common['Authorization'] = 'New Axios';

Assim podera consumir duas ou mais APIs com diferentes instâncias do Axios.

Chegamos ao fim e espero que tenha sido útil o conteúdo! 🤟