Fetch Axios con Await y Async
Como ya se ha establecido en apartados anteriores "fetch" y "axios" son los dos mejores métodos para trabajar con las peticiones actualmente, sin embargo por optimizados que se encuentran estos elementos es necesario añadir una capa asíncrona extra para que estos puedan realizar todas las funciones sin generar ningún error o conflicto.
Esta capa asíncrona se realiza con "await" y "async", esto debido a que permite definir las funciones como asíncronas así como también indicar el flujo de ejecución de los bloques de código, es decir qué elementos deben esperar por el resultado de la petición.
Para este apartado se parte del siguiente ejemplo de código, en el cual se define una petición "fetch" dentro de una función, sin embargo pese a que la función está bien estructurada ciertas funcionalidades como "console.log" no se pueden ejecutar debido a que al realizarse el llamado de la función, la cual no es una función asíncrona esta busca ejecutar los comandos inmediatamente sin esperar el resultado de la petición, por lo cual al imprimir el resultado en consola los datos siempre resultarán "undefined".
Nota: Este ejemplo tiene incorporado un ".catch" el cual pertenece a las funciones asíncronas para manejar los errores.
En estos casos se incorpora "await" y "async", para emplear la capa asíncrona sobre la petición y de ese modo los bloques de código que requieran de los datos de esta esperen a la obtención de estos, de ese modo al llamar a la función esta esperará adecuadamente el resultado de la función antes de ejecutarse, por lo que métodos como "console.log" se podrán ejecutar sin problema.
Para incorporar "async" y "await" en una función con la función "fetch", como en el siguiente ejemplo:
Es necesario tener presentes varios aspectos de "await", de "async" y de "fetch".
-
Se define la función como asíncrona, para lo cual se añade la palabra clave "async" delante de esta
-
Se guardan los datos en una variable utilizando el método "await" para acceder a los datos resultantes de la promesa, recordar que "await" permite obtener directamente los datos sin recurrir al uso de ".then( )" (tener en cuenta que con ".then" los datos estarían encapsulados, pero esto no pasa con "await")
-
Debido a que "fetch" retorna una promesa encapsulada se usa "await" para acceder a esta, los datos almacenados en la variable "petición" son la promesa encapsulada.
-
Para acceder a los datos encapsulados dentro de la promesa se utiliza el método ".json()" para convertirla a formato JSON y almacenarlos en la variable "resultado"
De ese modo se puede acceder a los datos retornados desde la petición "fetch" usando "await" y "async" para realizar la función asíncrona.
Resultado
A continuación se muestran dos ejemplos con el mismo resultado, el primero se trata de dos funciones síncronas que utilizan "await" "async" para trabajar con una petición de "fetch", obtener el resultado de esta y luego imprimir en pantalla los datos según el botón que se presione.
Ejemplo con Fetch
Este segundo ejemplo se trata del mismo código, con la misma estructura pero trabajando con una petición de "axios":
Ejemplo con Axios
Nota: Recordar que axios simplifica aún más el código de "fetch", por lo que la variable "petición" se elimina, ya que tanto la petición como la obtención de los datos se realiza en la línea de la variable "resultado", del mismo modo, se ajusta la selección de los datos al usar "innerHTML" ya que "axios" retorna la petición completa, por lo tanto la ruta hasta los datos deseados cambia (resultado.data.edad / resultado.data.nombre).