Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Axios: librerías de JavaScript para consumir APIs

17/20
Recursos

Aportes 5

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Como comentario al margen.

He escuchado a muchos TechGurus y Devs reconocidos hablar de cómo les toca evaluar entrevistas técnicas y como los aspirantes no saben hacer una petición a una API sin Axios. Instalan una dependencia para un fetch sencillo y cuando los cuestionan sobre la función nativa fetch no la saben.

Algo ha tener en cuenta.

Actualmente la API de fetch ya está disponible en Node.js a partir de la v17 🤭

Can I use Fetch in Node.js now?

Fetch is already available as an experimental feature in Node v17. If you’re interested in trying it out before the main release, you’ll need to first download and upgrade your Node.js version to 17.5.

Acá pueden leer más sobre ello: The Fetch API is finally coming to Node.js

Debo admitir la evolución del profesor a lo largo de todos los cursos que el presenta, ha mejorado bastante 😃

El mismo proyecto anterior pero con la biblioteca axios:
.
HTML

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Consumo de APIs</title>

    <!-- Utilizando el CDN de la biblioteca Axios -->
    <script defer src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script defer src="./app.js"></script>

    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-bottom: 48px;
        }
        img {
            display: block;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .random-img {
            width: 400px;
            height: auto;
        }
        button {
            margin: 16px 0;
        }
        .random-cats-sec,
        .favorites-cats-sec {
            padding: 25px 25px;
            border: solid 1px black;
            border-radius: 25px;
        }
        .error-app {
            color: red;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>Gatos App</h1>

        <span class="error-app" id="error"></span>

        <section class="random-cats-sec" id="random-cats">
            <h2>Gatos Aleatorios</h2>
        </section>
        <button id="reload">Recargar</button>

        <section class="favorites-cats-sec" id="favorites-cats">
            <h2>Gatos Favoritos</h2>
        </section>

    </div>
</body>

</html>

.
JS

// El mismo proyecto de API Rest pero usando Axios

const API_KEY = 'tuapikey'-tuapikey-tuapikey;

// Creando una instancia de axios para reutilizarla
const api = axios.create({
    baseURL: 'https://api.thecatapi.com/v1/',
    headers: { 'X-API-KEY': API_KEY },
});

const URL_RANDOM_RES = '/images/search?limit=2';
const URL_FAVORITES_RES = '/favourites';

const randomCats = document.querySelector('#random-cats');
const favoritesCats = document.querySelector('#favorites-cats');
const buttonReload = document.querySelector('#reload');
const errorNode = document.querySelector('#error');

// Función para adicionar imagen a una sección
function addImageNode({nodeSection, imageId, imageUrl, attId, buttonText}) {
    const article = document.createElement('article');
    const img = document.createElement('img');
    const button = document.createElement('button');
    img.className = 'random-img';
    img.setAttribute(attId, imageId);
    img.src = imageUrl;
    const btnText = document.createTextNode(buttonText);
    button.appendChild(btnText);
    article.appendChild(img);
    article.appendChild(button);
    nodeSection.appendChild(article);
}

// Cargando imágenes aleatorias
async function loadRandomCats() {
    try {
        const { data, status } = await api.get(URL_RANDOM_RES);
        if (status !== 200) throw new Error(`Error de petición HTTP en Random: ${status}`);
        data.forEach(el => {
            addImageNode({
                nodeSection: randomCats,
                imageId: el.id,
                imageUrl: el.url,
                attId: 'data-imageid',
                buttonText: 'Guardar Favorito',
            });
        });
    } catch (error) {
        errorNode.innerText = `Error: ${error.message}`;
    }
};

// Cargando imágenes de favoritos
async function loadFavoritesCats() {
    try {
        const { data, status } = await api.get(URL_FAVORITES_RES);
        if (status !== 200) throw new Error(`Error de petición HTTP en Favoritos: ${status}`);
        data.forEach(el => {
            addImageNode({
                nodeSection: favoritesCats,
                imageId: el.id, // no es id de la imagen sino id de favorito
                imageUrl: el.image.url,
                attId: 'data-id',
                buttonText: 'Eliminar Favorito',
            });
        });
    } catch (error) {
        errorNode.innerText = `Error: ${error.message}`;
    }
};

// Salvando imagenes a favoritos
async function saveFavoritesCat(id) {
    try {
        // Llamamos al objeto axios con método que necesitamos, en este caso POST
        // response = { data, status }
        const { data, status } = await api.post(URL_FAVORITES_RES, {
            // Pasamos los parámetros o querystring
            image_id: id,
        });
        if (status !== 200) throw new Error(`Error de petición POST HTTP en Favoritos: ${status}`);
        return data.id;
    } catch (error) {
        errorNode.innerText = `Error: ${error.message}`;
    }
};

// Eliminando imágenes de favoritos
async function deleteFavoritesCat(id) {
    try {
        const { status } = await api.delete(`${URL_FAVORITES_RES}/${id}`);
        if (status !== 200) throw new Error(`Error de petición DELETE HTTP en Favoritos: ${status}`);
    } catch (error) {
        errorNode.innerText = `Error: ${error.message}`;
    }
}

// Evento recargar imagenes random
buttonReload.addEventListener('click', () => {
    while (randomCats.lastChild.nodeName === 'ARTICLE') {
        randomCats.lastChild.remove();
    }
    loadRandomCats();
});

// Evento guardar imagen en favorito
randomCats.addEventListener('click', (e) => {
    const target = e.target;
    if (target && target.nodeName === 'BUTTON') {
        const img = target.previousSibling;
        const imageId = img.dataset.imageid;
        saveFavoritesCat(imageId).then((id) => {
            alert('Hemos guardado la imagen a favoritos!');
            addImageNode({
                nodeSection: favoritesCats,
                imageId: id, // no es id de la imagen sino id de favorito
                imageUrl: img.src,
                attId: 'data-id',
                buttonText: 'Eliminar Favorito',
            });
        });
    }
});

// Evento eliminar imágenes de favorito
favoritesCats.addEventListener('click', (e) => {
    const target = e.target;
    if (target && target.nodeName === 'BUTTON') {
        const img = target.previousSibling;
        const id = img.dataset.id;
        deleteFavoritesCat(id);
        alert('Hemos eliminado la imagen a favoritos!');
        const parent = target.parentNode;
        if (parent.nodeName === 'ARTICLE') parent.remove();
    }
});

loadRandomCats();

loadFavoritesCats();

Forma de crer instancia de axios actualmente:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

https://axios-http.com/es/docs/instance