Axios.js una librería de promesas

Axios JS hoy en dia tiene un aporte muy importante en el desarrollo de aplicaciones web, pues permite gestionar la data entre el backend y el frontend, optimizando algunos aspectos funcionales de envio y recepción mediante el protocolo http y/o https, lo que conlleva a elevar la perfomance de nuestra aplicación web.

Indice

• Qué es AXIOS JS
• Cómo usarla mediante un CDN
• Ejemplo básico en una página web
  • Ejemplo con una petición GET
  • Ejemplo conuna petición POST
  • Ejemplo completo
• Ejemplo práctico Axios con PHP 8.* y MySQL
  • Introducción al proyecto
  • Maquetación Html - interfaz
  • Programación de la Interactividad con JS
  • Implementación de la conexión a la BD MYSQL
  • Lógica para generar una respuesta JSON
  • Testing es decir pruebitas
• Ejemplos práctico con ReactJS 18 ( ...pronto)

¿Qué es Axios.js?

Axios es un cliente HTTP basado en Promesas para Javascript, el cual puede ser utilizado tanto en tu aplicación Front-end, como en el Back-end con Nodejs. Utilizando Axios, es muy sencillo enviar peticiones a endpoints REST y realizar operaciones CRUD. Además, Axios puede ser utilizada desde una aplicación desarrollada con Javascript plano, al igual que utilizando un Framework como Vuejs. Para visualizar una lista completa con las caracteristicas de Axios, pueden visitar su página en Github, aunque aquí les menciono las que en mi opinión son las más importantes.

• Realizar peticiones XMLHttpRequest (Ajax) desde el navegador de una manera sencilla.
• Realizar peticiones HTTP desde Nodejs.
• Soporta el API de Promesas.
• Intercepta peticiones y respuestas.
• Transforma la información de las peticiones y respuestas.
• Cancela peticiones.
• Transforma automáticamente la información en formato JSON.
• Soporta protección del lado del cliente contra ataques CSRF (Cross-site request forgery).

¿Cómo integrarla en una página web utilizando un CDN?

Usando npm:

$ npm install axios

Usando CDN jsDelivr:

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

Usando CDN unpkg:

La manera más sencilla de incluir axios es utilizando un Content Delivery Network, por ejemplo, incluyendo la siguiente etiqueta script en tu archivo index.html:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Estas funciones cuentan con un sencillo código javascript, donde sólo cabe mencionar la sección de Axios:

# Get request 

axios.get(url)

 

# Get request with params 

axios.get(url, params)

 

# Post request

axios.post(url, params)

Axios en cada petición nos devuelve una promesa, la cual debemos manipular haciendo uso de los métodos .then/.catch para capturar la respuesta y los errores respectivamente.

Ejemplo práctico de Axios JS en una página web

Ejemplo ejecutado con una petición GET:

const axios = require('axios');

// Hacer una petición para un usuario con ID especifico
axios.get('/user?ID=12345')
  .then(function (response) {
    // manejar respuesta exitosa
    console.log(response);
  })
  .catch(function (error) {
    // manejar error
    console.log(error);
  })
  .finally(function () {
    // siempre sera executado
  });

El mismo ejemplo puede hacerse de otra manera. Veamos:

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // siempre sera ejecutado
  });  

Usando async/await se veria asi:

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Ahora veamos con una petición POST

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Ejemplo completo en una página web

• Creamos un documento index.html
• Agregamos la cdn que contiene axios en el head
• Usando el método post de axios nos conectamos a la API de jsonplaceholder. Puedes explorar la api en su sitio web oficial https://jsonplaceholder.typicode.com/
• Creamos una función para llenar los comentarios en nuestro documento html en el div con el id comentarios

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AXIOS JS DESDE UNA CDN</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <script>
        var comentarioshtml = ''
        axios.post('https://jsonplaceholder.typicode.com/posts')
        .then(function (response) {
            // manejar respuesta exitosa
            console.log(response.data);
            llenarComentarios(response.data)  
        })
        .catch(function (error) {
            // manejar error
            console.log(error);
        })
        .finally(function () {
            // siempre sera executado
        });


        function llenarComentarios(data){
            data.forEach(element => {
                console.log(element.title)
                comentarioshtml += `<div>${element.title}</div>`
            });
            comentarios.innerHTML = comentarioshtml
        }
    </script>
    <div id="comentarios"></div>
</body>
</html>

Ejemplo práctico con PHP y MySql

Introducción al proyecto

Contextualmente se trata de una aplicación bastante básica donde integramos la libreria de Axios JS con PHP y Mysql, el objeto es obtener la capital de los paises.

Herramientas que usamos : Servidor local XAMPP, Navegador Web, Visual Studio Code sobre Windows 10

Base de datos

 MySql.- Base de datos apptiva con la tabla countries con 3 campos (id,name,capital)

CREATE TABLE `countries` (
  `id` int(255) NOT NULL,
  `name` varchar(255) NOT NULL,
  `capital` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

INSERT INTO `countries` (`id`, `name`, `capital`) VALUES
(1, 'Bangladesh', 'Dhaka'),
(2, 'Belgium', 'Brussels'),
(3, 'Burkina Faso', 'Ouagadougou'),
(4, 'Bulgaria', 'Sofia'),
(5, 'Bosnia and Herzegovina', 'Sarajevo'),
(6, 'Barbados', 'Bridgetown'),
(7, 'Wallis and Futuna', 'Mata Utu'),
(8, 'Saint Barthelemy', 'Gustavia'),
(9, 'Bermuda', 'Hamilton'),
(10, 'Brunei', 'Bandar Seri Begawan');

ALTER TABLE `countries`
  ADD PRIMARY KEY (`id`);

ALTER TABLE `countries`
  MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=251;
COMMIT;

Maquetación Html - interfaz

 index.html

 styles.css

.buscador{
    margin: 0 auto;
    width: 400px;
    text-align: center;
}
#divResult{
    text-align: start;
}

Programación de la Interactividad con JS

 app.js

Implementación de la conexión a la BD MYSQL

 conexion.php

Lógica para generar una respuesta JSON

 json.php

Testing es decir pruebitas

Se hacen las pruebas necesarias