CÓMO CONSUMIR UN API con JAVASCRIPT desde la web

Summary

En 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

00:00

😀 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.

05:01

🔍 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.

10:02

🌐 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.

15:02

🛠️ 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.

Keywords

💡JavaScript

JavaScript es un lenguaje de programación interpretado, orientado a objetos y basado en prototipos. En el video, se utiliza para crear aplicaciones web y realizar llamadas a servicios externos, como se menciona al inicio del guion.

💡API

API (Interfaz de Programación de Aplicaciones) es un conjunto de rutinas y protocolos que permiten la construcción de software y la interacción entre diferentes aplicaciones. En el script, se habla de consumir un API para obtener datos de usuarios.

💡Vanilla JS

Vanilla JS se refiere a JavaScript puro, sin frameworks ni librerías adicionales. El video muestra cómo realizar llamadas a un API utilizando JavaScript plano, como se menciona en la parte donde se habla de 'vanilla js'.

💡XMLHttpRequest

XMLHttpRequest es un objeto integrado en JavaScript que permite hacer solicitudes HTTP al servidor. Antes de ES6, se utilizaba comúnmente para realizar peticiones a APIs, como se describe en el script.

💡Fetch API

Fetch API es una interfaz para realizar operaciones HTTP/S en el navegador basada en promesas. En el guion, se menciona como una mejora sobre XMLHttpRequest para hacer solicitudes a un API.

💡JSON

JSON (Notación de Objetos de JavaScript) es un formato de intercambio de datos ligero, fácil de leer y escribir para humanos y fácil de解析 por máquinas. En el video, se utiliza para recibir y enviar datos de la API, como se menciona en la sección donde se habla de 'jason punto parce'.

💡AJAX

AJAX (Asynchronous JavaScript and XML) es una técnica para crear aplicaciones web dinámicas y asíncronas. Aunque no se menciona directamente en el guion, la técnica utilizada para hacer peticiones a la API es similar a AJAX.

💡DOM

DOM (Modelo de Objeto de Documento) es una representación estructurada de un documento en forma de árbol que permite a JavaScript acceder y manipular el contenido del documento. En el script, se menciona al hablar de manipular el DOM para insertar los datos recibidos.

💡Promesas

Las promesas son una primitiva de JavaScript que representa el resultado final de una operación asíncrona. En el guion, se menciona el uso de promesas con la Fetch API para manejar las respuestas de la API.

💡Template

Un template en el contexto de programación web es una plantilla que define la estructura de un documento o componente. En el script, se utiliza para mapear y mostrar los datos de los usuarios recibidos de la API.

💡HTML

HTML (Lenguaje de Marcado de Hipertexto) es el estándar que se utiliza para crear el contenido de la web. En el video, se menciona HTML al hablar de crear elementos y manipular el DOM para mostrar los datos de la API.

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