Bienvenidos de nuevo a otro publicación más de la serie AJAX, en esta ocasión explicaré un poco sobre una librería muy conocida para realizar peticiones AJAX : AxiosJS. Esta librería es una buena alternativa al objeto $.ajax de jQuery, así como también al objeto XMLHttpRequest nativo de Javascript.
¿Qué es Axios.js?
De acuerdo a la documentación oficial Axios.js es un cliente HTTP basado en promesas que puede ser usado tanto en el navegador así como también con Node. Para esta práctica nos enfocaremos solo en el navegador.
Definición de un objeto Axios
Como pueden observar en el ejemplo siguiente necesitamos incluir la librería en primer lugar, después debemos definir una serie de atributos, cuando menos la URL, si omitimos el método este será de tipo GET por defecto. De acuerdo a la API de promesas Javascript si la callback es satisifactoria StatusCode 200 la recibiremos en THEN, de otra forma el código y el mensaje del error lo recibiremos en la callback del CATCH.
<script src="https://unpkg.com/axios@0.16.1/dist/axios.min.js"></script>
<script>
axios({
url: 'api.php', //Endpoint
method: 'GET', //Método
timeout: 3000, //Tiempo máximo de espera
responseType: 'JSON', //Tipo de respuesta (Por defecto es JSON)
}).then(function (response) {
//Si todo OK te imprime la respuesta
console.log(response.data); //Datos de la respuesta
console.log(response.status); //Estatus
console.log(response.statusText); //Mensaje del estatus
console.log(response.headers); // Encabezados
}).catch(function (error) {
//Si hay error el catch lo imprime
console.log(error.response); //Objeto respuesta
console.log(error.response.data); // Respuesta del servidor
console.log(error.response.status); //Código de error
console.log(error.response.statusText); //Mensaje del error
});
</script>
Por supuesto que no es necesario imprimir todo el objeto y los atributos de la respuesta, pero al momento de debuggear bien nos sirve saber todo lo que nuestro objeto cliente recibe.
Ahora realizaremos un ejemplo enviando datos mediante POST, a diferencia de GET es necesario que procesemos los datos a enviar.
Para este ejemplo nos ayudaremos del objeto FormData como se muestra:
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios({
url: 'data.php',
method: 'POST',
data: data
}).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.log(error.response.statusText);
});
Axios es un cliente RESTful, podemos también enviar peticiones con los métodos PUT, PATCH y DELETE, aunque nos exige procesar los datos a enviar para los métodos POST, PUT y PATCH. Aparte del objeto FormData también podemos parsear a Buffer, ArrayBuffer y Stream, el mismo objeto nos provee un método llamador transformRequest en el cuál debemos hacer el parseo si es que no los preparamos fuera de él.
Para terminar les dejo las formas más simples de realizar peticiones:
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
let data = new FormData();
data.append('nombre', 'John');
data.append('apellido', 'Die');
axios.post('data.php', data)
.then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
Este artículo está pensado para todos aquellos que ya conocen o han usado AJAX, y aquí sólo hemos visto la configuración más básica, pero Axios nos permite realizar una mayor configuración como definir los headers y parámetros de autenticación, transformar los formatos de respuesta, métodos abreviados de verbos REST, además de permitirnos realizar múltiples promesas en cola como mostraré en la segunda parte.
Como siempre puedes encontrar este ejercicio en el repo del blog: https://github.com/eichgi/blog-hoclabs, si tienes alguna duda o aclaración siéntete libre de escribir un comentario!
