No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Axios: librerías de JavaScript para consumir APIs

17/20
Recursos

Aportes 32

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 😃

Para Agosto 2022 la sintaxis de declaración de axios es:

const api = axios.create({
	baseURL: 'https://api.thecatapi.com/v1',
	headers: {'X-API-KEY': 'YOUR-KEY'}
}); 

No supero jaja: HUBO UN ERROR: SUCCESS.
jajajaja. BIEN ESPECÍFICO EL ERROR JAJA

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

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();

Task failed successfully!

que facil esta usar la libreria de axios

Normalmente no recomiendo canales pero, éste video sobre Axios, complementará su aprendizaje de ésta clase:

Julio 2022, esta es la nueva forma de introducir por defecto nuestra API-KEY:

const api = axios.create({
	baseURL: 'https://api.thecatapi.com/v1',
	headers: {'X-API-KEY': 'YOUR_API_KEY_HERE'}
});

Nota:
El 1 de febrero de 2022, el equipo central de Node.js fusionó una solicitud de extracción y agregó la API Fetch a Node.

"Axios es amor"
xd

Ahora un poema “Hubo un error: SUCCES”

Lo que aprendi con este profe no tiene nombre!!! Solo me queda darle las gracias por siempre.

cada clase te hace dar cuenta de lo mucho que falta por aprender

Algo interesante es que la respuesta de Axios no tiene la propiedad “ok” como si la tiene fetch. Es una lástima, porque es muy útil para hacer comprobaciones

En esta captura la primera petición está hecha con fetch y la segunda con axios.
Código:

;(async function testFunc() {
    const res = await fetch(
        "https://api.thecatapi.com/v1/images/search?limit=3&mime_types=jpg")

    const res2 = await API.get( "https://api.thecatapi.com/v1/images/search?limit=3&mime_types=jpg")

    log(res, res2)
})()

Script para Axios:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Al pasar de fetch a Axios me quedo así, solo falta manejar los errores:
html

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>API Gatos</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>
    <h1>Api Gatos</h1>
    <span id="error"></span>
    <section id="GatosRandom">

        <h2>Gatos aleatorios</h2>
        <article>
            <img alt="foto gato aleatorio" id="img-gato1">
            <button class="BotonFav">Guardar Gato en favoritos</button>
        </article>
        <article>
            <img alt="foto gato aleatorio" id="img-gato2">
            <button class="BotonFav">Guardar Gato en favoritos</button>
        </article>
        <button id="recargar">Recargar</button>
    </section>
    <section id="uploadGato">
        <h2>Sube la foto de tu gato</h2>
        <form id="uploadingForm">
            <input id="file" type="file" name="file">
            <button type="button" id="uploadButton">Subir gato</button>
        </form>
    </section>
    <section id="GatosFavoritos">
        <h2>Gatos favoritos</h2>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src='main.js'></script>
</body>

</html>

Js

const API_KEY = 'tu-api-key'
const spanError = document.getElementById('error')
const saveButtons = document.getElementsByClassName('BotonFav')
const api = axios.create({
    baseURL: 'https://api.thecatapi.com/v1',
})
api.defaults.headers.common['x-api-key'] = API_KEY;
const HTTPCodes = {
    200: 'OK',
    201: 'CREATED',
    400: 'BAD REQUEST',
    401: 'UNAUTHORIZED',
    403: 'FORBIDDEN',
    404: 'NOT FOUND',
    500: 'INTERNAL SERVER ERROR',
    503: 'SERVICE UNAVAILABLE',
    504: 'GATEWAY TIMEOUT',
}

const loadRandomCats = async () => {
    const { data, status } = await api.get('/images/search', {
        params: {
            limit: 2,
            page: 2
        }
    })
    if (status === 200) {
        const img1 = document.getElementById('img-gato1')
        const img2 = document.getElementById('img-gato2')
        img1.src = data[0].url
        img2.src = data[1].url
        img1.className = ""
        img2.className = ""
        img1.classList.add(data[0].id)
        img2.classList.add(data[1].id)
    } else {
        spanError.innerHTML = "hubo error al cargar la API"
    }
}
const loadFavoritesCats = async () => {
    document.getElementById('GatosFavoritos').innerHTML = ""
    const { data, status } = await api.get('/favourites')
    if (status === 200) {
        const FavoritesCats = document.getElementById('GatosFavoritos')
        data.forEach((element) => {
            let article = document.createElement('article')
            let image = document.createElement('img')
            image.alt = "foto gato favorito"
            image.className = element.id
            image.src = element.image.url
            let button = document.createElement('button')
            button.innerText = "Eliminar Gato de favoritos"
            button.className = "EliminarFav"
            article.appendChild(image)
            article.appendChild(button)
            FavoritesCats.appendChild(article)
        })
        const removeButtons = document.getElementsByClassName('EliminarFav')
        for (let i = 0; i < removeButtons.length; i++) {
            removeButtons[i].addEventListener('click', removeFavoritesCats)
        }
    } else {
        spanError.innerHTML = HTTPCodes[res.status]
    }
}

const saveFavoritesCats = async (e) => {
    let article = e.target.parentNode
    let id = article.firstElementChild.className
    const { data, status } = await api.post('/favourites', {
        image_id: id
    })
    loadFavoritesCats()
    loadRandomCats()
}
const removeFavoritesCats = async (e) => {
    const article = e.target.parentNode
    let id = article.firstElementChild.className
    const { data, status } = await api.delete(`/favourites/${id}`)
    loadFavoritesCats()
}
const uploadGatoPhoto = async () => {
    const form = document.getElementById('uploadingForm')
    const formData = new FormData(form)//recibe form como atributo por lo que recibe todos los valores de los input
    //console.log(formData.get('file'))
    const { data, status } = await api.post('/images/upload', formData)
    if (status === 201) {
        let id = data.id
        let { data2, status2 } = await api.post('/favourites', {
            image_id: id
        })
        loadFavoritesCats()
    } else {
        spanError.innerHTML = HTTPCodes[res.status]
    }
}
document.getElementById('recargar').addEventListener('click', loadRandomCats)
document.addEventListener('DOMContentLoaded', loadRandomCats)
document.addEventListener('DOMContentLoaded', loadFavoritesCats)
document.getElementById('uploadButton').addEventListener('click', uploadGatoPhoto)
for (let i = 0; i < saveButtons.length; i++) {
    saveButtons[i].addEventListener('click', saveFavoritesCats)
}

Css

img {
    background-size: cover;
    width: 150px;
    height: 150px;
}

Lo bueno que todo el curso se uso fetch, pero se uso siempre async/await…veo los comentarios y sus preguntas técnicas preguntaron por la sintaxis de promesas.😅 Con fe.

Por otra parte, nunca había visto axios hasta esta clase, una maravilla, ya veo porque lo el prof lo valora mucho.

mi primer resulado de Axios fue esta clase 😂 y el video siguió donde me habia quedado, con Juan diciendo “ese seguramente esta mas que perfecto” 😆

Minuto 1:29
Juan menciono a la Argentina 😱😱
18/12/2022
Elijo creer 🙏🙏🙏

La verdad que sí ahorra bastante código. Voy a probar axios por mi cuenta.

Axios me parecio impresionante, como puede solucionar el tema del fetch de una manera increible mas facil de entender y mas legible,

Buenísimo el contenido y la explicación del profesor hasta el momento.

Axios god, para nosotros los flojos sera el cielo xD

En mi caso me apareció el error: " Uncaught ReferenceError: axios is not defined ".
Entiendo que es un error en la instalación de la libreriía pero al llamar a axios en la consola sí me aparecía.

En resumen, se soluciona colocando el script de axios (como dice el profe) antes del script del main.js. Yo lo había colocado después, al final del HTML.

No sabía que se podía crear una instancia de axios y poner valores por default, lo había estado usando mal, excelente clase, me gusta que no te saltes los errores de consola, es más, si lo haces adrede se me hace una excelente aportación.

La herramienta nativa de node.js es https

const https = require('https');

const options = {
  hostname: 'example.com',
  port: 443,
  path: '/todos',
  method: 'GET',
};

const req = https.request(options, res => {
  console.log(`statusCode: ${res.statusCode}`);

  res.on('data', d => {
    process.stdout.write(d);
  });
});

req.on('error', error => {
  console.error(error);
});

req.end();

Conocer Axios es lo mejor que me ha pasado en este curso! :´)