

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