CÓMO CONSUMIR UN API con JAVASCRIPT desde la web
Summary
TLDREn este tutorial de YouTube, Carlos Azaústre enseña cómo realizar llamadas a una API desde una aplicación web utilizando JavaScript puro, sin frameworks ni librerías. Explica el proceso paso a paso, desde la creación de una constante para la URL de la API hasta la manipulación del DOM para mostrar los datos. Se compara el uso del objeto XMLHttpRequest con las nuevas funcionalidades introducidas en ES6, como 'fetch', para hacer peticiones asíncronas y manejar respuestas en formato JSON. Además, se muestra cómo integrar la respuesta en el HTML y cómo trabajar con nodos del DOM para una mejor estructura y presentación de la información.
Takeaways
- 😀 Carlos Azaústre es el presentador del canal de YouTube que se centra en tutoriales de JavaScript, programación y React Native.
- 📚 Se invita a los espectadores a suscribirse y activar la notificación para nuevos videos.
- 🔍 El video de hoy trata sobre cómo realizar llamadas o peticiones a una API desde una aplicación web hecha con JavaScript.
- 📈 Se explora el uso de Vanilla JS, es decir, JavaScript sin frameworks ni librerías adicionales.
- 📝 Se menciona el uso de la herramienta 'json-blob-holder' como un ejemplo de una API ficticia para demostrar cómo hacer peticiones.
- 🌐 Se describe cómo se realizaban las peticiones antes de la aparición de ECMAScript 6 (ES6), utilizando el objeto XMLHttpRequest.
- 🔧 Se muestra el proceso de creación de una aplicación HTML y JavaScript para hacer peticiones a la API y mostrar los resultados.
- 🔑 Se utiliza el método 'fetch' de JavaScript, una alternativa moderna a XMLHttpRequest, para realizar peticiones a la API.
- 📝 Se detalla cómo se maneja la respuesta de la API, incluyendo la verificación del estado HTTP y la conversión de la respuesta a formato JSON.
- 🎨 Se proporciona un ejemplo de cómo integrar los datos obtenidos de la API en el HTML utilizando plantillas de strings y manipulación del DOM.
- 🛠 Se sugiere que, aunque se puede trabajar con nodos HTML y manipular el DOM directamente, existen frameworks y librerías que facilitan este proceso.
Q & A
¿Qué tipo de contenido se ofrece en el canal de YouTube mencionado en el guión?
-El canal de YouTube ofrece tutoriales sobre JavaScript, programación y tecnologías relacionadas.
¿Qué es lo que se va a enseñar en el vídeo de hoy según el guión?
-Se va a enseñar cómo realizar llamadas o peticiones a una API desde una aplicación web hecha con JavaScript.
¿Qué es 'vanilla JS' y cómo se relaciona con el contenido del vídeo?
-Vanilla JS se refiere a JavaScript en su forma más básica, sin frameworks ni librerías adicionales. El vídeo muestra cómo hacer peticiones a una API usando solo JavaScript plano.
¿Cómo se llama a la herramienta que se usaba antes de las APIS modernas y que se menciona en el guión?
-La herramienta que se usaba antes de las APIS modernas y que se menciona es 'XMLHttpRequest'.
¿Qué versión de JavaScript trae nuevas funcionalidades que mejoran la forma en que se hacen las peticiones a una API?
-La versión 6 de JavaScript, lanzada a partir de 2015, trajo nuevas funcionalidades que mejoran la forma en que se hacen las peticiones a una API.
¿Cómo se llama el endpoint que se utiliza para obtener información de los usuarios en el ejemplo del guión?
-El endpoint que se utiliza para obtener información de los usuarios se llama '/users'.
¿Qué método de la API 'fetch' se utiliza para realizar una solicitud GET y qué devuelve?
-Se utiliza el método 'fetch' con la URL correspondiente para realizar una solicitud GET. Esto devuelve una promesa que, una vez resuelta, contiene la respuesta de la solicitud.
¿Cómo se puede transformar una respuesta de texto en formato JSON utilizando JavaScript?
-Se puede transformar una respuesta de texto en formato JSON utilizando el método 'JSON.parse' que está disponible en el objeto de respuesta.
¿Qué es un 'DocumentFragment' y cómo se utiliza en el contexto del guión?
-Un 'DocumentFragment' es un objeto que representa un contenedor para múltiples nodos. Se utiliza para crear un fragmento del DOM que luego se puede insertar en la página web. En el guión, se usa para crear un contenedor para los elementos que se van a insertar en el DOM.
¿Cómo se puede insertar una lista de elementos en el DOM utilizando 'DocumentFragment'?
-Se puede crear un bucle que recorra la lista de elementos, creando cada uno de ellos y agregándolos al 'DocumentFragment'. Luego, se puede insertar el 'DocumentFragment' completo en el DOM en un solo paso.
¿Por qué se utilizan librerías y frameworks para manipular el DOM si se puede hacer con JavaScript puro?
-Las librerías y frameworks facilitan y agilizan el proceso de manipulación del DOM, proporcionando estructuras y métodos predefinidos que simplifican tareas comunes y mejoran la legibilidad y mantenibilidad del código.
¿Cómo se puede mejorar la forma en que se muestran los datos en una página web además de utilizar strings para formatear el HTML?
-Se puede mejorar utilizando elementos del DOM directamente para crear y manipular los nodos de la página web, lo que proporciona un control más preciso y una mejor rendimiento en la representación de los datos.
Outlines
😀 Introducción al canal y tutorial de JavaScript
Carlos, el presentador, da la bienvenida al canal de YouTube y explica que cubre tutoriales sobre JavaScript, programación y tecnologías relacionadas. Invita a sus espectadores a suscribirse y activar notificaciones para nuevos contenidos. Comienza un tutorial sobre cómo realizar llamadas a una API desde una aplicación web utilizando JavaScript puro, mencionando la evolución de las técnicas desde el objeto XMLHttpRequest hasta las mejoras introducidas en ES6 en 2015. Utiliza un ejemplo de una API ficticia llamada 'Jason Blake Holder' que ofrece puntos de conexión para usuarios, posts, comentarios, etc.
🔍 Explicación del proceso de petición a una API
Carlos profundiza en el proceso de realizar una petición HTTP GET a la API utilizando XMLHttpRequest. Crea una función de manejador de respuesta para manejar el éxito o fracaso de la petición según el código de estado HTTP. Detalla los diferentes estados de la petición asíncrona y cómo se maneja la respuesta una vez que se recibe. Luego, muestra cómo analizar la respuesta JSON y cómo integrar los datos en la aplicación web utilizando el DOM para mostrar una lista de usuarios con sus nombres y correos electrónicos.
🌐 Uso de 'fetch' para realizar peticiones a una API
El presentador compara el enfoque anterior con el uso de la función 'fetch', que es una alternativa moderna a XMLHttpRequest. 'fetch' devuelve una promesa, lo que permite manejar la asincronía de manera más limpia. Carlos muestra cómo utilizar 'fetch' para obtener datos de la API y cómo procesar y mostrar la información de los usuarios de la misma manera que con XMLHttpRequest, pero con una sintaxis más simple y moderna.
🛠️ Manipulación del DOM con nodos HTML
Carlos sugiere una mejora en la manipulación del DOM para mostrar los datos de los usuarios. En lugar de usar cadenas de texto para formatear el HTML, propone crear elementos HTML y nodos de texto dinámicamente dentro de un fragmento de documento. Crea un bucle que recorre los usuarios y construye una lista con elementos 'li' para cada uno, mostrando el nombre y el correo electrónico. Luego, agrega el fragmento completo al DOM para mostrar la información de manera más estructurada. Finalmente, Carlos invita a los espectadores a dejar comentarios sobre si les interesaría aprender sobre el consumo de APIs con React y concluye el video.
👋 Despedida y llamada a la interacción
Carlos cierra el video con un agradecimiento y un llamado a la acción, animando a los espectadores a comentar si les interesa un tutorial sobre cómo consumir una API con React. Asegura que estaría encantado de crear más contenido si hay demanda, y los despide con un 'chao', dejando la puerta abierta para futuras interacciones y tutoriales.
Mindmap
Keywords
💡JavaScript
💡API
💡Vanilla JS
💡XMLHttpRequest
💡Fetch API
💡JSON
💡AJAX
💡DOM
💡Promesas
💡Template
💡HTML
Highlights
Carlos Azaústre presenta un nuevo tutorial sobre cómo realizar llamadas a servicios web desde JavaScript.
El canal de YouTube ofrece tutoriales sobre JavaScript, programación y tecnologías relacionadas.
Se invita a suscriptores a activar notificaciones para nuevos videos sobre programación.
El tutorial se centra en hacer peticiones a un servicio externo utilizando JavaScript puro (vanilla JS).
Se utiliza la API de 'json-blade-holder' como ejemplo de un servicio web falso para la demostración.
Se muestra cómo usar el enpoint 'users' para obtener datos de usuarios.
Se explica el proceso de creación de un archivo HTML y JavaScript para realizar la llamada a la API.
Se discute el uso de la constante 'xhr' para la antigua técnica de peticiones con XMLHTTPRequest.
Se detalla cómo manejar respuestas de la API y verificar el estado de la petición con 'status'.
Se muestra cómo utilizar 'JSON.parse' para convertir la respuesta de la API en un objeto JavaScript.
Se crea una plantilla HTML para integrar los datos de la API en la página web.
Se utiliza el método 'querySelector' para seleccionar elementos del DOM y manipularlos.
Se presenta la nueva forma de hacer peticiones con 'fetch' en lugar de 'XMLHTTPRequest'.
Se discute cómo manejar y procesar las promesas devueltas por 'fetch'.
Se muestra cómo utilizar nodos del DOM para construir la respuesta HTML en lugar de cadenas de texto.
Se ofrecen recomendaciones de otros videos para entender conceptos como asincronía y promesas en JavaScript.
Se invita a la audiencia a dejar comentarios si están interesados en tutoriales sobre otras tecnologías o frameworks.
Transcripts
hola cómo estás mi nombre es carlos
azaústre y en este canal de youtube
vemos tutoriales sobre javascript
programación
riad noyes etcétera te invito a que te
suscribas y que activen la campanita
para que youtube te avise siempre que
saque un nuevo vídeo en el de hoy lo que
vamos a ver es cómo realizar llamadas o
peticiones a jacques desde tu aplicación
web hecha con javascript a un servicio
externo como puede ser una pingüe
service etcétera me lo habéis dejado
mucho en los comentarios es una pregunta
muy frecuente de cómo se hacen
peticiones o cómo se llama o consume un
app y desde javascript vamos a verlo con
vanilla js es decir javascript plano sin
nada de frameworks ni librerías de hecho
vamos a ver cómo se hacía hasta hace muy
poco tiempo con el objeto xml http
request y como eso ha ido mejorando con
las nuevas funcionalidades que ha traído
javascript sobre todo a partir de 2015
con la versión 6 por tanto vamos al
código que es lo que nos interesa
como app y vamos a utilizar esta que se
llama jason blake holder que es un fake
up y es decir una app y de mentira que
tiene varios en point que podemos
utilizar por ejemplo el en point posts
nos va a devolver un tipo post como de
un blog comentario nuevo los comentarios
álbumes fotos 'todos' y users creo que
vamos a utilizar el de user porque es
más corto son 10 usuarios podemos hacer
que post put delete etcétera
vamos a utilizar únicamente que es hacer
una llamada a lápiz para que nos
devuelva a los usuarios y nosotros nos
encargaremos de pintarlo porque somos
pinta pis así que vamos a ello vamos a
ver cómo es ese api de usuarios como ves
nos devuelve un objeto en formato jason
es un array con varios objetos con
diferentes usuarios incluso por los
empleos pueden ser dinámicos si ponemos
users uno nos devuelve únicamente el
primer usuario que tiene pues el aire el
nombre username email una dirección
incluso nos viene unas coordenadas que
podríamos utilizar teléfono página web y
empresa copiar nos está
y ahora la utilizaremos entonces nuestra
aplicación va a ser muy sencilla va a
ser todo html y javascript plano para
ver lo que son las bases entonces
creamos un index html
y con m pues no se escribe aquí la
estructura dentro del body vamos a
escribir un dif con la app que va a ser
donde vamos a meter ahí nuestro código
generado con javascript y para poder
hacer eso vamos a tener un script
cuyo fichero fuente va a ser index js
que ahora crearemos y lo vamos a decir
que es de tipo módulo
y listo pues vamos a ver el javascript
nos quedamos aquí un fichero index js
y lo primero de todo vamos a crear una
constante que va a ser la url del lápiz
y vamos a pegar esto de aquí de hecho
voy a dejar únicamente lo que es la url
y luego los en point los iremos
añadiendo de forma dinámica vale como se
hacía esto antes de que llegara es más
clip 6 y tuviéramos unas apis más
decentes se utilizaba el objeto xml http
request como se hacía esto lo primero de
todo creamos el objeto xml http request
le podemos llamar x hr para que no se
nos olvide y decimos new xml
http request vamos a crearnos una
función manejador a que la vamos a
utilizar luego como callback entonces
vamos a crearla aquí y vamos a llamar
own request handler por ejemplo
el manejador de la del rico es de la
petición aquí lo que tenemos que hacer
es una comprobación cuando tú haces una
petición haya un servicio web
normalmente devuelve una respuesta hay
un código de respuesta gracias a ese
código podemos saber si la petición ha
sido correcta si ha habido algún error
por parte del servidor por parte de
nosotros etcétera es una forma de
controlar eso lo podemos ver con this
status que sea 200 pero aparte cuando
estamos haciendo la petición es una
petición asíncrona pasa por distintas
etapas también hay un código de ver si
está listo o no que sería el rey de este
entonces vamos a hacer la comprobación
también despuntó read y state sea igual
a 4 y también el estatus ya 200 que
significa 4 bueno realmente hay 55
códigos de hecho los podemos poner aquí
a modo de comentario el 0 sería un set
esto qué significa que aún no se ha
llamado al método open no se ha llamado
al método open el uno sería openet
se ha llamado
método open
de todo open de este objeto que tenemos
aquí que luego veremos pero ya lo vamos
comprobando aquí el state 2 sería
there's risai
esto quiere decir que se está llamando
al método
en el estado 3 sería loading que como su
propio nombre indica está cargando
es decir
está recibiendo
la respuesta
y por último tenemos el 4 que es donde
es decir se ha completado todo o se ha
completado la operación ok entonces
cuando ya se ha completado todo ya se ha
llamado a open se ha hecho él se ha
recibido la respuesta y ya lo tenemos
todo y el la respuesta ha sido correcta
es decir ha llegado un método 200 del
servidor podemos hacer un control loc de
disc response para ver la respuesta que
ha recibido en el servidor entonces
ahora vamos a llamar a esta función para
que se ejecute como lo hacemos
utilizamos el objeto xml
http rico es que hemos creado y le
añadimos un escuchador de eventos es
decir que escuche el evento lo at y le
vamos a pasar esta función la de un rico
esto handler esto de momento lo que va a
hacer es quedarse en el estado 0 porque
todavía no hemos llamado al método open
vamos a llamar al método open entonces
xlr open y éste
este método recibe dos parámetros uno de
ellos es el verbo o la petición que
hacemos
http que en este caso vamos a utilizar
get para que nos devuelva datos del
servidor y la url que va a ser up y url
y users
este open pues lo que va activar es el
estado 1 pero todavía nos queda llamar
al método send para que inicie la
petición entonces llamamos hacer
y esto tardará un tiempo primero estará
en el estado 2 y luego pasará al estado
3 del audi y cuando ya reciba la
respuesta y se haya completado la
operación pasará al estado 4 si la
respuesta es correcta que es 200 no se
entrará en este condicional e imprimirá
por consola la respuesta vamos a abrir
este este fichero en un life server
y abrimos la consola
y aquí en la consola puedes ver que
tenemos toda la respuesta pero si te
fijas esta respuesta está en formato
texto como es un array y son objetos al
ser formato texto pues no podemos
integrar no podemos trabajar con ello
pero sí es un jason bien formado podemos
parchearlo con el método jason punto
parce y es lo que vamos a hacer ahora
volvemos aquí y en lugar de imprimir por
consola vamos a guardar los datos aquí y
llamar a jason punto parce de this
response y podemos imprimirlo ahora para
a ver qué es lo que nos está devolviendo
volvemos al navegador y puedes ver aquí
que esto ya no es un formato texto sino
que es una estructura es un array y
tenemos todos estos objetos vale pues lo
que se me ocurre para poder pintar el
lápiz
sería crearnos aquí
una constante vamos a llamar a html
response por ejemplo y vamos a llamar a
documento query selector de
a pepe que era este y de aquí entonces
aquí ahora en html5 de por qué hacemos
esto para poder insertar a y la
respuesta que vamos ahora a escribir en
formato html y ahora vamos a integrar
esos datos entonces voy a crearme aquí
una constante llamar template como lo
quieras llamar y lo que vamos a hacer es
mapear ese objeto data y por cada ser
queremos que nos devuelva pues a mí se
me ocurre hacer una lista una ley y
dentro de cada ley vamos a tener el user
punto name
si te fijas tenemos una propiedad name
que nos devuelve el nombre incluso
tenemos el email pues vamos a añadir
además del nombre al lado el email
entonces nos venimos aquí al código y
usher name
y podemos poner aquí el emoji del email
seguido de user punto
e mail vale entonces en tpl tenemos
tenemos un string con varios eles
dependiendo de todos los usuarios que
tengan ahora lo que vamos a hacer es en
este html response teníamos teníamos
este día lo que vamos a hacer es llamar
al método inner html de ese nodo y
pasarle 1 l y dentro de ese l le vamos a
poner el template que es esto de aquí si
esto lo salvamos y nos vamos a nuestra
aplicación podemos ver que tenemos una
lista de todos los nombres con los
emails que nos devuelve el api y esto
bueno pues ya dependiendo de los datos
que quieras imprimir y demás pues lo
puedes trabajar a tu gusto ahora vamos a
ver cómo hacer lo mismo pero utilizando
el lápiz de fecha vale vamos a comentar
el código anterior y vamos a empezar a
trabajar aquí vamos a tener de nuevo un
nodo raíz
donde vamos a incrustar el resultado y
esto sería documento punto query
selector
de las app y vamos a tener los datos por
la plantilla como teníamos antes aquí
vamos a llamar al método fets que recibe
la url
qué sería url y users y esto devuelve
una promesa si no entiendes bien las
promesas te recomiendo que veas este
vídeo de aquí donde te hablo de todo el
sincronismo con javascript cómo
funcionan las promesas cómo funciona el
asinca weight y demás te recomiendo que
le eches un vistazo entonces el
resultado de la promesa lo recogemos con
dent
y esto va a recibir una respuesta si te
acuerdas de antes esta respuesta llega
en formato string entonces tenemos que
parchear la pero fecha nos proporciona
este método jason que acs parce o esto
devuelve una promesa también y aquí ya
por fin tenemos los datos que son los
usuarios y es donde vamos a trabajar
salvamos y ya me lo intenta un poco
mejor y ahora aquí es donde podemos ya
trabajar con este objeto y users
entonces vamos a crearnos aquí un
template y lo que va a hacer es recibir
el resultado de mapear en la raíz de
usuarios donde queremos que por cada
usuario nos devuelva
y dentro de la ley lo que teníamos aquí
de el usuario y el email copio y lo pego
así
y seguimos trabajando dentro de la
promesa porque si lo hacemos fuera no
vamos a tener acceso a esto hasta que
finalice la promesa entonces tenemos que
hacer todo el código aquí dentro y aquí
que nos falta pues llamar al html
response línea de html como teníamos
antes y le vamos a pasar un huele y
dentro del vélez le vamos a pasar esa
plantilla salvamos nos vamos a life
server y aquí vemos que tenemos el mismo
resultado pero utilizando el pfets de
javascript
si has llegado hasta esta parte del
vídeo probablemente estés pensando pero
estás utilizando strings para formatear
el html no sería mejor utilizar
elementos de html y tienes razón y vamos
a verlo ahora pues venga vamos a hacerlo
con nodos del dom lo primero que vamos a
crear es aquí un objeto tpl que va a ser
document punto create documento fragment
que nos va a crear un fragmento como los
de riad donde podemos añadir otros hijos
o nodos html dentro de la respuesta de
la promesa donde ya tenemos los usuarios
lo que vamos a hacer es un bucle for
each
y por cada usuario queremos que haga lo
siguiente vamos a crearnos un elemento
documento con documento punto create
element y va a ser un nodo de tipo ley a
este elemento le vamos a pasar un hijo
que va a ser otro nodo pero de tipo
texto documento punto create test out y
qué texto va a ser pues el que estábamos
usando aquí pero lo de dentro es decir
el user name y el email
lo pasamos como modo string porque así
que estamos creando un nodo pero de tipo
texto que va a ser hijo de este modo de
tipo ley y esto se lo vamos a añadir al
tpl tpl a pensar de él en de hecho este
este tpl en lugar de ser un documento
fragment va a ser un elemento de tipo l
por tanto luego cuando estemos añadiendo
los hijos l y van a ser hijos de huele
pues éste tpl bueno lo podríamos llamar
huele para que quede más claro
y por último vamos al nodo que teníamos
aquí el nodo app el nodo raíz y le vamos
a pasar otro hijo y este hijo va a ser
el huele que tenemos aquí ya creado con
todos los datos salvamos vamos al
navegador y vemos que tenemos todo aquí
formateado y si nos vamos al código
fuente vemos que tenemos el app debajo
del app tenemos huele y dentro de huele
tenemos todos los elys con el texto que
hemos pasado esta es la forma de hacer
una petición a jazz o consumir un app y
desde javascript de forma totalmente
nativa totalmente vanilla sin framework
sin librerías y sin nada como ves para
manipular el don también es un poco
laborioso si quieres hacerlo bien
utilizando nodos de html
por eso hay librerías y frameworks como
read angular o view que nos facilitan
este proceso
si te interesa que haga un vídeo sobre
cómo consumir una app y con riad dejarlo
en los comentarios y con mucho gusto nos
pondremos manos a la obra sin más te
dejo que veas estos vídeos que te
recomiendo por aquí y nos vemos en el
siguiente chao
浏览更多相关视频
30. Rutas dinámicas con vue-router y useRoute | AbiDev
Web I - SPA y Ajax - Partial Render
Consiguiendo un empleo en React Native - Día #25 (JavaScript)
Build your own Amazon price scraper on Google sheets
Tutorial SwiftUI Español - Cómo Leer un Archivo JSON (JSON, MapKit)
Cómo hacer una PÁGINA WEB en BLOC de NOTAS
5.0 / 5 (0 votes)