Axios 👾
Tags: webdev, javascript, beginners, programming
Published: 2024-04-28 00:00:27

## Intro 

---
### Repositório 
Confira no link o repositório dos códigos do artigo: [https://github.com/MrNullus/learn-axios](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.

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

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

```js
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](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 |>**

```js
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:

```js
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 |>**

```js
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 |>**

```js
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 |>**

```js
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 |>**

```js
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 |>**

```js
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 |>**

```js
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:

```js
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 |>**

```js
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 |>** 

```js
// #> 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:**

```js
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! 🤟