Axios js es una librería de JavaScript construida con el objetivo de gestionar la programación asíncrona con promesas, en el desarrollo de aplicaciones web
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
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.
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.
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);
}
}
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
<!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>
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
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;
index.html
styles.css
.buscador{
margin: 0 auto;
width: 400px;
text-align: center;
}
#divResult{
text-align: start;
}
app.js
conexion.php
json.php
Se hacen las pruebas necesarias
Publicado el 08 abril 2023 07:50 Leido 1051 veces