# Uso de Axios

## ¿Que es Axios?

**Axios** es un cliente HTTP simple basado en promesas para el navegador y node.js. Axios proporciona una biblioteca fácil de usar en un paquete pequeño con una interfaz muy extensible.

### Ejemplo de uso

Un ejemplo básico de implemtación es el siguiente.

import axios from "axios";

axios.get('/users').then(response => {
    console.log(response.data);
});

Pero no es 100% recomendable utilizar asi de directo.

## Recomendaciones o buenas práticas

### Instancias por Artefactos

Si concideramos el siguente ejemplo, tenemos un Frontend (Artefacto A) que consume informacion de un Backend For Frontend (Artefacto B) y es una API Externa (Artefacto C).

sequenceDiagram
participant ARTF_A as Artefacto A
participant ARTF_B as Artefacto B
participant ARTF_C as Artefacto C

ARTF_A ->>+ ARTF_B: [GET] request
ARTF_B -->>- ARTF_A: respose

ARTF_A ->>+ ARTF_C: [POST] request
ARTF_C -->>- ARTF_A: respose

Seria muy tentado aplicar el codigo de ejemplo de arriba pero es más recomiendable crear una instancia por cada artefacto a conectar, de esta forma cada instancia puede tener su propia configuración, como por ejemplo:

import axios from "axios";

// DECLARATION OF AXIOS INSTANCES
const artefactoBInstance = axios.create({
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    }
})

const artefactoCInstance = axios.create({
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: 'Bearer 7d1df2c6-be67-4216-a122-2b65ed2ecadc'
    }
})

// IMPLEMENTATION OF SERVICES
artefactoBInstance.get('/users').then(response => {
    console.log(response.data);
});

artefactoCInstance.post('/posts').then(response => {
    console.log(response.data);
});

De esta forma es posible crear configuraciones totalmente independientes por cada artefacto o proveedor de información.

### Uso de intercaptores

Continuando con último código de ejemplo presentado, planteo los siguientes casos.

#### Caso 1

Es necesario cargar un `Authorization` dinámico por cada request. No entraremos muy en detalle de como se genera el nuevo `accessToken` pero lo dejaremos en responsabilidad de un metodo asincrono lladado `getNewAccessToken`.

artefactoAInstance.interceptors.request.use(
    async (config) => {
        const accessToken = await getNewAccessToken();
        config.headers['Authorization'] = `Bearer ${accessToken}`;
        return config;
    },
    (error) => {
        Promise.reject(error);
    },
);

#### Caso 2

Es necesario programar un reintento por cada request fallido.

const IS_RETRIED_ATTRIBUTE = '_isRetrid';

artefactoBInstance.interceptors.response.use(
    (response) => {
        return response;
    },
    async (error) => {
        const originalRequest = error.config;
        if(!originalRequest[IS_RETRIED_ATTRIBUTE]) {
            originalRequest[IS_RETRIED_ATTRIBUTE] = true;
            return artefactoBInstance(originalRequest);
        }
        return Promise.reject(error);
    }
);