Evidencia 402

MATERIA: Programación con Framework
FECHA DE ENTREGA: 13/05/2020

REPORTE: Evidencia 402
EQUIPO: 8
GRUPO: A
Alumno1: (Merary Zarai López López)
Librería AXIOS los métodos (POST, PUT, DELETE) con el

framework LARAVEL.
Las funciones 'OkCallback' y 'ErrorCallback' serían las funciones de nuestro código

para gestionar el resultado de la petición.
Usando Axios, este mismo ejemplo quedaría de la siguiente forma.
CONSUMIR UN API REST CON AXIOS

Vamos a ver cómo usar Axios para acceder a un API Rest de forma sencilla.
Emplearemos nuestro API Rest de ejemplo en Node y Express, que configuramos
en esta entrada.
EQUIPO: 8
GRUPO: A
Para ello creamos un fichero llamado 'index.html' con el siguiente contenido.
Por otro lado, creamos un fichero llamado 'main.js', con el siguiente contenido, que
usa Axios para definir funciones que llaman a cada una de las acciones del API Rest.
Ahora, si pulsamos en cada uno de los botones, podemos comprobar en la consola
del navegador que las acciones son llamadas correctamente.
Por otro lado, en la consola de NodeJs comprobamos que, efectivamente, las

acciones están siendo invocadas.
EQUIPO: 8
GRUPO: A
Desarrollo:
Teniendo en cuenta los correos ya registrados en la tabla users de nuestra base de
datos.
Esto se logra utilizando AJAX para una comunicación interactiva con la base de
datos.
EQUIPO: 8
GRUPO: A
Y el ASP (AJAX Server Page).
El desarrollo de este ejercicio permitió utilizarlo también en el proyecto del equipo

obteniendo un mayor aprendizaje del mismo.[1]
EQUIPO: 8
GRUPO: A
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 satisfactoria
StatusCode 200 la recibiremos en THEN, de otra forma el código y el mensaje del
error lo recibiremos en la callback del CATCH.
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:
EQUIPO: 8
GRUPO: A
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.[2]
Para terminar, les dejo las formas más simples de realizar peticiones:
EQUIPO: 8
GRUPO: A
Axios incluye los métodos:
• Get (url): realiza una petición GET a la url pasada como parámetro que
supondrá una consulta SELECT a la base de datos
• post (url, objeto): realiza una petición POST a la url pasada como parámetro
que posiblemente realizará un INSERT del objeto pasado como segundo
parámetro
• put (url, objeto): realiza una petición PUT a la url pasada como parámetro
que posiblemente realizará un UPDATE sobre el registro indicado en la url
que será actualizado con los datos del objeto pasado como segundo
parámetro
• delete (url): realiza una petición DELETE a la url pasada como parámetro que
supondrá una consulta DELETE a la base de datos para borrar el registro
indicado en la url
Estos métodos devuelven una promesa por lo que al hacer la petición indicaremos
con el método. then la función que se ejecutará cuando responda el servidor si la
petición se resuelve correctamente y con el método. catch la función que se
ejecutará cuando responda el servidor si ocurre algún error.
Lado del servidor
Supondremos que todas las peticiones serán realizadas a un mismo archivo PHP,
y qué este se encargará de ver cuál método se está llamando. Y para efectos
prácticos vamos a imaginar que es una API para gestionar usuarios y ventas.
El código para responder a cada solicitud queda como se ve a continuación.
Simplemente leemos cuál es el método de petición, dependiendo de ello evaluamos
la ruta, y respondemos. Este es un método que, aunque sirve, es un poco difícil de
mantener.
Sin embargo, esto sólo es ilustrativo para no confundir al lector. Si queremos algo
más robusto para manejar las rutas en PHP, podemos leer este post.
EQUIPO: 8
GRUPO: A
Obviamente en lugar de un echo, llamaríamos a una función, una función de un

controlador, conectaríamos a la base de datos o cualquier cosa.
JSON para comunicarse
Estamos utilizando JSON para realizar la comunicación. Prefiero este método a
cualquier otro, ya que podemos mandar un objeto, un objeto con arreglos, un arreglo
de objetos, etcétera (cualquiera cosa que esté en formato JSON) y después, al
decodificarlo del lado del servidor, conservará su estructura, así como los tipos de
datos: los strings serán strings, los flotantes flotantes, y lo mismo para los booleanos
y enteros.
Es por ello que con PHP utilizamos json_decode para decodificar los datos. Y luego,
cuando respondemos, hacemos un json_decode. Así, respondemos y recibimos en
el mismo formato.
Ejecutando aplicación
Sólo fueron dos peticiones, pero al ejecutar el código pasa esto:
Lo que comprueba que realmente se están recibiendo los datos es la segunda

impresión en la consola. Ya que dice que guardamos al usuario Luis, y ese nombre
lo estamos recibiendo en PHP e imprimiéndolo para regresarlo.
Peticiones
En el ejemplo sólo llamé al método POST y GET. Como pudimos ver, con POST
accedemos a los datos desde la variable obtenida de php://input.
Lo mismo podemos hacer con PUT, recordemos que los datos viajarán en el cuerpo,
no en la URL. Aunque sí podemos poner algo como un id en la dirección.
EQUIPO: 8
GRUPO: A
Finalmente, quiero aclarar que en PHP podemos hacer un echo igualmente de un

objeto o arreglo, no debemos limitarnos a una cadena. Y tampoco debemos
limitarnos a un “echo”. Podemos hacer un printf o cualquier cosa que imprima datos.
O igualmente podemos no imprimir nada.[3]
Usar Axios. Llegamos a la parte práctica de este artículo, donde verás cómo usar
Axios para hacer algunas tareas de acceso a recursos Ajax desde el navegador.
Para trabajar con Axios usamos el API de promesas. Esto quiere decir que, cuando
se reciba la respuesta del servidor se ejecutará una función callback configurada en
"then" y cuando se produzca un error (por ejemplo, una respuesta con status 404
de recurso no encontrado) se ejecutará la función callback definida por el "catch".
Pero antes vamos a ver cómo instalar Axios en un proyecto.
Instalar Axios
Para comenzar a usar esta librería lo más sencillo sería disponer de ella a través de
su CDN.
No obstante, podemos instalarla también vía npm o Bower, e integrarla en el sitio o

aplicación web por medio de nuestro sistema de builds preferido.
Una vez instalada en el navegador, disponemos de un objeto llamado "axios", el

cual tiene un API de métodos para realizar las operaciones HTTP comunes, GET,
POST…
Ejemplos de trabajo con Axios
Ahora veamos pequeñas piezas de código que ilustran el uso de Axios, para realizar
tareas muy elementales, pero que pueden darte un puntapié inicial en tu
aprendizaje.
EQUIPO: 8
GRUPO: A
Vamos a ver varios ejemplos de uso de Axios pensado para el navegador. En líneas
generales realizaremos la solicitud Ajax e implementaremos el típico
comportamiento:
• Según se produzca la solicitud queremos mostrar un mensaje de

"cargando…"
• Una vez tengamos respuesta, queremos mostrar el contenido obtenido, o el
resultado de la operación, o un hipotético error.
• Cuando termine la solicitud y se haya obtenido la respuesta, tanto en el caso
positivo como el negativo, queremos quitar de la página el mensaje
"cargando…"
Usaremos una serie de etiquetas en el HTML, botones y elementos donde mostrar

la salida. Estos son los mismos para los tres ejemplos que vas a ver a continuación.
El mensaje de "cargando" está inicialmente oculto gracias a este CSS:
Ejemplo de acceso Ajax para recuperar un texto plano
En este sencillo ejemplo vamos a realizar una solicitud contra nuestro propio
servidor, para recuperar el contenido de un archivo de texto. Es la solicitud más
básica que podemos realizar.
EQUIPO: 8
GRUPO: A
La parte más interesante, e importante para este ejemplo, la tienes en la llamada al

método axios.get ().
Como primer parámetro le indicamos el recurso que queremos acceder (será un

archivo llamado texto.txt que se encontrará en la misma carpeta de este ejemplo),
seguido de un objeto de configuración. En ese objeto podemos enviar muchas cosas
para configurar la solicitud, como parámetros, el tiempo de respuesta antes de dar
un timeout, credenciales para autorización, el tamaño de la respuesta máximo
admitido, el uso de un proxy, etc. En nuestro caso simplemente le indicamos que la
respuesta esperada es de tipo texto, con responseType: 'text'.
El método axios.get () devuelve una promesa. Por lo tanto, a continuación,

encuentras la definición de los comportamientos para el caso positivo y para el caso
de error. La función definida como "then" recibe un objeto de respuesta, en caso
que todo haya ido bien. La función definida para el "catch" recibe el mensaje de
error, en caso que algo haya fallado. El último "then" que encuentras detrás del
"catch" sirve para escribir código que se ejecutará tanto en el caso positivo como el
caso negativo.[4]
EQUIPO: 8
GRUPO: A
Axios es un cliente HTTP basado en promesas que funciona tanto en el cliente

(navegador) como en el servidor (por ejemplo, Node.js). Muchos frameworks tienen
sus propias APIs HTTP integradas, sin embargo, muchas veces usar dichas APIs
no es lo más ideal ya que esta función puede ser cubierta de forma más eficiente
por librerías de terceros, como Axios. Es muy simple utilizar Axios ya sea sólo o con
algún framework y en este tutorial aprenderemos a hacerlo.
Instalación
Lo primero que tenemos que hacer es instalar Axios en nuestro proyecto. Desde la
terminal ejecutamos:
Para efectos de este tutorial estaremos usando Axios junto con Vue.js, sin embargo,
la sintaxis y métodos de Axios son los mismos para integrarse en prácticamente
cualquier proyecto. Es por ello que, aunque no estés utilizando Vue.js los ejemplos
te servirán para obtener una idea del funcionamiento de esta librería.
Si no estás utilizando npm puedes incluirlo directamente desde el CDN agregando
la siguiente etiqueta a tu HTML:
Primeros pasos
Luego de instalar Axios en nuestro proyecto debemos importarlo:
EQUIPO: 8
GRUPO: A
Hecho esto, podemos utilizar Axios en nuestro proyecto. Vamos a comenzar

realizando una sencilla solicitud GET:
Para realizar una solicitud GET llamamos al método get de Axios, pasando como
parámetro la URL que deseamos solicitar. Luego de esto llamamos a los métodos
then y catch, que se encargan de capturar la respuesta del servidor, así como los
errores, en caso de que llegue a ocurrir alguno.
Supongamos que en la URL users tenemos un listado de usuarios que queremos
obtener y almacenar dentro de un arreglo que previamente declaramos en data:
Observa cómo obtenemos los datos de la respuesta con response.data. También

podemos pasar parámetros a la solicitud. Supongamos que queremos obtener un
usuario con un nombre en específico:
EQUIPO: 8
GRUPO: A
Los parámetros GET también pueden ser pasados directamente desde la URL:
O puedes asignar un objeto con los parámetros:
Con Axios también podemos realizar solicitudes de tipo POST. Para ello, debemos
usar el método post, pasando la URL y los datos que deseamos enviar al servidor.
Supongamos que tenemos un método llamado sendUserData desde donde
enviamos los datos de los usuarios:
EQUIPO: 8
GRUPO: A
Observa cómo de segundo parámetro en el método post pasamos un objeto con los
datos que deseamos enviar al servidor.
Axios soporta múltiples métodos para realizar diferentes solicitudes:
• axios.request()
• axios.get()
• axios.delete()
• axios.post()
• axios.put()
EQUIPO: 8
GRUPO: A
CONCLUSION
Hacer peticiones mediante axios nos ahorra algunas líneas de código además de
proporcionarnos características útiles como los interceptors. No te olvides de revisar
la documentación de axios para conocer más detalles Axios Docs.
Axios es una buena alternativa para considerar sobre todo en aplicaciones o
componentes donde requieras el acceso a recursos de un API REST. Con un peso
de la librería más que ajustado, creemos que merece la pena usarla, si es que no
tenemos en nuestra aplicación otro cliente HTTP disponible.
Agrega mucho valor gracias a una cantidad enorme de opciones de configuración
de las solicitudes, que te pondrán muy fácil atender las demandas del API con la
que te estés conectando. Además, recibe las respuestas de una manera también
fácil de procesar. Es una buena alternativa al API de Fetch + polyfills, por ser más
sencilla de utilizar.
Además, recibe las respuestas de una manera también fácil de procesar sobre todo
en las solicitudes HTTP.
EQUIPO: 8
GRUPO: A
BIBLIOGRAFIAS
[1] parzibyte, «Axios y PHP: ejemplos de peticiones AJAX,» parzibyte, 12 Marzo 2018. [En línea].
Available: https://parzibyte.me/blog/2018/03/12/axios-php-ejemplo-peticiones-ajax/. [Último
acceso: 13 Mayo 2020].
[2] L. Llamas, «Como consumir una API REST con la libreria de AXIOS,» luisllamas, 28 Mayo 2019.
[En línea]. Available: https://www.luisllamas.es/como-consumir-un-api-rest-con-la-libreria-de-
javascript-axios/. [Último acceso: 13 13 2020].
[3] M. A. Alvarez, «Librería Axios: cliente HTTP para Javascript,» desarrolloweb, 14 Septiembre
2018. [En línea]. Available: https://desarrolloweb.com/articulos/axios-ajax-cliente-http-
javascript.html. [Último acceso: 13 Mayo 2020].
[4] H. Guerrero, «Axios,» Hoc Labs, 30 Mayo 2017. [En línea]. Available:
https://www.hoclabs.com/2017/05/30/axios-promesas-y-http/. [Último acceso: 13 Mayo
2020].
[5] Juan, «Axios,» GitHub, 08 Junio 2018. [En línea]. Available:

https://github.com/cipfpbatoi/materials/blob/master/daw/dwc/02-vue/04-axios.md. [Último
acceso: 13 Mayo 2020].

Evidencia 402

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Evidencia 402

Cargado por

Copyright:

Formatos disponibles

MATERIA: Programación con Framework

FECHA DE ENTREGA: 13/05/2020

Librería AXIOS los métodos (POST, PUT, DELETE) con el

Las funciones 'OkCallback' y 'ErrorCallback' serían las funciones de nuestro código

Usando Axios, este mismo ejemplo quedaría de la siguiente forma.

CONSUMIR UN API REST CON AXIOS

Para ello creamos un fichero llamado 'index.html' con el siguiente contenido.

Por otro lado, en la consola de NodeJs comprobamos que, efectivamente, las

Y el ASP (AJAX Server Page).

El desarrollo de este ejercicio permitió utilizarlo también en el proyecto del equipo

Por supuesto que no es necesario imprimir todo el objeto y los atributos de la

Axios incluye los métodos:

Obviamente en lugar de un echo, llamaríamos a una función, una función de un

Lo que comprueba que realmente se están recibiendo los datos es la segunda

Finalmente, quiero aclarar que en PHP podemos hacer un echo igualmente de un

No obstante, podemos instalarla también vía npm o Bower, e integrarla en el sitio o

Una vez instalada en el navegador, disponemos de un objeto llamado "axios", el

• Según se produzca la solicitud queremos mostrar un mensaje de

Usaremos una serie de etiquetas en el HTML, botones y elementos donde mostrar

El mensaje de "cargando" está inicialmente oculto gracias a este CSS:

Ejemplo de acceso Ajax para recuperar un texto plano

La parte más interesante, e importante para este ejemplo, la tienes en la llamada al

Como primer parámetro le indicamos el recurso que queremos acceder (será un

El método axios.get () devuelve una promesa. Por lo tanto, a continuación,

Axios es un cliente HTTP basado en promesas que funciona tanto en el cliente

Hecho esto, podemos utilizar Axios en nuestro proyecto. Vamos a comenzar

Observa cómo obtenemos los datos de la respuesta con response.data. También

O puedes asignar un objeto con los parámetros:

[5] Juan, «Axios,» GitHub, 08 Junio 2018. [En línea]. Available:

También podría gustarte