JS en La Web 3

Transcripción
[00:00] Hola. Mi nombre es Harland Lohora y si quieres aprender cómo comunicarte con un
servidor, como crear una página en la cual puedas crear un nuevo cliente, por ejemplo, vamos a
poner aquí a nuestro cliente Marcos, su correo marcos@alura.com, vamos a registrarlo.
[00:24] Nos comenta entonces aquí que está completo el registro. Nosotros tenemos también la
capacidad de poder ver aquí a Marcos, con su correo electrónico. También vamos a poderlo editar.
Por ejemplo vamos a decir que su nombre completo es Marcos Vargas, vamos a editarlo, lo
editamos, vamos a poder también eliminarlo.
[00:47] Entonces ¿qué fue lo que estamos aplicando aquí? Estamos aplicando lo que en web se
conoce como un crud es decir Create, Read, Update and Delete o en español, crear, leer, actualizar
y eliminar. Entonces, estas son operaciones que se utilizan demasiado en el mundo web, en el
mundo de las aplicaciones.
[01:09] Realmente en cualquier aplicación en la cual tú quieras almacenar datos, entonces vamos a
ver cómo comunicarlos a través de HTTP, con nuestro servidor. Vamos a ver también cómo utilizar
promesas y qué son. Vamos a ver nuevas características de JavaScript, en la cual aplicamos lo que
se conoce como try catch. También vamos a ver qué es lo que sucede cuando una promesa se
cumple o cuando nuestro servidor nos regresa la información que nosotros necesitamos.
[01:40] Entonces, si quieres aprender todo esto de una manera aplicada en un proyecto, espero a
que te unas a este curso para que puedas aprender nuevas características que tiene JavaScript y lo
puedas integrar en tus habilidades como desarrollador.
04Preparando el ambiente
PRÓXIMA ACTIVIDAD


En la clase siguiente vamos a usar el json-server para simular un servidor y consumir los datos.
Json-server está listado como dependiente del package.json, que es el archivo donde encontramos
todas las bibliotecas externas que estamos usando en nuestro proyecto. Al hacer npm
install dentro de la carpeta admin, que es la carpeta del proyecto (veremos esta parte en el
video) empieza la descarga de json-server automáticamente.

El comando json-server --watch db.json que usamos en la clase necesita ser ejecutado dentro
de la carpeta del proyecto de admin, caso contrario este comando no será reconocido.
Otra información importante es que para funcionar localmente, al invés de ejecutar el
comando json-server --watch db.json, como lo hacemos en clase, tenemos que ejecutar
este comando con npx adelante:
npx json-server --watch db.json
En el caso de que quieras utilizar el comando sin el npx adelante es necesario instalar json-server
de manera global:
npm install -g json-serverCOPIA EL CÓDIGO
Después, para subir el servidor, ejecutamos json-server --watch db.json, como lo hacemos
en clase.
Si presentas problemas a la hora de instalar json-server, puedes revisar el siguiente artículo que te
ayudará si es mostrado algún error https://www.aluracursos.com/blog/simulando-una-api-rest-con-
json-server
Transcripción
[00:00] Muy bien. Entonces vamos a comenzar. Una vez que es descargado ya el proyecto, vas a
encontrarte diferentes carpetas. Por ejemplo tenemos aquí la parte de assets, tenemos screens, que
son pantallas, tenemos un archivo gitIngnore, un archivo db.json, que pone atención aquí. Dice mi
nombre, el correo electrónico y un id. También vamos a obtener un package.json, donde ven aquí la
información de este proyecto y tenemos un readme. Eso lo vamos a ir viendo en el camino.
[00:32] Ahora, lo primero que hay que hacer es venir aquí a nuestra pantalla de screens y buscar el
archivo que se llama lista_cliente.html. Lo que vamos a hacer es utilizar una extensión de Visual
Studio Code para poder simular un servidor.
[00:48] En caso de que aún no lo tengas instalado o quieres verificar si lo tienes, puedes venir aquí
a la parte del extensiones, del lado izquierdo. O bien, en caso de que no lo encuentres, busca la
sección de vista y deberás encontrar también la parte de extensiones.
[01:07] Te va a salir entonces este menú. Lo único que tendrás que hacer es escribir live server y
deberás de darle clic a este de aquí que tiene el icono en tono de rosas. Como puedes darte cuenta,
yo aquí ya lo tengo instalado. Si tú aun no lo tienes, es simplemente darle clic y se va a instalar
solito.
[01:30] Muy bien. Vamos a regresar entonces de nuevo aquí a ver nuestros documentos. Voy a
cerrar esta vista y ahora lo que voy a venir es a mi archivo lista_cliente.
[01:41] Como te puedes dar cuenta, es un archivo HTML normal con clases, la estructura de alguna
tabla por ahí. Lo que voy a hacer entonces es darle clic derecho, abrir con Live Server. Voy a
esperar a que abra el navegador, muy bien, entonces aquí nosotros ya tenemos nuestro proyecto
inicializado. Tenemos que estar corriendo en nuestro navegador, bueno, esta página web, donde
tenemos un pequeño proyecto que se llama Doguito Petshop.
[02:09] Es para que nosotros podamos aplicar lo que es un CRUD, ahorita vamos a ver a detalle
qué es el CRUD, pero pues bueno. Tenemos entonces una tabla donde tenemos dos columnas, tanto
nombre como email. En este caso tenemos a Gabriela y el correo electrónico es
gabriela@alura.com . Tenemos también aquí la parte de editar, de eliminar.
[02:32] La idea principal es que nosotros podamos aplicar en este proyecto todo lo que conlleva el
CRUD. Ahora vamos a ver al detalle qué significa CRUD. Lo importante aquí es que tengas al
menos ya en tu navegador esta primera parte del proyecto. Una vez que lo tengas, vamos entonces a
regresar a nuestro Visual Studio Code.
[02:56] Estamos aquí. Ahora, lo que necesitamos es simular un back end o una API o como la
conozcas. Lo que nosotros no queremos es conectarnos a otra computadora por así decirlo, y
extraer información a través de una URL. La información que nosotros queremos ahorita viene aquí
en este archivo db.json.
[03:22] Este de aquí, ya te lo había enseñado hace un ratito. Entonces lo que vamos a necesitar es
justamente una herramienta que nos ayude a simular un servidor. El servidor lo único que se va a
encargar es de almacenar ciertos archivos y disponibilizarlos a través de internet y nosotros los
mandamos a llamar a través de una URL.
[03:43] Entonces, para poder utilizar un servidor, por así decirlos, dentro de nuestra computadora,
hay que tener dos cosas instaladas. La primera es Node js. Aquí es una instalación relativamente
sencilla, simplemente lo descargas. Pero eso sí, verifica que no lo tengas instalado para que no
trabajes doble. ¿Cómo lo verificamos?
[04:11] Aquí en nuestro Visual Studio Code tenemos una sección de terminal. Vamos a abrir una
nueva terminal. Voy a esperar a que cargue y voy a escribir node -v. En este caso tengo la versión
10.19.0. Entonces ya lo tengo instalado.
[04:36] En caso de que te parezca que Node no está definido, sí va a necesario que lo instales de
acuerdo a tu sistema operativo. Esto será lo primero que necesitaremos, como tal Node. Voy a
limpiar la pantalla. Y lo que vamos a necesitar ahora es un paquete que se va a encargar de
funcionar como un servidor o de poner nuestra computadora como un servidor.
[05:00] Vamos a venir entonces a abrir una nueva pestaña y voy a escribir json server npm. Voy a
esperar a que cargue, voy a venir aquí en la primera opción. Si nosotros vamos viendo la
documentación, pues tenemos diferentes maneras de, o bueno, podemos ir viendo cómo es que
funciona.
[05:26] Lo que voy a hacer es copiar esta línea: nmp install -g json-server, la voy a copiar, voy a ir
de nuevo a mi terminal y va a pasar algo curioso. Si yo escribo aquí, json server vamos a ver qué
pasa. Me dice que json server no se encuentra.
[05:47] Esto porque es justamente una librería externa que nosotros queremos instalar en nuestra
computadora. Lo que voy a hacer ahora entonces es pegar el comando que copiamos y vamos a ver.
Tenemos la primera parte, que es npm, significa node package manager. Es decir, en español,
manejador de paquetes de Node.
[01:09] Esta librería que nos ayuda a instalar código de Node ya viene por defecto, o cuando tú
descargas o instalas Node, ya viene por defecto, entonces no tienes que hacer realmente más.
[06:18] Después, tenemos la palabra install, que hace referencia a que se instale y nuestra flag o
una opción que es -g. En este caso es para que lo pueda instalar de manera global. Y por último
tenemos el nombre de nuestro paquete o librería, que se llama json-server. Le voy a dar entonces
aquí enter, voy a esperar a que descargue todas las dependencias o todo el código que necesita para
poder ejecutar y te veo cuando termine de hacer la instalación.
[06:51] Muy bien. Entonces ya tenemos Json Server instalado. ¿Cómo podemos verificarlo?
Simplemente escribiendo json-server, le voy a dar enter y ahora como puedes darte cuenta, ya no
me aparece que el comando no se encuentra, sino que me aparecen diferentes opciones o diferentes
parámetros que nosotros podemos utilizar dentro de Json-Server.
[07:20] El que a nosotros nos interesa es este de aquí, --watch o bien -w. Lo que voy a hacer
entonces es json-server espacio --watch o -w, como quieras, y va a recibir después el nombre del
archivo Json que queremos que utilice. En este caso, si recuerdas, es db.json, por lo cual yo
simplemente voy a escribir db.json. Le voy a dar aquí entonces enter.
[07:56] Aquí ya aparece con una carita feliz donde dice hi y tenemos esta URL. La voy a copiar, lo
que voy a hacer aquí es minimizar nuestra terminal. Por favor no vayas a cerrar esta terminal. Igual
en caso de que te lo preguntes es con "Ctrl + C" para poder terminar. Lo que nosotros queremos es
que esté corriendo, es decir, que nosotros podamos acceder a http://localhost:3000. Voy entonces a
verificar.
[08:30] Voy a venir aquí a Google, voy a abrir una nueva pestaña y voy a pegar la URL que me
mando la terminal. Le voy a dar enter. ¿Qué es lo que tenemos? Tenemos un arreglo con un objeto,
el cual tiene la llave nombre con el valor Harland Lohora, email con harland@lohora.com y un id.
Lo que nosotros estamos haciendo entonces es, con json-server, utilizar este archivo db.json para
poder desplegar un archivo o una URL que nos va a regresar esta información de aquí.
[09:15] Por ejemplo, ¿qué pasa si yo aquí? Voy a poner nada más Harland, lo quito, lo guardo y
regreso aquí. Voy a recargar. Entonces prácticamente lo que nosotros tenemos aquí es lo que nos
muestra en esta pestaña. Entonces esta sería la primera parte. Una cosa que tienes que tener en
cuenta es que probablemente en tu navegador se a ver solamente esta parte en blanco, no esto de
aquí.
[09:47] En caso de que quieras que le dé un formato, de que lo indexe bien, de que le ponga colores
y de que no resalte tanto la vista, puedes buscar en las extensiones, esta extensión de aquí que se
llama JSON Formatter.
[10:01] Esta está en Chrome, igual si utilizas algún otro navegador, supongo yo que puedes
encontrar alguna opción similar. Lo único que tendrás que hacer es escribir chrome extensions json
formatter. Aquí está JSON Formatter y aquí deberías de poder simTranscripción
[00:00] Muy bien, entonces ahora nosotros ya tenemos nuestro servidor funcionando en
localhost:3000/perfil. Verifica que sea perfil. Y este perfil viene justamente de este de aquí, muy
bien. En caso de que no entiendas muy bien qué es todo esto de localhost:3000, qué son los puertos,
qué es la parte de cliente, servidor, el API, cómo se comunica el front y el back, puedes ver un
curso justamente aquí en la plataforma de Alura cursos, que igual lo imparto yo que habla sobre
HTTP.
[00:39] De hecho, puedes buscarlo así: HTTP y debería de aparecerte el curso. Muy bien. Entonces,
suponiendo que ya tienes todos los conocimientos de HTTP, lo que tenemos aquí es nuestro back.
Tenemos una URL, que nosotros vamos a querer en algún punto o más bien no en algún punto,
ahora, lo que queremos es que la información que aparece aquí, aparezca igual aquí.
[01:06] Si nosotros nos vamos a nuestro archivo HTML, aquí en lista_cliente, vamos a buscar en la
línea 56. Lo que nosotros tenemos es hardcodeado, por así decirlo, o ya escrito, la información de
Gabriela. Lo que nosotros queremos ahora es tomar la información que está del lado del servidor y
ponerla aquí.
[01:33] ¿Cómo es que lo vamos a hacer? Nosotros tenemos en JavaScript algo que se llama AJAX.
Te lo voy a poner aquí comentado. Que es prácticamente Asyncronous JavaScript and XML.
Entonces, la traducción al español sería como JavaScript asíncrono y XML.
[02:08] XML es un tipo de formato de documento que se utiliza mucho en internet y esto sería
como el concepto. Ahora, lo que nosotros vamos a necesitar es crear un archivo JavaScript donde
podamos instanciar una nueva clase de XML para nosotros poder comunicarnos o conectarnos con
nuestra API.
[02:33] Lo que voy a hacer entonces aquí es crear una nueva carpeta, que se llame service. Aquí
tenemos service, voy a crear un archivo que llame client-service.js. Muy bien. A mí me gusta
realmente poner un console.log, solo para verificar que si vaya a estar bien direccionado o que lo
requeramos bien. Entonces, voy a poner "CLIENT-SERVICE", solo un console.log.
[03:08] Lo guardamos. Y ahora lo que tenemos que hacer es venir a nuestro archivo lista_cliente y
venir antes de que cierre la etiqueta body. Voy a escribir aquí una etiqueta script. La voy a cerrar,
muy bien. Este script lo que nos va a ayudar es a conectar un archivo JavaScript que está en otro
archivo.
[03:39] Pudiéramos bien ponerlo aquí adentro de nuestro código, pero para que quede más
organizado lo voy a poner aquí: src"../" para salir del directorio en el cual nos encontramos,
estamos en screens. Salimos, ya ahora somos capaces de acceder a assets, screens, service, que es la
que nos interesa.
[03:02] Entonces voy a poner aquí service/ y en nombre del archivo que en este caso es client-
service. Lo voy a guardar. Voy a ir a mi navegador, solo para verificar, clic derecho, inspeccionar.
En caso de que no te aparezca, vienes a estos tres puntitos, en la sección de Más herramientas y
Herramientas del desarrollador. Ya lo que tenemos entonces, es nuestro archivo JavaScript que está
siendo consumido por nuestro archivo lista_cliente.html.
[04:36] Muy bien. Como te comentaba, lo que nosotros queremos entonces es crear una nueva
comunicación entre el front end y el back end. Esto lo vamos a lograr con una clase que ya viene
nativa en el navegador, que se llama XMLHttpRequest. Como puedes ver, yo no tuve que instalar
nada. Aquí ya viene el autocompletado.
[05:06] Entonces vamos a guardarlo todo esto en una constante que la vamos a llamar simplemente
http. Va a recibir aquí entonces un paréntesis para inicializarla. Vamos a hacer un console.log(http)
y vamos a ver entonces qué sucede. Aquí tenemos ya el console.log, tenemos en el
console.log(http), por lo tanto podemos ver aquí que tenemos diferentes métodos.
[05:38] Diferentes cosas que nosotros podemos hacer dentro de nuestro HTTP. Que es una nueva
instancia de la clase XMLHttpRequest. Lo primero que vamos a hacer entonces es decir: http.open.
Aquí viene open, que es un método que va a recibir dos parámetros. El primero que va a recibir es
el método, y el segundo la URL o en dénde es que queremos que nosotros realice la acción http.
[06:27] En caso de que no lo recuerdes, tenemos diferentes métodos dentro de HTTP. Pero antes de
ver los métodos, vamos a ver super rápido qué es el CRUD. Aquí el CRUD lo que hace referencia
es a Create, Read, Update y Delete. Entonces como puedes ver, tenemos aquí CRUD, la C de create
que sería crear, la R de leer, la U de actualizar, bueno de update, que significa en español actualizar
y la D de delete que significa eliminar.
[07:08] Entonces tenemos aquí el CRUD. Y lo que también tenemos por otro lado son los métodos
HTTP con los cuales vamos a generar estas acciones. Es decir, para create tenemos el método post,
para leer tenemos el método get, para actualizar tenemos el método put y el método patch y para
delete no se molestaron tanto, simplemente se llama delete. Entonces tenemos esta http.open que va
recibir dos parametros, como te comentaba.
[07:48] El primero, el método, que puede ser cualquiera de estos, y el segundo, la URL. ¿Qué es lo
que queremos entonces? El primer método. Va a ser get, que es obtener. El segundo parámetro es
"http://Localhost:3000/perfil", que si recuerdas, esto de aquí es exactamente esta URL que tenemos
aquí. Entonces lo que vamos a hacer es, en lugar de que el navegador se encargue de obtener la
información, vamos a hacer que JavaScript se encargue de esa tarea.
[08:30] vamos a regresar aquí al código. Aquí lo que hicimos fue abrir y, bueno, utilizar el método
open de http. Ahora lo que nosotros vamos a utilizar después es un http.send que se va a encargar
de enviar la petición. Entonces desde nuestro navegador o desde nuestro proyecto está saliendo
hacia el servidor, que se encuentra en esta URL.
[09:00] Si yo entonces aquí guardo y regreso a mi navegador, vamos a ver qué obtenemos. Al
parecer no tenemos nada diferente. ¿Esto por qué? Porque estamos inicializando la clase, estamos
enviando la petición, pero nosotros aun no tenemos el resultados o la respuesta que nos dio el
servidor.
[09:21] Para eso vamos a utilizar aquí otro método llamado onload, http.onload. Entonces lo que
significa esto es que, una vez que cargues o que termines de recibir una respuesta, vas a ejecutar
esta función. Voy a utilizar un arrow function. Lo que voy a hacer entonces aquí es quitar este
console.log y voy a hacer una constante que se llame data, que va a ser igual a http.response.
[10:02] Entonces voy a poner aquí un console.log(data) y vamos a ver qué sucede. Como puedes
ver, nosotros ya tenemos aquí en el console.log, nuestra información que nos está regresando
nuestro servidor. Entonces nosotros ya vamos a poder ser capaces de utilizar esta información de
aquí para empezar a rellenar la tabla de una manera dinámica. Entonces vamos a dejar hasta aquí
este video y te veo en el siguiente.
plemente instalarla y listo. Debería aparecerte aquí. Muy bien.

Transcripción
[00:00] Vamos a continuar. Nosotros ya tenemos entonces aquí nuestro console.log(data) en el cual
estamos obteniendo la información de este archivo de aquí. Ahora, ¿qué es lo que necesitamos?
Necesitamos generar primero esta estructura en nuestro lista_cliente, esta estructura de aquí.
[00:22] Tenemos un tr en la línea 56 que cierra en la 78. Lo que vamos a hacer entonces es cortar
esto de aquí, lo voy a guardar. Voy a regresar de nuevo aquí, a mi archivo client-service, y justo
hasta arriba lo que voy a hacer es crear una función, en este caso con const, que se va a llamar
crearNuevaLinea. Va a ser simplemente una función así.
[01:00] Vamos a pegar el código HTML, lo vamos a guardar. ¿Qué crees que pase si regresamos al
navegador? Lo que tenemos aquí es un SyntaxError, Unexpected token. Esto nos dice que es en la
línea 2 de nuestro archivo. Si vemos la línea 2 de nuestro archivo client-service es esta parte de
aquí.
[01:22] Lo que necesitamos es poder combinar código HTML con JavaScript, y eso lo vamos a
lograr con los backticks, es decir estas comillas al revés. En caso de que no lo encuentres en tu
teclado, puedes buscarlo así como backticks y deberías de poderlo encontrar ya en Google. Lo
copias y lo pegas.
[01:56] Lo que vamos a hacer entonces es crear aquí una nueva constante que se llame content o
contenido, que va a ser igual a todo esto de aquí. Tenemos ya nuestro tr, nuestro td con la
información, pero lo que quiero aquí es hacer una nueva constante que se llame linea =
document.createElement y le voy a decir de qué tipo va a ser.
[02:29] Bueno, en este caso yo lo que quiero es generar el tr, el puro tr. Lo voy a crear, ya puedo
eliminarlo de aquí, tanto de la etiqueta de apertura como de cierre, voy a guardar. ¿Ahora qué
necesitas entonces? Lo primero es tener esta información, Gabriela y gabriela@alura.com, de
manera dinámica.
[02:57] Es decir, que nosotros podamos recibir la información en esta función y poderla bajar y
utilizarla aquí o incrustarla. Para eso, lo que voy a hacer es escribir aquí (nombre, email). Ahora lo
que voy a hacer aquí es, este nombre, esta variable, quiero que se ponga aquí. No sirve de nada si
yo lo pongo aquí nombre, porque lo va a tomar como si fuera texto. Lo que tendría que hacer es
utilizar el símbolo de dólar ${nombre}. Y ahora sí, si te diste cuenta cambió inclusive de color.
[03:41] Esto porque mi editor ya reconoce que esto de aquí es una variable de JavaScript, entonces
este nombre es este de aquí. De hecho, si yo me pongo acá arriba, ¿qué es lo que pasa? Se
sombrean ambos. Nombre y nombre. Ahora, vamos a hacer lo mismo con email y checa cómo aquí,
en este caso, está como un poco opaco. Y de hecho si me pongo aquí arriba, ¿qué es lo que me
dice? email está declarada pero el valor no está siendo utilizado.
[04:09] Entonces para solucionar eso, lo único que tendríamos que hacer es, aquí en la sección o en
la columna del correo electrónico, voy a hacer lo mismo: ${email}. Ahora, antes de que cerremos
la función, lo que voy a hacer es poner línea, que es nuestro elemento tr, linea.innerHTML=
contenido; y voy a regresar en esta función mi constante línea, que ya debería de ser el código
HTML, llenado con toda esta información.
[04:53] Voy a guardarlo entonces. ¿En dónde es que queremos que se muestre esta información?
Bueno, donde queremos, si nosotros venimos de nuevo aquí al código, queremos que venga aquí, a
tbody. Para eso nosotros tenemos un data atribute, este de aquí, data-table. Voy a venir de nuevo
aquí, al código, lo que voy a hacer es, arriba de la constante HTTP voy a escribir const table =
document.querySelector("[data-table]").
[05:47] Entonces lo que va a hacer esto es recorrer todo el árbol del DOM y obtener este elemento
de aquí. ¿Ahora qué es lo que queremos? Si recuerdas, tenemos data, que es un arreglo, y los
arreglos, como sabes, tienen métodos. El que nosotros vamos a utilizar es .forEach. Vamos a recibir
aquí entonces a un perfil, voy a poner aquí una llave, abro y cierro llaves.
[06:22] Y lo que quiero entonces es: créame entonces aquí una nueva línea,
crearNuevaLinea.inner(perfil.nombre,perfil.email). Después de que lo crea, bueno, vamos a querer
que lo agregue. Entonces después, lo que tendríamos que hacer es const NuevaLinea, va a ser igual
a esto. Y lo que tendríamos que hacer entonces es table.appendChild(nuevaLinea).
[07:12] vamos a guardar, vamos a regresar a nuestro Chrome y vamos a ver qué es lo que tenemos.
Lo que tenemos aquí es un data.forEach is not a function. ¿esto por qué? Yo te comenté que los
arreglos tienen métodos, pero en este caso la respuesta no está siendo un arreglo directamente de
JavaScript. De hecho, para que tengas aquí una idea, poner un console.log de data. Voy a recargar o
esperar que recargue automáticamente.
[07:50] A pesar de que aquí están nuestros corchetes y nuestras llaves y que simula tener la
estructura, realmente lo que nosotros estamos recibiendo es un texto. Por eso de HTTP, que es
Hypertext Transfer Protocol. Es decir, el protocolo de transferencia de hipertexto. Transformar este
texto en código JavaScript o con algo que pueda trabajar JavaScript.
[08:16] Para eso es realmente muy sencillo. Vamos a utilizar aquí JSON, recuerdan, está todo en
mayúscula, punto parse, ¿y qué va a recibir? Nuestro http.response. Entonces lo que va a hacer es:
recibes esto de aquí, ya vimos que es un texto. Ahora lo que va a hacer es dentro de la clase JSON
hay un método que es parse, que justamente lo que nos va a ayudar es a transformarlo. Voy a
guardar. Vamos a regresar a Chrome.
[08:50] Y ahora como puedes ver, ¿qué es lo que tenemos? Bueno, ya no tenemos un texto normal,
sino que ya viene ahora sí con formato JavaScript. Ya hasta cambió de color y también si te diste
cuenta, aquí nosotros ya estamos obteniendo tanto el nombre como el email dinámicamente.
[09:10] Para corroborar puedes venir aquí a db.json, puedes poner tu nombre, yo ahorita lo que voy
a hacer es aquí poner por ejemplo Christian Alura. Voy a guardar, voy a recargar aquí. Ahora ¿qué
es lo que aparece? Pues aquí ya tenemos Christian. Vamos a ver que pasa por ejemplo si yo copio
esto de aquí, pongo aquí a Gabriela.
[09:55] Vamos a poner aquí el id: 2. Guardar. Ya tenemos entonces aquí nuestra tabla que se está
llenando a través de la información que nos está regresando nuestro back end o nuestra API que se
encuentran en localhost:3000. Voy entonces aquí solo a eliminar a Gabriela. Nos quedamos
solamente con uno, para no tener tanto tema. Vamos a guardarlo.
[10:27] Y ahora, lo que tenemos que ver es la parte de anidación, por así decirlo. Imagina que
nosotros queremos que se cargue esta información, hacer una nueva petición, por ejemplo a los
perfiles que se hayan creado en el día de hoy.
[10:51] Entonces lo que tendríamos que hacer es crear aquí un construcción http2 = new
XMLHttpRequest(). De nuevo vamos a abrir nuestro http2.open igual vamos a poner aquí un GET
y vamos a decir que igual "http://localhost:3000/perfil/hoy". Después lo que tendríamos que hacer
es http2.send(); y después http2.onload.
[11:46] ¿Qué es lo que tendríamos? Bueno, de nuevo tener un const data2 =

JSON.parse(http2.response). Y ahora si nosotros pudiéramos hacer esto mismo de crear tal vez una
nueva estructura, ponerlo en otra sección de la página.
[12:11] Pero la idea aquí es que es muy común en las aplicaciones web que se vayan haciendo
peticiones una vez que se termina alguna otra. Es decir, primero haz una, tal vez con la respuesta
que me va a dar la primera petición o mi primera llamada al back, voy a generar otra nueva
petición, y puede que después de tener esta otra respuesta, quiera generar alguna otra petición.
[12:40] Entonces realmente nosotros podemos ir accediendo o irnos adentrando en general por cada
petición que nosotros estamos haciendo. Entonces, te dejo esta problemática, realmente te digo es
muy, muy común y en el siguiente video vamos a ver entonces cómo es que podemos trabajar de
alguna manera más inteligente todo esto. Te veo en el siguiente.
Transcripción
Aquí está el link que les comenté en el video.

[00:00] Bueno, regresando entonces a esta parte que te comentaba de que podemos tener diferentes
funciones anidadas, va a llegar un punto en el cual va a ser demasiado complejo de poder mantener
este código. A esta estructura de programación ya tiene un nombre y la vamos a conocer como
Callback hell, es como el infierno de los callback.
[00:23] Es prácticamente ir anidando funciones sobre funciones, es decir esperar que se complete
una función para después ejecutar alguna otra, que es justamente como podemos ver aquí en esta
imagen. Tenemos una función que en este caso se llama loadLink, la cual va a recibir dos
parámetros principales que es el win, y después una función que se va a ejecutar una vez que se
termine de ejecutar la función.
[00:49] Pero si te das cuenta, lo chistoso es que es la misma función loadLink, loadLink, recibe los
mismos parámetros. Aquí probablemente solo va a cambiar lo que viene siendo la URL del archivo
y recibe como tercer parámetro una función que se va a mandar a llamar a sí misma.
[01:06] No te preocupes o no trates de entender todo este código, solo es de ejemplo. Podríamos
buscar aquí algún otro, por ejemplo aquí este es tal vez para cambiar algún archivo de un disco,
etcétera.
[01:18] Ahora, viéndolo de la manera en la cual nosotros lo estamos haciendo, comunicándonos

con un back end, pues bueno, también podríamos llegar a tener esa estructura en la cual va a ser
muy complejo de poder ir trabajando con diferentes respuestas de nuestra Api, y para esto existe
algo que desarrollaron tal cual los que se encargan de mantener JavaScript llamado Promise.
[01:47] Esta parte de Promise la estoy viendo en la documentación de Mozilla y les voy a dejar en
link en el siguiente para saber más. Y prácticamente lo que nos comentan es que el objeto Promise
es usado para computaciones asíncronas. Aquí está un poco extraña la traducción, pero a lo que
hace referencia es para poder ejecutar funciones de una manera asíncrona, es decir, de que no
tenemos que esperar a obtener el resultado para poder seguir ejecutando nuestro progama.
[02:15] Imagínate que por algún motivo, nosotros estamos mandando a llamar esta información de
aquí. Ya lo estamos mostrando, hasta ahí está superbien. Ahora lo que necesitamos es justamente
obtener la información. Pero por algún motivo tarda 15 segundos en obtener la información.
Imagínate que nuestra plataforma, nuestra página se quede parada por 15 segundos hasta esperar
este resultado o esta información.
[02:38] No es viable. Y de hecho tú lo puedes ver en otros proyectos, otras plataformas. Cuando tú
accedes a alguna página realmente te muestra algo desde el inicio, y si por ejemplo YouTube lo que
te hace es mostrar loaders, inclusive Facebook. Entonces de esa manera nos está mostrando algo en
nuestra plataforma, viendo que estamos esperando la información, pero teniendo en cuenta que es
justamente asíncrona.
[03:06] Ahora vamos a ver cuál es la sintaxis de esta Promise. Como podemos ver, prácticamente
lo que vamos a hacer es un new de la clase Promise. Esta clase Promise lo que va a hacer es recibir
una función, que a su vez va a tener tanto el resolver como el rechazar. Vamos a ver qué es eso.
[03:20] Viniendo un poco más hacia abajo, vamos a tener que la promesa va a tener alguno de estos
estados, el cual puede ser pendiente, el cual va a ser el estado inicial, no cumplida o rechazada.
Ahora, cuando se cumpla, lo que va a hacer es mandar a llamar esta función del resolver. Y en caso
de que sea rechazada por algún motivo de conexión de que nuestro servidor tenga algún problema,
pues bueno, se va a mandar a llamar esa función.
[03:51] Aquí vamos a poder ver que en este diagrama que tenemos nuestra promesa, ¿qué va a
pasar por ejemplo cuando se complete? Podríamos acceder al método then. Then, traducido al
español, sería algo así como entonces por así decirlo, entonces esta promesa, ejecútala. Y una vez
que tengas o que la hayas completado, entonces haz esta otra cosa.
[04:14] Y en la parte del reject podríamos decir que es justamente cuando hay algún error, y lo que
podríamos hacer entonces es cachar ese error con el .catch y mandar a llamar una función. Hay que
tener en cuenta que nosotros vamos a poder ir anidando todas estas promesas. No es que solamente
puedas hacer una y ahí se quede.
[04:35] Entonces, ten en cuenta justamente que vas a poder ir teniendo diferentes anidaciones, y de
hecho si nosotros venimos un poco hacia acá abajo vamos a poder ver que también tenemos este, el
promise.all, el cual vamos a poder ir anidando diferentes promesas y poderlas ejecutar o saber
cuándo se terminan de ejecutar todas esas promesas.
[04:56] Con promise.race lo que vamos a hacer entonces es regresar a nuestro código y hacer la
implementación de esta parte del Promise. Lo que voy a hacer es venir al código, y si te das cuenta
nosotros tenemos esta parte de, bueno, creamos nuestra conexión de HTTP, abrimos, obtenemos,
decimos que va a ser con el método get, tenemos cuál va a ser la URL, mandamos la llamada.
[05:20] Y una vez que se carga, pues bueno, tenemos todo esto de aquí. Lo primero que voy a hacer
es de la línea 54 a la 59 en este caso voy a eliminarlo, porque era solo de ejemplo, voy a guardar. Si
regresamos aquí al proyecto, sigue funcionando. ¿Ahora qué es lo que vamos a hacer?
[05:38] Lo que voy a hacer primero es esta parte, la línea 33 de la llamada http = new
XMLHttpRequest lo voy a cortar y lo voy a poner arriba aquí de lo que viene siendo aquí el otro.
Entonces lo voy a pegar aquí. Muy bien. Ahora una vez que tenemos esto de aquí, lo que voy a
hacer es extraer esta parte de data.forEach.
[06:05] Lo voy a quitar de este onload, le voy a dar “Ctrl + X”, por el momento lo voy a poner aquí
afuera y ahora entonces lo que voy a hacer es generar una nueva función que se va a llamar lista
clientes. Ya vamos a ver por qué.
[06:21] Puede inicializar con function, o en mi caso me gusta más con esta parte de const y le voy a
llamar listaClientes. Esto va a ser igual a arrow function. Lo que voy a hacer entonces es crear una
constante que se llama promise y este promise va a ser igual a new Promise, recuerda que es la
clase para poder trabajar con promesas.
[06:46] También, recuerda que vimos que va a recibir una función, va a recibir function(resolve,
reject) que se puede mandar a llamar. Sin embargo, a mí me gusta más trabajar con lo que viene
siendo el arrow function, entonces queda a tu criterio pero para que sepas que se puede trabajar de
las dos maneras. Muy bien.
[07:12] ¿Ahora entonces qué vamos a hacer? Con esto, lo que estamos haciendo prácticamente es
generar una promesa. Yo lo que voy a querer es retornar esta promise. Ahora, dentro de lo que
viene siendo la promesa, lo que voy a hacer es primero generar esta parte del const http.
[07:32] También esta parte. De hecho lo que voy a hacer es prácticamente seleccionar todo esto de
aquí, lo voy a cortar y lo voy a poner dentro de la promise. Lo vamos a guardar. Ahora, ¿qué es lo
que queremos? Prácticamente nosotros lo que vamos a hacer es en la parte de nuestro onload,
vamos a tener esto de aquí. De hecho le voy a poner en lugar de data le voy a poner response.
[08:04] Este console.log(data) lo podemos quitar de aquí. ¿Ahora qué es lo que queremos? Si
recuerdas, esta parte del response vamos a tener que regresarlo como tal dentro de la parte de
resolve o de reject. En este caso, lo primero que me interesa es verificar cuál es el estado o el
estatus de la llamada HTTP.
[08:26] Si recuerdas, o en caso de que no lo conozcas, tenemos ciertos status dentro de nuestro
protocolo HTTP. Tenemos los que van en número 100, 200, 300, 400 y 500. Prácticamente lo que
quiero es verificar si http.status es mayor o igual a 400. Esto lo que significa es que hay un error en
nuestra petición.
[08:53] Para esto voy entonces a mandar llamar esta función reject. Reject y le puedo pasar
inclusive aquí mismo response. Y en caso de que no sea mayor a 400, significa entonces que voy a
poder poner este else y voy a poder decir entonces que el resolve es exitoso, es decir, no importa tal
vez el status, nosotros vamos a poder decir que se ejecutó satisfactoriamente nuestra función.
[09:20] Vamos a repasar entonces. Lo primero que estamos haciendo aquí con esta promise cuando
mandamos a llamar a la función listaClientes, vamos a generar una constante promise que va a
retornar o va a ser igual a lo que nos regresa una nueva instancia de promise. Es decir, esta clase,
que prácticamente lo que estamos indicando es que va a ser una función asíncrona.
[09:42] Nosotros sabemos que existe, sin embargo no vamos a esperar a que se termine de ejecutar
para poder seguir ejecutando nuestro demás código. Esto está encapsulado. Una vez que tenemos
esta parte de nuestra clase, vamos a generar un nuevo XMLHttpRequest para poder justamente
tener la conexión con nuestro back end, nuestra api.
[10:06] Tenemos aquí el método get, tenemos aquí cuál es la URL, nos conectamos o hacemos el
envío de esta petición a nuestro servidor, y una vez que se ejecute, esta parte del http.onload lo que
vamos a hacer es JSON.parse, es decir vamos a convertir la respuesta de HTTP que nos obtuvimos
aquí para poder obtener un objeto.
[10:30] Una vez que tenemos ese objeto, también vamos a hacer la verificación del status que
tenemos en esta llamada. Si es mayor a 400, nosotros sabemos que hubo algún error. ¿Cuál? No
sabemos. Sin embargo vamos a decir que esta promesa de aquí se va a mandar a llamar a este reject
diciendo que hubo algún error, y en caso de que no sea mayor a 400, vamos a mandar a llamar esta
otra función la cual nos va a regresar justamente la información que tenemos en ese response.
[11:03] Vamos a ver entonces cómo es que está quedando. Lo que voy a hacer es voy a comentar
esto de aquí y voy a super rápido venir a esta parte y decir, de hecho aquí, listaClientes y lo voy a
mandar a llamar. Voy a guardar, vamos a regresar a nuestro proyecto, no hay nada, eso está bien,
no tenemos la información. Vamos a venir a esta parte de la consola.
[11:42] No tenemos nada. Pero vamos a ver qué sucede si hago console.log(listaClientes); vamos a
guardar, y ahora como puedes ver, tenemos este promise y nos está comentando que está primero
pendiente, sin embargo ya tenemos la información. Aquí en esta parte. ¿Qué necesitamos?
[12:05] Si regresamos a nuestro ejemplo que tenemos aquí, nosotros, dejen ver aquí abajo, aquí
tenemos lo que viene siendo el .then y el .catch. Ahora entonces, ya que lo tenemos, vamos a hacer
entonces es decir ya vimos que es una promesa, entonces voy a quitar esto de aquí, voy a poner
un .then que va a ser la función que se va a ejecutar en caso de que tenga la información.
[12:38] Lo que voy a obtener prácticamente es la data. Voy a poner rápido un console.log(data);
vamos a venir de nuevo para acá. Como puedes ver, tenemos aquí nuestro arreglo de la
información. Ahora quiero que entiendas esta parte. Esta parte del response, es decir la respuesta
que tenemos, una vez que sale de lo que viene siendo nuestra promesa, se va a convertir en data.
[13:11] Entonces puedes tú darle cualquier nombre, puede ser información puede ser cliente, puede
ser cualquier cosa. Pero quiero que entiendas cómo se manda a llamar este resolve, es decir, se
ejecutó satisfactoriamente esta llamada, entonces la información que yo obtengo aquí es la que voy
a regresar y una vez que tenemos este then, es la que va a obtener el nombre de data.
[13:35] Ahora bueno, ya una vez que tenemos eso, basta solamente cortar esto de aquí y pegarlo
aquí. Voy a descomentarlo, vamos a guardar, vamos a regresar aquí, y como puedes ver, seguimos
teniendo el mismo resultado. Ahora bien, ya lo último que tal vez podríamos hacer es simplemente
poner un .catch en caso de que exista tal vez algún error.
[14:02] Y esto, pues bueno, simplemente tendríamos la parte del error aquí, y podríamos inclusive
tal vez poner un alert(“Ocurrió un error”) Entonces bueno, voy a recargar aquí. Sigue funcionando.
Como te comentaba, te voy a dejar este link para que puedas ver un poco más sobre esta parte de
las promesas, creo que es un tema muy importante.
[14:35] Y a pesar de que ya existen maneras más novedosas, por así decirlo, de poder trabajar con
promesas, sí considero que es muy, muy importante que entiendas cómo funciona esto, porque al
final de cuentas lo que vamos a ver en el siguiente módulo por detrás es una abstracción de todo
esto que nosotros acabamos de realizar, de trabajar con lo que viene siendo generar nuevas
promesas, resolve, reject, todo eso.
[15:00] Entonces bueno, vamos a dejar hasta aquí este módulo y te veo en el siguiente.
10Promise.All
PRÓXIMA ACTIVIDAD


Ya sabemos como callback hell dificulta nuestra vida cuando hablamos de manutención y
complejidad de código, como en este ejemplo abajo, donde tenemos varias funciones auxiliares una
dentro de la otra para ejecutar el movimiento de un personaje:
moverPersonaje(‘100’, ‘Izquierda’, function() {
moverPersonaje(‘800’, ‘Derecha’, function() {
moverPersonaje(‘10’, ‘Derecha’, function() {
})
})
})
})
})COPIA EL CÓDIGO
Callback hell termina siendo necesario en esos casos ya que de esa manera garantizamos que la
segunda función solamente será disparada una vez que la primera es concluida, y así sigue, ya que
en ese escenario de ejemplo estamos trabajando con funciones asíncronas para mover el personaje.
Vimos también que una alternativa para dejar el código más “limpio” es utilizar una Promise. Con
el regreso de un objeto de promesa, podemos encadenar el .then() garantizando la secuencia de la
ejecución.
moverPersonaje(‘100’, ‘Izquierda’)
.then(() => moverPersonaje(‘800’, ‘Derecha’))
.then(() => moverPersonaje(‘200’, ‘Izquierda’))
.then(() => moverPersonaje(‘10’, ‘Derecha’ ))
.then(() => moverPersonaje(‘60’, ‘Izquierda’ ))COPIA EL CÓDIGO
Ese escenario donde hacemos varias requisiciones que son dependientes una de la otra es muy
común, y en ese escenario podemos hacer el uso del método .all de la Promise. Pasando cada una
de las funciones dentro de un arreglo como argumento de la Promise.all podemos ejecutar todas
sus funciones en orden sin la necesidad de encadenar varios .then().
Promise.all([
moverPersonaje(‘100’, ‘Izquierda’),
moverPersonaje(‘800’, ‘Derecha’),
moverPersonaje(‘200’, ‘Izquierda’),
moverPersonaje(10, ‘Izquierda’),
moverPersonaje(‘60’, ‘Izquierda’)
])
.then(...)COPIA EL CÓDIGO
El Promise.all ejecutará todas las llamadas en el orden y regresará una respuesta que podrá ser
utilizada en el .then.
11Haga lo que hicimos en aula
PRÓXIMA ACTIVIDAD


Practicar ayuda mucho en el aprendizaje de un nuevo concepto, es muy importante que

implementes lo que fue presentado en esta clase.
VER OPINIÓN DEL INSTRUCTOR
Opinión del instructor



Siga con tus estudios y si tienes alguna duda puedes escribirnos en nuestro foro.
12Lo que aprendimos
PRÓXIMA ACTIVIDAD


Lo que aprendimos en esta aula:

 Hacer requisiciones utilizando xmlhttprequest.
 Lidias con las promises.
 Hacer una requisición http utilizando xmlhttprequest para buscar todos los clientes del
servidor.
 Refactorizar el código utilizando promises mejorando su lectura.
 Utilizar template literals para crear un template html.
01Proyecto del aula anterior
PRÓXIMA ACTIVIDAD


¿Comenzando en esta etapa? Aquí puedes descargar los archivos del proyecto que hemos avanzado
hasta el aula anterior.
Descargue los archivos en Github o haga clic aquí para descargarlos directamente.
Transcripción
[00:00] Okay, vamos a ver entonces en este módulo Fetch API. Como te comentaba esta parte de
trabajar con promesas, trabajar con peticiones hacia un servidor, es muy común. Entonces, a pesar
de que solucionamos o se soluciona de alguna manera el tener un callback head, de tener mucho
código adentro de funciones y que se van a llamar una y otra vez o querer trabajar con la respuesta
de una petición, sigue siendo demasiado código.
[00:32] Vamos a ver. O sea, solo para realizar una llamada al servidor, tenemos de la línea 42 a la
línea 57. Todo esto dejó pensando a los programadores de que pudiera tener o pudiera haber una
manera más eficaz de trabajar con promesas y es por eso que apareció algo llamado Fetch API. Este
Fetch API es simplemente una función que ya viene nativa en el navegador.
[01:05] Entonces nosotros vamos a poder reutilizar. Lo que voy hacer aquí es eliminar todo esto de
aquí, de la línea 44 a la 59. ¿Recuerda cuántas líneas son? Y lo que voy a hacer entonces aquí, en
mi función ListaClientes, es escribir return fetch, aquí viene el autocompletado. Voy a abrir y cerrar
paréntesis y lo que va a recibir es una URL.
[01:35] ¿Recuerdas cuál era? localhost:3000/perfil. Así como nosotros entonces tenemos este then,
nosotros aquí tenemos otro then. ¿Por qué? Porque por adentro lo que nos está regresando esta
función fetch, es una promesa.
[01:55] Entonces vamos a poder acceder a then. Vamos a tener acceso a la respuesta. Bueno,
respuesta. Y ahora, si recuerdas, nosotros utilizábamos JSON.parse para darle el formato de JSON,
para poderlo trabajar justamente dentro de JavaScript, porque sino nos mandaba un error de que
data.forEach no podía ser, más bien .forEach no pertenecía a data, porque era un texto.
[02:28] Entonces, así como tenemos JSON.parse en este tipo de estructura, vamos a regresar un
respuesta.json, que es una función. Que lo que va a hacer es hacer, a mi respuesta, darle un formato
de JSON. Ya vamos a poder trabajar con él. Ahora cómo tendríamos que verlo es, primero realiza
aquí o abre una conexión a esta URL.
[02:59] Va a generar una promesa. Una vez que se complete esa promesa, entonces la vamos a
recibir aquí y la vamos a transformar en formato JSON. Una vez que se transforme o que tenga
aplicado este punto JSON, ahora sí vamos a poder obtener o tener acceso a data.
[03:21] Vamos a guardar, vamos a regresar a nuestro navegador. Tenemos el mismo resultado.
Entonces, checa cómo bajamos de la 44 a la 59, a tener solo tres líneas, y de hecho podemos
hacerlo en una sola línea. Ahorita vamos a ver eso. Como te comentaba, tenemos aquí fetch.
[03:49] Tenemos una URL pero no le estamos definiendo en esta parte el método. Tienes que tener
en cuenta que cuando viene así, automáticamente fetch va a tomar como método Http GET.
[04:05] En el transcurso del curso vamos a ver cómo definir o como indicar la fetch que queremos
utilizar algún otro método. Puede ser post, put, delete, cualquiera. Te había comentado que todo
esto de aquí, o sea de la línea 43 a la 45 realmente, todo esto lo podemos hacer en una sola línea sin
necesidad de tener siquiera los return. ¿Cómo vamos a hacer eso? Vamos a empezar primero por
este respuesta.json.
[04:37] Tienes que tener en cuenta que nosotros cuando tenemos funciones podemos regresar a
algo sin necesidad de especificarlo. ¿Cómo hacemos esto? Es simplemente quitar las llaves en
general. Aquí ya me parece que return no está, no lo acepta mi Visual Studio Code. Lo que puedo
hacer aquí es simplemente ponerlo en una línea.
[05:10] Entonces en este caso, como es una operación muy sencilla, lo que nosotros queremos es
que ejecute esto. Y ya internamente JavaScript sabe que aquí es lo que se va a regresar. Entonces
voy a guardar. Verifica que a pesar de que yo lo guardé, mi linter o la herramienta que se encarga
de darle formato a mi código, me lo puso aquí abajo, pero verifica que ya no tenemos las llaves.
[05:35] Voy a regresar acá, seguimos teniendo el mismo resultado. Y así como nosotros entonces
nos eliminamos estas llaves, para que veas que sí puede ser más visual, vamos a eliminar estas
otras. Aquí me aparece que return no lo está aceptando y listo.
[05:56] Entonces de todas las líneas que nosotros teníamos, realmente podemos trabajar esta parte
de comunicarnos con un servidor. Solo con esto, solo con una línea. Lo voy a guardar, lo puso
debajo en la línea 43, pero eso es por tema de mi Visual Studio Code. Voy a regresar a mi
navegador, recargar y seguimos obteniendo el mismo resultado.
[06:19] Entonces, esta sería una manera más sencilla de poder comunicarnos con nuestro servidor.
Todo lo manejamos solo con una línea realmente. Pero bueno, vamos a ver un poco el código y si
te puedes dar cuenta, nosotros tenemos aquí una función que se llama crear nueva línea, que tiene
código HTML, le incrustamos por ahí el nombre, el correo electrónico, seleccionamos aquí la tabla
donde va a ir el contenido.
[06:51] Tenemos también nuestra llamada a nuestro back y trabajamos solamente con mostrar la
información o generarlo por así decirlo. Creamos una nueva línea, le mandamos el nombre, le
mandamos el email, lo agregamos a la tabla y listo. Entonces, lo que vamos a ver en el siguiente
video es cómo separar responsabilidades para que quede el códiTranscripción
[00:00] Muy bien. Continuando con esto, si tú seguiste hasta aquí conmigo desde el inicio la parte
de inicio de Studio Code, dándole clic derecho, abrir con Live Server, no deberías de tener ningún
problema. Pero si por algún motivo no seguiste el curso desde el inicio o estás utilizando alguna
otra herramienta como editor de código, posiblemente lo que hiciste fue venir aquí a los archivos,
déjame abrir aquí una nueva terminal para simular lo que alguien pudo haber hecho.
[00:46] Posiblemente lo único que hiciste fue darle doble clic desde tu explorador de archivos y
tendrías, bueno, visualmente sí estás obteniendo el mismo resultado, pero no lo estás mostrando
desde un servidor. Entonces, si nosotros nos ponemos a inspeccionar esto de aquí, vamos a ver qué
sucede. Vamos a la consola. Nos comenta aquí que ha sido bloqueada la comunicación a nuestro
archivo client.controller debido a políticas de CORS.
[01:23] Es decir, por defecto el navegador no deja que te comuniques directamente con otros
archivos o con otro servidores si no eres tú mismo. Entonces, para eso lo que vamos a tener que
hacer en caso de que te haya aparecido este error, es utilizar una librería. Vamos a buscarla aquí,
que se llama browser sync. Vamos a darle clic y aquí es donde tenemos el comando que
necesitábamos.
[02:04] Como te puedes dar cuenta, igual utiliza npm y de hecho, como comentario, muchas de las
herramientas que tú vas a utilizar a lo largo de tu carrera en caso de que te quieras dedicar a ser
programador front end, muchas herramientas se descargan con npm. Entonces, es bueno tener ya
desde una vez, el concepto de que nmp es el Node Package Manager, que nos va a ayudar a instalar
software, dependencias, librerías dentro de nuestra computadora.
[02:32] Yo voy a copiar este comando. Si yo escribo aquí browser-sync vamos a ver qué sale. Lo
que obtengo aquí es un resultado. En caso en que tú quieras o de que tú lo estés ejecutando,
posiblemente te va a mandar que browser-sync no existe, no existe ese comando. Lo único que
tendrías que hacer es copiarlo, npm install -g. Recuerda que -g es para instalarlo de manera global,
y el nombre del paquete que es browser-sync.
[03:04] Le das enter, esperas a que lo descargue y ya deberías de tener este mismo resultado.
Ahora, lo que vamos a hacer entonces es, gracias a esta librería browser-sync, simular que esto es
un servidor. Para eso simplemente vean aquí el archivo README.md, en la línea 5 tenemos este
comando. Puedes copiarlo, vamos a pegarlo. Vamos a ver qué sucede.
[03:35] Estamos obteniendo el mismo resultado, pero si te das cuenta, lo que tenemos aquí es, en la
URL localhost:5000. Es decir, ya existe dentro de nuestro servidor local. A diferencia de si vamos a
la otra vista, aquí lo que tengo realmente es la ruta, de donde se encuentra mi archivo.
[03:59] Entonces esa sería la diferencia y aquí yo ya obtengo la información. Entonces estoy
simulando un servidor y, gracias a eso, es que puedo ya trabajar sin problema y que no me aparezca
ningún error de CORS. Vamos simplemente a revisar rápido este comando que pusimos aquí, y lo
que estamos diciendo es browser-sync, el nombre de la librería, start.
[04:22] De hecho aquí viene en los comandos que están disponibles. Después lo que le estamos
mandando aquí es la opción server. Después decirle file, que en este caso, todo este punto lo que va
a hacer referencia y solo para terminar, lo que tenemos realmente a grandes rasgos es nuestra
librería, que le estamos diciendo aquí el puerto donde queremos que se ejecute, el startPath, que es
el archivo, por así decirlo, donde se va a encontrar o el que va a desplegar en el servidor.
[04:56] En este caso, le estamos diciendo que es screens y después lista_cliente. Recuerda que si
quieres saber más sobre todos los comandos que estamos viendo, simplemente puedes leer la
documentación. Todo esto de aquí debería de venir muy bien explicado en la documentación aquí
de browser-sync. Bueno, también te sirve para archivos css y algunas otras cosas.
DISCUTIR EN EL FORO
go más organizado.
04Fetch API
PRÓXIMA ACTIVIDAD


Les dejamos un artículo para que puedan conocer un poco más sobre el uso de Fetch con
JavaScript.
 Empezando con fetch en Javascript
 Transcripción
 [00:00] Muy bien, ahora entonces como te había comentado, vamos a separar nuestro código
para que se vea mejor o para que sea más entendible. Si nosotros vemos aquí, nuestra
función crearNuevaLinea, realmente solo se encarga de recibir dos parámetros, generar un
template y lo regresa.
 [00:20] Aquí tenemos esta constante que se va a encargar de seleccionar dónde es que se va
a incluir esta información. Por último mandamos a llamar nuestro listaClientes y trabajamos
con la respuesta. Por cada cliente o por cada perfil, lo que nosotros vamos haciendo es
generar una nueva línea y la vamos agregando a nuestra tabla.
 [00:42] Lo que voy a hacer entonces aquí es, a la altura de screens y de services, voy a
generar aquí una carpeta que se llame controllers. Voy a tener aquí entonces un archivo que
se llame client.controller.js. Realmente puedes ponerle punto, guión, realmente esto no tiene
que ser exactamente igual que esto, no hay ningún problema. Yo lo voy a llamar así.
 [01:12] Le voy a dar entonces aquí un enter. Ya tenemos aquí el archivo. Lo que voy a hacer
es, dentro de mi client-service, voy a cortar todo esto de aquí. Lo voy a cortar, lo voy a pegar
aquí en este nuevo archivo, lo voy a guardar. Vamos a venir acá y también esta parte de
ListaClientes, esto de aquí. Lo voy a pegar debajo. Muy bien. Lo que voy hacer es
simplemente eliminar esto de aquí.
 [01:48] También esta parte de aquí, son comentarios pero bueno, al final de cuenta, eran
anteriores. Los voy a eliminar. En este archivo lo que nosotros vamos a tener, es esta función
que se va a encargar de hacer la comunicación con el servidor, recibir la respuesta y después
simplemente generarla en un JSON. Mientras que en el otro archivo, lo que vamos a hacer
aquí es trabajar ya con toda esa interacción entre JavaScript y el HTML. Entonces bueno,
tenemos ya estos dos archivos.
 [02:22] Lo que voy a hacer es crear, exportar una constante que se llame clientServices. Van
a ser varios, por lo tanto voy a aquí a crear un objeto y voy a pegar esto de aquí.
Posiblemente tú lo que has visto en algún otro tutorial o investigando, es que existe muchas
veces esto.
 [02:51] Pero con las nuevas versiones de JavaScript, basta con solamente definirlo una vez
para definir tanto la llave como el valor, que en este caso la llave es listaClientes, es cómo lo
vamos a utilizar en otros archivos y el valor es esta función de aquí.
 [03:07] Ya tenemos exportada esta función o este objeto con la función listaClientes. Si
recuerdas aquí en nuestra carpeta screens, en lista_cliente, vamos a bajar y lo que nosotros
teníamos referencia era hacia este archivo. Ahora ya no queremos esa referencia. Lo que
nosotros queremos es acceder a client.controller.js. Para eso voy a salir aquí una carpeta,
acceder a controllers y acceder a client.controller.js.
 [03:49] No olvides que hay que definirle aquí que el tipo va a ser un module, para que
podamos trabajar con los exports y los imports. Entonces una vez que nosotros ya tenemos
exportada esta función de aquí, lo que queremos es ahora importarla aquí. ¿Por qué? Porque
aquí es donde nosotros la estamos mandando a llamar.
 [04:16] Para eso, lo que vamos a hacer es describir import, vamos a abrir y cerrar llaves,
vamos a poner el nombre, clientServices y vamos a decirle de dónde es que viene. Vamos a
salir a una carpeta, vamos a acceder a nuestra carpeta service y está en el archivo cliente-
service.js. Vamos a ver que sucede aquí.
 [04:46] Entonces, si yo pongo aquí un console.log(clientServices); vamos a ver qué sucede.
Voy a regresar a mi navegador. Vamos a abrir la consola, esperamos aquí. Aquí tenemos
nuestro console.log y aquí tenemos un error de que listaClientes no está definido. ¿Qué es lo
que tenemos entonces en este objeto? Bueno, aquí es donde tenemos el listaClientes.
 [05:19] Entonces para nosotros poder acceder, lo único que tendríamos que hacer es escribir
clientServices.listaClientes(). De hecho hasta aquí aparece ya como autocompletado.
Entonces voy a guardar, voy a regresar aquí. Sigue funcionando.
 [05:37] Ya tenemos entonces bien separado tanto el código o las funciones que se van a
encargar de generar toda la estructura HTML, de recibir los datos, y por otro lado tenemos
otro archivo, con otra función, que se va a encargar simplemente de hacer la comunicación
con nuestro servidor que sería este client-service.
 [05:59] Muy bien, entonces como pudimos ver, ya prácticamente estamos avanzando muy
bien. Ya tenemos más conocimiento sobre cómo comunicarnos con nuestros servidores,
como utilizar fetch, pero solo lo hemos visto de una manera práctica. En el siguiente video
vamos a ver un poco de manera teórica cómo es que funciona por detrás la parte de las
promesas y fetch. Entonces te veo en el siguiente video.
 Transcripción
 [00:00] Vamos a parar un poco de nuestro proyecto y lo que vamos a ver ahora es un poco
de teoría. Nosotros anteriormente podríamos decir que realmente trabajábamos con
JavaScript. Hace 10 años realmente las necesidades que tenía el entorno del navegador con
JavaScript eran muy sencillas. Realmente no tenía tanta interacción el usuario como lo tiene
hoy en día.
 [00:30] Nosotros hoy en día tenemos tiempo real, muchas funcionalidades, tenemos
empresas millonarias que están basadas en un producto digital. Entonces, conforme ha
estado cambiando y evolucionando esta parte del mercado, JavaScript también lo ha hecho,
tanto con empresas que dependen JavaScript como de programadores que se encargan de ir
agregando nuevas tecnologías o nuevas funcionalidades al JavaScript.
 [00:54] Entonces hoy en día nosotros ya no solamente tenemos JavaScript, tenemos un
ambiente de JavaScript. Vamos a continuar aquí. Muy bien, entonces lo que nosotros
tenemos dentro de este ambiente JavaScript es una pila de ejecución. Esta pila de ejecución
lo que hace es ejecutar el código JavaScript. También tenemos una pila de memoria.
 [01:19] Esta pila de memoria lo que va a hacer es almacenar el nombre de las variables, el
nombre de las funciones, el nombre de objetos que nosotros vayamos declarando. También
tenemos un motor JavaScript. Lo que va a hacer es tomar nuestro código, que nosotros
estamos escribiendo y transformarlo en código que pueda entender la máquina.
 [01:38] Como te comentaba, actualmente el ambiente JavaScript va más allá de solamente
pequeñas funcionalidades. A pesar de que nosotros hemos estado utilizando por ejemplo
document.querySelector, hemos utilizado también en algunos otros curso localesStorage, ya
no es solamente Javascript, sino que todas esta funcionalidades pertenecen a la web API.
 [02:02] Es decir, son nuevas funciones que se han ido agregando en este caso al navegador.
Tenemos como algunos ejemplos, aparte de fetch API que nos va a ayudar a conectarnos con
un servidor, a tener información, enviar información. También tenemos la parte de
almacenamiento. Tenemos local storage, tenemos session storage y también tenemos la parte
de audio para poder trabajar, como su nombre lo indica, con audio dentro de nuestro
navegador.
 [02:30] Tenemos algunas otras funcionalidades que se han agregado en esta web API. Muy
bien, entonces hay que tener en cuenta que lo primero que se va a ejecutar, cada vez que
nosotros inicializamos un programa en nuestro navegador, es realmente puro código de
JavaScript, lo que es por entre comillas, decirlo nativo.
 [02:54] Entonces lo que va a ser algo que se llama Event loop, Event loop lo que va a hacer
es verificar qué parte del código pertenece a JavaScript nativo, y cuál pertenece a la fila de
funciones de la web de API, como te comentaba. Pueden ser funciones fetch, parte del
almacenamiento del audio, etcétera.
 [03:23] También, si recuerdas, hemos estado trabajando con promesas, entonces también
vamos a tener una fila específica para promesas. ¿Qué es lo que va a ser entonces Event
loop? Lo que va a hacer es leer el código JavaScript de arriba hacia abajo. Lo que va a hacer
es leer cierta porción de código, lo va a poner en la pila de ejecución, va a verificar si es
código puramente JavaScript.
 [03:47] Si es así, lo va a ejecutar. En caso en que no sea JavaScript nativo y pertenezca a
web API, lo va a tomar y lo va a agregar a nuestra fila de funciones de la web API. También
lo mismo pasa con las promesas. En caso en que haga referencia a una promesa, lo que va a
ser es mandarlo a la fila de promesas.
 [04:06] Una vez que Event loop termina de cargar todo lo que ven en la parte de pila la
ejecución, lo que va a hacer es, ya verifiqué que no existe nada en esta pila de ejecución, voy
entonces a empezar a tomar los archivos que vienen en las diferentes otras filas, como la fila
de funciones, la de promesas y las va a ir poniendo dentro de nuestra pila de ejecución, y así
sucesivamente hasta que nuestra pila de ejecución se quede vacía.
 [04:33] Esto indicaría que nuestro código se ha ejecutado completamente. Esto es más o
menos una parte de la teoría. Vamos ahora a una página muy interesante, en la cual vamos a
poder ver de una manera más visual todo esto que te acabo de comentar. Vamos entonces.
 [04:54] Muy bien, entonces estoy aquí en esta página, voy a poner el link para que puedas
acceder igual si quieres ver un poco más a detalle toda esta parte del Event loop, pues bueno,
lo vas a poder tener. Mientras yo voy a cerrar este modal. Bueno, entonces vamos a verificar
el código.
 [05:15] Lo que tenemos aquí de la línea 1 a la línea 5, es una porción de código que lo que
hace es mandar a llamar una característica o con este símbolo de peso, yo ya sé que hace
referencia a una librería llamada JQuery. Anteriormente era muy utilizada, pero ahora con la
nueva aparición de tecnologías como React, Vue, Angular ya no está siendo tanto, sin
embargo, para este ejemplo está de esta manera.
 [05:41] Esto prácticamente es como un document.querySelector, en el cual van a recibir tres
parámetros. El primer el elemento en este caso es el botón, que hace referencia a este botón
de aquí. Después el segundo parámetro, click, que es el tipo de evento, es como un
document.addEventListener y después tenemos nuestro callback, es decir, la función que se
va a ejecutar una vez que el usuario le haya dado clic al botón que estamos seleccionando.
 [06:11] Dentro tenemos una función que se llama, setTimeout. Esta función va a recibir
nuestros parámetros. El primero es una función llamada timer, que lo único que va a hacer es
hacer un console.log de 'You clicked the button!'. El segundo parámetro lo que va a hacer es
ejecutarlo 2000 milisegundos después, o bien 2 segundos. Tenemos después en la línea 7 un
simple console.log('Hi').
 [06:39] De nuevo aquí, en la línea 9 tenemos otro set.Timeout. De nuevo tiene una función
que se llama Timeout, un console.log('Click the button'); y se va a ejecutar 5000
milisegundos después, o 5 segundos. Por último, en nuestra línea 13 tenemos un simple
console.log("Welcome to the loupe"). Lo que voy a hacer entonces es, salvar y ejecutar el
programa y le voy a poner pausa. Muy bien. Tenemos la pausa.
 [07:07] Lo que tenemos aquí seleccionado es el código. Entonces, ahorita está en nuestra pila
de ejecución. Lo que va a hacer entonces es verificar si es código normal, JavaScript o bien
si pertenece a la web API. Le voy a dar en resume. Pausa. Lo que hice entonces en lugar de
ejecutarlo, fue mandarlo a web API. Aquí lo tenemos representado. De nuevo le voy a dar
clic en resume.
 [07:35] Tenemos un console.log("Hi!"); lo tenemos aquí en nuestra pila de ejecución. Le voy
a dar aquí en este botón. Lo ejecuto, nosotros no lo estamos viendo pero simplemente lo
ejecuto. Vamos a ver si en inspeccionar lo alcanzamos a ver. Aquí tenemos nuestro Hi! Voy
a cerrarlo aquí.
 [08:02] Después vamos a tener de nuevo, en nuestra pila de ejecución, esta función.
Entonces va a identificar lo que no es código JavaScript y sino que pertenece a web API.
Entonces voy a dar aquí en resume, pausa. Lo que hizo entonces es, leyó el código, lo que
hizo entonces fue mandarlo aquí a nuestra cola de funciones. Sí, nuestra cola de funciones.
 [08:31] Y si te das cuenta, aquí tenemos timeout, que es esta parte de aquí, el nombre de la
función. Tenemos de este lado un indicador que va a ir completando un círculo, en este caso
verde, de cuánto tiempo es que le falta para poderse ejecutar.
 [08:46] Por último lo que tenemos aquí es nuestro console.log("Welcome to loupe"); le voy a
dar clic entonces de nuevo a resume, ahí lo ejecutó, seguimos esperando. Aquí se completa
en verde, lo pasó a nuestro callback queue, o nuestra cola de memoria, lo que hizo fue ya
ejecutar el console.log. Aquí sigue estando esta función.
 [09:09] Le voy a dar resume. Muy bien, entonces ya se limpió nuestra pila de ejecución.
Ahora, si nosotros quisiéramos entonces ejecutar esta parte de aquí, necesitamos darle clic
justo a este botón. Le voy a dar clic, aquí lo mando a llamar, está aquí en nuestro callback
queue. Hay que esperar entonces los 5000 milisegundos, los 5 segundos. Le voy a volver a
dar entonces aquí en "click me".
 [09:46] Hay que esperar. Le voy a dar entonces aquí de nuevo en el botón click. Lo mandó a
llamar. Aquí lo mandó a nuestro call stack. Como pudiste ver, se están mandando entonces a
llamar toda esta parte. ¿Qué fue lo que hizo? Una vez que nosotros le dimos clic, mandó a
llamar esta función, mandó después a llamar esta otra función de set.Timeout, que era timer
y esperó 2 segundos para poderlo ejecutar.
 [10:20] Entonces esto sería a grandes rasgos lo que viene siendo el Event loop. De cualquier
manera te voy a dejar más recursos para que puedas leer por tu cuenta en caso que te haya
quedado alguna duda.
 [10:31] Realmente el que entiendas esto te ayuda mucho. Mientras más aprendas sobre cómo
funcionan las cosas, te va a ayudar a mejorar e inclusive profundizarte más en ciertos
conceptos que tal vez no todos los programadores entienden. Entonces vamos a dejar hasta
aquí el video y te veo en el siguiente módulo.
08Link externo
PRÓXIMA ACTIVIDAD


Link:
 Página utilizada para simular el funcionamiento del ambiente en JavaScript
PRÓXIMA ACTIVIDAD






10Lo que aprendimos
PRÓXIMA ACTIVIDAD



 Entender el orden de ejecución del código JavaScript.
 Jalar los datos del servidor utilizando la función fetch api al invés
de xmlhttprequest para modernizar el código.
 Refactorizar las responsabilidades del código pensando en la manutención de la
aplicación en el futuro.
01Proyecto del aula anterior
PRÓXIMA ACTIVIDAD


¿Comenzando en esta etapa? Aquí puedes descargar los archivos del proyecto que hemos avanzado
hasta el aula anterior.
Descargue los archivos en Github o haga clic aquí para descargarlos directamente.
Transcripción
[00:00] Muy bien. Vamos a ver entonces en esta sección cómo crear un nuevo cliente y cómo
eliminarlo. Lo primero que vamos a hacer entonces es venir a nuestra vista de nuevo cliente, le voy
a dar clic. Nos redirecciona y tenemos este formulario. Entonces necesitamos dos cosas. Lo
primero es obtener lo que el usuario ingresa aquí, en estos inputs, tanto el nombre como el email y
al momento de darle clic en registrar, tomar esa información, mandársela a otra función.
[00:33] Esa función, ya lo que debería de hacer es encargarse de comunicarse con nuestro API o
bien con nuestra API que tenemos aquí y hacer el registro de nuestro nuevo cliente. Vamos
entonces primero a generar aquí la función para que tome tanto el nombre como el email. Vamos
entonces a nuestro código. Voy a generar aquí dentro de los controllers, voy a crear un nuevo
archivo que se llame registro.controller.js.
[01:16] Muy bien. Lo primero que necesitamos es vincular este archivo. Lo que vamos a hacer es
venir a nuestro archivo que tenemos aquí dentro de screens, que se llama registrar_cliente. Antes de
que cierre la etiqueta body, lo que voy a hacer es escribir script, tanto la etiqueta que abre como la
que cierra. Voy a poner el src="../controllers/registrocontroller.js".
[01:52] Le vamos a decir que este tipo módulo, esto porque después vamos a generar aquí dentro de
nuestro archivo client-service una nueva función que la vamos a importar, entonces por eso
necesitamos decirle que es de tipo módulo. Voy a guardar, voy a venir a mi archivo
registro.controller y lo primero que necesitamos hacer entonces es obtener o escuchar una vez que
el usuario le da clic al botón.
[02:23] ¿Cómo vamos a hacer eso? Vamos a estar aquí en registrar_cliente y tenemos este data
attribute, que se llama data-form. Nosotros podemos utilizarlo y vamos a escuchar el evento
submit, que es enviar en español. Lo primero que voy a hacer entonces es crear una constante que
se llama formulario = document.querySelector, y le voy a mandar aquí el data attribute.
[02:59] Recuerda, tiene que ir entre corchetes: ("[data-form]"). Ahora vamos a tener nuestra
constante formulario y nosotros podemos ya tener disponibles diferentes métodos. El que queremos
es addEventListener, es decir agregar un escuchador. Recibe aquí dos parámetros. El primero es el
tipo de evento que quiere escuchar, que en este caso va a ser submit y el segund, una función que se
va a disparar una vez que el usuario o que se cumpla esta condición.
[03:35] Pues que el formulario emita el evento submit. Vamos a tener aquí nuestra función y lo que
quiero hacer, tal vez es solo un console.log("formulario"); voy a guardar, voy a regresar a mi
navegador. Si le doy clic aquí en registrar, no me deja avanzar. Necesito completar los campos.
[04:04] Voy a poner aquí Pedro y el email pedro@alura.com. Registrar. Lo que tenemos entonces
es aquí nuestro console.log y si nosotros inspeccionamos aquí ¿que es lo que tenemos? Tenemos
una URL donde dice: ?nombre=Pedro&email=pedro%40alura.com, que es la información que
pusimos aquí.
[04:38] Entonces los formularios tienen un comportamiento ya definido dentro de JavaScript o

dentro del navegador. Lo que nosotros queremos es prevenir que funcione como ya está definido.
Para eso, nosotros aquí recibimos nuestro evento, es decir, el evento tal cual.
[05:01] Dentro de este evento tenemos una propiedad que se llama .preventDefault y lo mandamos
a llamar. Es decir, no queremos que este formulario funcione como normalmente debería. Para eso,
vamos a utilizar este método. Ahora, ya tenemos nuestro evento. Esta función que se mandó a
llamar.
[05:28] Lo que nos interesa es, si vamos a prevenir el cómo funciona tenemos que de alguna
manera obtener la información de estos inputs. ¿Cómo lo vamos a hacer? Hay diferentes maneras.
Una podría ser por ID, pero creo que por conveniencia podríamos utilizar los data attributes.
Entonces primero es data aquí en nombre y el segundo, data-email.
[05:53] Voy a regresar de nuevo aquí a mi registro controller y lo que queremos es después de
prevenir el funcionamiento del formulario, crear una constante que se llame
nombre=document.querySelector y le pasamos el nombre del data attribute, que en este caso es
("[data-nombre]"); eEte tiene que ser igual a este de aquí.
[06:25] Ahora, el tema que nosotros vamos a tener es que si lo dejamos solo así, nosotros vamos a
obtener el elemento completo, es decir el elemento HTML y no es lo que queremos. Lo único que a
nosotros nos interesa realmente es el valor. Entonces, accedemos con .value. Ahora lo que voy a
hacer es lo mismo pero para el correo electrónico o email.
[06:49] Creo la constante email=document.querySelector y va a recibir el data attribute que va a ser

("[data-email)"].value, para obtener el valor. Muy bien, ahora si nosotros entonces hacemos un
console.log tanto del nombre como de email, vamos a ver qué obtenemos. Voy a eliminar este
console.log del formulario. Vamos entonces a venir aquí. Voy a ponerpedro@alura.com, registrar.
[07:30] Ya entonces estamos obteniendo la información, tanto el nombre como el correo

electrónico. ¿Ahora qué es lo que necesitamos? Ya tenemos nosotros entonces capturada la
información, ahora necesitamos delegar la responsabilidad a otra función que reciba esos datos y
que se encargue de enviárselos a nuestro servidor o a nuestro API.
[07:59] Lo que voy a hacer entonces es venir a mi archivo client-service, que está dentro de la
carpeta service y voy a crear una nueva función. Esta función le voy a poner crearCliente. Como te
comentaba, vamos a recibir tanto el nombre como el correo electrónico. Lo voy a poner de una vez.
Ahora, una vez que ya tenemos esto, lo que vamos a necesitar es definir nuestro fetch. ¿Este fetch a
dónde debería de ir?
[08:40] Debería de ser la misma URL: http://localhost:3000/perfil pero ahora, si recuerdas, te

comenté que por defecto si nosotros no le definimos el método con el que tiene que trabajar fetch,
va a utilizar GET. Vamos a ver entonces cómo es que podemos decir la fetch que trabaje con otro
método.
[09:07] Primero va a recibir la URL a la cual se va a conectar y después va a recibir un segundo

parámetro, que va a ser un objeto. En este objeto vamos a definir las demás propiedades de la
llamada. Nosotros vamos a decir aquí cuál va a ser el método o method: En este caso recuerda, en
el CRUD para poder crear un nuevo recurso, vamos a utilizar el método POST.
[09:33] Entonces vamos a poner que queremos que sea POST. Después, dentro de este mismo
objeto, vamos a definirle los encabezados. Estos encabezados es solo como para tener un estándar o
que el servidor sepa qué tipo de archivo es el que va a recibir. Lo que nosotros vamos a poner
entonces es headers y va a ser un nuevo objeto, y dentro de este objeto, vamos a definir el Content-
Type. A este Content-Type le vamos a decir que va a ser un "application/json".
[10:08] Muy bien. Por último le vamos a definir también cuál va a ser el body o el cuerpo, que al
final de cuenta termina siendo un objeto. En este objeto es donde nosotros vamos a poner toda la
información que nosotros queremos que se envíe a través del cuerpo de la petición. Entonces vamos
a poner que queremos el nombre y el correo electrónico. La comunicación http trabaja con texto, lo
que necesitamos ahora es transformar este objeto en texto.
[01:48] ¿Cómo lo hacemos? Utilizando JSON.stringify y vamos a abrir un paréntesis y cerrar otro
paréntesis. Entonces. lo que le estamos mandando aquí ya es un objeto, pero JSON.stringify se va a
encargar de formatearlo en texto para que lo pueda enviar http. Lo que vamos entonces a hacer,
antes de probar todo esto, es si nosotros venimos aquí a nuestro db.json, tenemos tanto el nombre,
el correo electrónico y el id.
[11:32] Este id es como el identificador único para que nosotros tengamos una mejor referencia de
cada uno de nuestros perfiles. Hasta ahorita nosotros no lo estamos recibiendo, si te das cuenta. Si
nosotros pudiéramos tal vez tratar de primero obtener todos los perfiles, verificar cuál es el id más
grande, agregarle uno y asignárselo, para poder ir teniendo un orden.
[12:03] Pero en este caso, para no complicarnos vamos a utilizar una librería llamada UUiD. Voy a
Google y lo que voy a hacer es escribir UUid CDN. Este CDN es lo que nos va a ayudar es a
importar código que alguien más ya construyó, que nosotros no tenemos que estarnos preocupando
y vamos a acceder a través de una URL.
[12:34] Lo que voy a hacer aquí es copiar la URL, voy a abrir una nueva pestaña, la voy a pegar y
si te das cuenta todo esto de aquí es código JavaScript. Un poco raro pero al final de cuenta
funciona y nosotros estamos delegando la responsabilidad de asignar un id único realmente a un
externo. Entonces realmente esta librería es muy, muy utilizada.
[13:00] De hecho si vamos a su cuenta de NPM, vamos a ver cuántas descargas tiene, vamos a
esperar a que cargue. Durante esta semana tuvo 40 millones de descargas, entonces esta librería es
muy utilizada. En este caso tenemos el de NPM, nosotros no vamos a utilizar este comando para
instalarlo, vamos a utilizar el CDN que prácticamente lo único que vamos a hacer es darle clic aquí
en copy script tag. Voy a venir a mi archivo registrar_cliente. Voy a venir aquí abajo.
[13:43] Arriba de mi etiqueta script, donde mando a llamar mi registro controller, lo voy a pegar. Si
te diste cuenta, se pegó, aquí tiene el SRC, que está apuntando a la URL. Lo voy a guardar. Vamos
a venir de nuevo aquí a nuestro proyecto. Al parecer no hay nada diferente. Pero nosotros al
momento de que agregamos la línea del CDN del UUiD, tenemos acceso ya a ese método.
[14:16] Es decir, nosotros podemos escribir en nuestra consola uuid, dDe hecho aquí se está
autocompletando como puedes ver, y vamos a utilizar la versión 4. Abro y cierro paréntesis, le voy
a dar enter. Como puedes darte cuenta nos está generando aquí un identificador único. Voy a darle
flechita hacia arriba para volverlo a generar, le doy enter, y checa cómo ya se generó un nuevo id.
[14:47] Entonces cada vez que nosotros llamamos esta función, nos va a generar un identificador.
Ya estamos delegando la responsabilidad, no tenemos que estarnos peleando que si es 1, que si es 2
y la probabilidades para que se repita un número son muy escasas. Ven nada más la cantidad de
caracteres que tiene. Lo que vamos a hacer es regresar aquí a nuestro código, voy a venir a mi
client-services.
[15:22] Realmente lo que a nosotros nos interesa va a ser el nombre y el correo electrónico. Lo que
vamos a hacer entonces es decirle que también vamos a mandar un id, pero este id en lugar de
recibirlo, lo vamos a generar con esta librería.
[15:36] Vamos a hacer uuid.v4(). Lo voy a guardar. Ahora lo que nosotros necesitamos es
exportarlo, entonces voy a copiar el nombre crearCliente, lo voy a pegar aquí. Voy a venir a
registro_controller, voy a importar ese módulo, import, client-services, verifica o puedes darte
cuenta que aquí ya me esta viniendo una sugerencia de dónde es que puedo importarlo.
[16:19] Entonces Visual Studio Code es lo suficientemente inteligente como para decir o como para
saber de dónde es que puede venir este módulo. Le voy a dar clic y ya me hace el autocompletado
directamente. Vamos a ver entonces qué nosotros necesitamos decir: clientServices, punto, y si
vemos, aquí tenemos de nuevo el autocompletado. ¿Cuál es el método que nos interesa o la acción
que queremos que se ejecute? crearCliente
[16:53] Voy a abrir y cerrar paréntesis y le voy a mandar el nombre y el correo electrónico.
Recuerda que esto es una promesa, por lo tanto nosotros podemos trabajar con el then. Creo que
aquí hubo un tema, aquí me faltó hacer el return. Voy a regresar de nuevo acá, tenemos el then,
vamos a tener la respuesta, vamos a hacer un console.log(respuesta).
[17:36] Vamos a poner de nuevo el catch, en caso de que exista algún error. Lo que nos interesa es
que simplemente nos lo ponga en un console.log. Voy a guardar, voy a regresar a mi navegador y
vamos a hacer la prueba. De hecho aquí le faltó el .js. Ahora lo que vamos a hacer es poner Pedro,
correo electrónico pedro@alura.com, le voy a dar clic en registrar. Aquí tenemos nuestra respuesta.
[18:20] Se volvió a recargar nuestra página, pero si nosotros venimos a nuestro archivo db.json,
vamos a ver que tenemos un nuevo registro. Nosotros no tuvimos que copiarlo o hacer realmente
mucho. Ya directamente Json server se encargó de decir: "okay, estoy recibiendo un método POST,
por lo tanto lo voy a agregar al archivo del cual estoy leyendo la información". Y aquí tenemos
Pedro.
[18:47] Vamos a crear uno nuevo. Antes de crearlo, vamos a hacer esto un poco más bonito o que
tenga una mejor experiencia el usuario. Lo que vamos a hacer, esta respuesta realmente o no nos
interesa en este momento.
[19:08] Tenemos un archivo que se llama registro completado, entonces lo que queremos es, una
vez que se registre y obtengamos la respuesta, redireccióname a esta lista para decirle al usuario,
que el registro se realizó satisfactoriamente. Vamos entonces a decir window, que es un método
que está disponible que es justamente toda la ventana o toda la pantalla. Window.location, que es la
localización.
[19:41] .href. Lo que vamos a hacer aquí es decirle cuál es la ruta que nosotros queremos seguir o
el archivo que queremos llamar. En este caso sería screens/registro_completado.html. Voy a
guardar.. Voy a regresar de nuevo aquí a mi navegador. El nombre vamos a crear no sé, Miriam,
vamos a poner miriam@alura.com, vamos a dar clic en registrar.
[20:23] Tenemos la información, espera hasta que nos responda nuestro servidor o Json server. Ya
nos está mandando aquí a registro completado. Ya le estamos indicando al usuario que el registro
fue satisfactorio.
[20:40] Le voy a dar clic en ver clientes y ya obtenemos la lista de todos los clientes que hemos
registrado. Uno que fue desde el inicio que en este caso fue Christian y otros dos que hemos creado
gracias a nuestro formulario. Entonces de nuevo, si venimos a nuestro archivo, vamos a ver que
tenemos tres diferentes perfiles. Como te comentaba, el identificador realmente es único.
[21:14] Entonces, ya obteniendo esto de que pudimos crear un nuevo cliente, vamos a ir al
siguiente video y vamos a ver cómo es que los podemos eliminar. Todo gracias a través de este id.
Transcripción
[00:00] Muy bien. Vamos a continuar entonces. Ya pudimos crear un nuevo cliente, ya vimos cómo
utilizar un identificador único, ya vimos también cómo trabajar con formularios, pero lo que
necesitamos ahora es poderlos eliminar. Prácticamente lo que necesitamos es de alguna manera, al
momento de nosotros darle clic en este botón de eliminar, debemos mandar a llamar una función.
[00:27] Esta función debería de recibir el identificador que debería de eliminar. Entonces, lo
primero que vamos a hacer es ir a nuestro código, aquí tengo el código de registro.controller. Voy a
venir a mi client-controller. Aquí es donde tenemos el template que se genera cada vez que hay un
perfil en esta llamada, en la de client-service, en esta de listaClientes. ¿Entonces qué es lo que
necesitamos? Vamos a venir aquí, al client-controller.
[01:09] Nosotros le estábamos mandando aquí a nuestro usuario, de hecho si aquí le pongo un
console.log vamos a poner perfil. Vamos a ver qué es lo que obtenemos. Voy a mi navegador,
tenemos tres diferentes objetos, que cada uno representa una fila en esa tabla. Tenemos a Christian,
a Pedro y a Miriam, cada uno con su correo electrónico y cada uno con su respectivo id.
[01:40] Lo que nosotros le estamos mandando aquí es solamente el nombre y el correo electrónico.
Necesitamos mandarle también el id, pero lo que voy a hacer aquí es refactorizar un poco este
código. Si te das cuenta, tengo aquí perfil, tengo aquí perfil, tengo aquí perfil. Te voy a enseñar una
manera más elegante o más reciente de poder trabajar con todo esto.
[02:07] Lo que podemos hacer es abrir y cerrar llaves aquí, poner nombre, email, id, y mandar
exactamente esto de aquí. Te diste cuenta que se sombreó. Tengo este nombre con este nombre.
Aquí voy a quitar perfil, voy a guardar, voy a recargar aquí. Siguió funcionando igual, entonces,
¿qué es lo que estoy haciendo aquí?
[02:48] En lugar de tener que poner perfil.nombre, perfil.email, perfil.id, lo que hacemos es
destructurarlo directamente, es como se le conoce, destructury. Esta sería una forma, hay algunas
otras formas. Podemos también hacer esto. Nombre, email, id, e imagina que aquí tenemos de
nuevo nuestro perfil, y esto debería ser así.
[03:22] Si yo lo guardo y regreso de nuevo a mi navegador, seguimos obteniendo el mismo

resultado. Pero son diferentes maneras con las cuales puedes trabajar con objetos. A mí en lo
personal o al menos en este preciso ejemplo, lo que más me gustaría seria destructurarlo todo aquí
directamente. Ya no nos preocupamos por perfil y se lo podemos mandar así. Nos ahorramos el
profile y utilizar punto.
[04:00] Utilízalo de la manera en la que más te acomode, pero sí tienes que tener en cuenta que
existen este tipo de maneras de escribir código. Voy a guardar. Aquí lo único que hicimos fue
agregarle de nuevo el id que lo va a recibir esta función, crear nueva línea.
[04:19] Voy a venir aquí arriba, aquí solamente estamos recibiendo nombre y email. Lo que
tenemos que poner aquí es el id, voy a poner console.log(id). Guardo, regreso, aquí tenemos el id 1
que es de Christian. Este id que sí lo generamos con la librería UUiD. Este sería de Pedro y este
otro sería de Miriam. Voy a limpiar la consola. Muy bien, entonces ya tenemos nuestro id.
[04:56] Ahora, como te comentaba, necesitamos generar una función. Lo voy a poner aquí abajo:
const, le voy a poner eliminarCliente. Esto va a ser simplemente una función que debería recibir
nuestro id. Lo único que me interesa es que en este console.log("Elimina a:", id). Es lo único que
me interesaba.
[05:41] Necesitamos de alguna manera entonces indicarle a este botón que queremos que se mande
a llamar esta función cada vez que se le de clic, pero también tenemos que mandarle este id que
tenemos aquí. Probablemente pudieras pensar que trabajando o poniéndole un onclick lo
pudiéramos solucionar.
[06:03] Pero ya no es así, mira, lo voy a hacer para que veas. Voy a poner aquí onclick, este onclick
es de HTML, lo que va a recibir debería de ser la función eliminarCliente, abrimos y cerramos
paréntesis, le voy a poner entonces aquí el id. Lo voy a guardar. Si te das cuenta, no me está dando
ningún error de código. Voy a regresar a mi navegador. No hay nada.
[06:35] Le voy a dar clic en eliminar, pero ahora cuando le di clic, me mostró un error. Dice:
eliminarCliente no está definido. ¿Y eso por qué? O sea, lo tenemos aquí y ni siquiera es tanto
porque esté abajo, tal vez pudieras haberlo pensado, vamos a pegarlo aquí arriba, lo guardo,
esperamos a que recargue de nuevo. Voy a eliminar aquí la consola, eliminar. No, realmente no es
eso. Entonces, ¿esto por qué?
[07:03] Al momento de nosotros utilizar nuestros template literals, no vamos a tener ya la
capacidad de acceder directamente a estas funciones o a utilizar por ejemplo este onclick. Entonces
lo que vamos a necesitar de alguna manera indicarle al botón cuál va a ser el id y cuál va a ser la
función que debería de ejecutarse. Muy bien.
[07:28] Vamos primero entonces a ver de qué manera podemos escuchar cuando el usuario le dé
clic a este botón. Pudiera haber diferentes maneras, algunas tal vez más elegantes que otras, pero
por cuestiones prácticas lo que voy a hacer aquí es hacer un console.log de la línea.
[07:48] Recuerdas esta línea, es el tr que nosotros creamos aquí arriba y que después lo único que
hicimos fue agregarle el innerHtml. Le voy a dar clic en guardar, vamos de nuevo al navegador.
Vamos a eliminar, voy a quitar esta parte de preserve.log. De nuevo va a recargar. Entonces
tenemos un tr, este tr ya trae la información armada, vamos al siguiente.
[08:23] Nos indica dentro de nuestro proyecto que estamos en la fila que representa a Pedro y
también tenemos esta otra que es de Miriam. Entonces nosotros aquí ya tenemos toda la estructura
HTML; tenemos el nombre, tenemos el botón, aquí está. Ahora vamos a agregar un
addEventListener a este button. Vamos primero a seleccionarlo, vamos a ver cómo llegar hasta él.
[08:59] Como pudiste haber visto, como hemos estado haciendo, tenemos un método llamado
querySelector. En este querySelector hemos estado utilizando los data attributes, pero también
podemos utilizar button. Lo que estamos diciendo aquí es que queremos busque los botones.
[09:21] Vamos a esperar a que cargue y ahora como puedes ver, ya tenemos aquí nuestros botones.
Vamos entonces a crear una constante que se llame btn, que va a ser igual a todo esto de aquí. Lo
voy a cortar, lo voy a pegar, seguimos teniendo aquí nuestra referencia un console.log("botón");
muy bien.
[09:45] Ahora, así como nosotros hemos utilizado innerHTML o diferentes métodos que ya son
nativos de al momento de manipular el DOM, también ya hemos trabajado con nuestro
addEventListener. Entonces, ahora lo que necesitamos es justamente agregar un AddEventListener
a este botón. Entonces vamos a poner button.addEventListener.
[10:15] ¿Qué tipo de evento es el que queremos escuchar? Queremos el clic y tenemos como
segundo parámetro una función. Vamos a poner console.log("El click"); muy bien, voy a quitar este
console.log(botón). Lo voy a guardar, voy de nuevo a mi navegador.
[10:39] Voy a eliminar esto aquí y le voy a dar clic en eliminar y ahí ya tenemos nuestro
console.log("El clickE); ahora ya tenemos entonces agregado este addEventListener. Necesitamos
ahora de alguna manera mandarle el id. ¿Cómo crees que podamos hacer eso? Lo que podemos
hacer es tal vez agregarle aquí la propiedad id. No la hemos estado utilizando, y por motivos
prácticos pudiéramos hacerlo. Solamente tendríamos que poner id="$"{id}
[11.21] Ahora ya tenemos seleccionado aquí nuestro botón, lo que vamos a necesitar aquí es tal vez
poner un const id = btn.id, así de fácil y sencillo. Tenemos el clic, vamos a poner acá el id para
verificar cuál es el id que estamos utilizando u obteniendo. Esperamos a que cargue, muy bien, le
voy a dar clic en eliminar, tenemos el número 1. Le voy a dar clic en eliminar, tenemos el que fue
generado por la librería y aquí tenemos el otro que es de Miriam.
[12:02] Entonces ya tenemos esta función. Ya lo único que necesitamos es, en lugar de este
console.log, generar una función o mandárselo a otra función que se encargue de toda la lógica de
conexión con nuestro back, para que pueda eliminar a este cliente. Muy bien. Entonces para
continuar, lo que voy a hacer es en mi clientService, voy a generar una nueva función que se va a
encargar de eliminar a mi cliente.
[12:39] Voy a poner const, podemos utilizar el mismo nombre, eliminarCliente. A pesar de que
existe aquí y en el otro archivo, no deberíamos de tener ningún problema. Vamos entonces a tener
aquí nuestra función que vamos a recibir el id. Deberíamos de tener prácticamente algo muy
parecido, un return de fetch, deberíamos utilizar la misma URL, "http://localhost:3000/perfil".
[13:16] Ahora vamos a mandar como segundo parámetro dentro de nuestra función fetch un objeto
donde le vamos a pasar todas las propiedades. En este caso, realmente lo que tendríamos que
ponerle aquí es nuestro método, y el method debería decir simplemente delete.
[13:40] En este caso, el cómo funciona el Json server, lo que va a hacer es verificar. Okay, tenemos
el delete. No me importa realmente la parte de los headers, de body, porque no le estamos
mandando información. Lo que va a hacer Json server es leer la URL y obtener un parámetro. Este
parámetro debería de ser aquí el id, por ejemplo el 1 o el id que sea generado.
[14:09] Para entonces poder inyectar este id a esta URL o a este primer parámetro, voy a poner
BackTick y voy a hacer aquí es hacer un id. Vamos entonces a poner aquí console.log("Eliminar a
id") Vamos entonces a copiar este nombre de la función. Vamos a exportarlo dentro del objeto
clientServices, aquí está.
[14:55] Y ahora vamos a utilizarlo dentro de nuestro client-controller. Si recuerdas, tenemos aquí
nuestro addEventListener, pudiéramos tal vez utilizar esta otra función, pero ya realmente
pudiéramos hacerlo tal vez para separarlo, pero estaríamos como creando algo más que en este
punto no será necesario.
[15:22] Por lo tanto ahorita lo voy a eliminar y todo lo voy a manejar aquí directamente. Lo que
voy a hacer entonces aquí es decir, voy a entrar a clientServices.eliminarCliente, abro y cierro
paréntesis y le voy a mandar este id. Voy a poner aquí .then, voy a poner aquí respuesta, voy a
poner un console.log de la respuesta que tengamos, y por buena práctica vamos a utilizar el catch
en caso de que exista algún error.
[16:10] Vamos a mandar un alert y vamos a poner "Ocurrió un error". Vamos entonces a regresar
aquí al navegador, vamos a eliminar a Miriam. Si viste qué fue lo que pasó, se eliminó. Ahora, si
nos ponemos a ver un poco más a detalle todo esto que pasó, tenemos nuestro clientService, dentro
tenemos un método que se llama eliminarCliente.
[16:51] Después de que tenemos esta parte de eliminar cliente, le vamos a pasar el identificador que
queremos eliminar. Vamos a esperar una respuesta. En este caso pues simplemente pusimos el
console.log(respuesta); y en caso de que exista algún error debería marcarnos aquí nuestro catch.
[17:17] Entonces ya tenemos tanto la parte de nuevo cliente como de eliminar. Vamos entonces
solo a limpiar un poco el código, voy a quitar estos console.log. EliminarCliente. Tengo que dejar
este de aquí entonces, luego lo voy a guardar. Voy a ir entonces a ver qué más tenemos por acá.
[17:54] Voy a quitar este otro console.log. Muy bien. Igual aquí en este caso, como no estamos
utilizando respuesta, nos aparece un poco como decolorido. Entonces lo podemos quitar y de esta
manera tenemos una función anónima que no recibe ningún parámetro y que realmente no nos
interesa. Entonces vamos a guardar aquí, vamos a ver nuestro clientService.
[18:23] Vamos a poder entonces aquí quitar este console.log. La manera en la que funciona Json
server, va a tomar el identificador que tengamos aquí, lo va a eliminar de este archivo db.Json. De
hecho, podemos ver un poco aquí o inspeccionar como para que tengas una idea.
[18:49] Vamos a la sección de Network, solo igual como para recapitular. Vamos a crear un nuevo
cliente. Vamos a poner que se llama harland@alura.com. Recuerda, le voy a dar clic en registrar.
Tenemos aquí una petición. Vamos a esperar a que termine de cargar todo y tenemos aquí el
registro completado. Vamos entonces a venir aquí arriba, a la primera petición que tenemos aquí.
[19:30] Bueno, en este caso hay que buscar la segunda, esta de aquí. ¿Qué es lo que estamos
obteniendo o qué es lo que nos interesa? Nos interesa ver que aquí tenemos nuestra URL a la cual
nos estamos conectando. Tenemos también cuál fue el método, en este caso POST y cuál es el
Status Code, en este caso es 201, que es el estándar para decir que un recurso fue creado.
[19:55] Después, si venimos aquí abajo, lo que vamos a encontrar es un request payload, lo que
hace referencia a nuestro body. Nosotros aquí en esta función de clientService, le estamos diciendo
que el body debería de ser nombre, email y el ID. Entonces si lo vemos, aquí viene esta
información. El email, el identificador y el nombre. Hasta ahí todo está bien.
[20:29] Podríamos ver más información pero realmente esto es lo que nos interesa. Ahora voy a
eliminar aquí esta consola, los logs de network. Voy a ir a ver clientes. Vamos a inspeccionar un
poco lo que tenemos aquí. Aquí se están cargando todos los archivos, por ejemplo las fuentes, el
CCS y vamos aquí, a este de perfil.
[21:01] Tenemos nuestro request URL, que de nuevo es localhost:3000/perfil, el método que se
utilizó, en este caso GET, el status code que es 200. Aquí ya no existe un request payload porque
no le estamos agregando un cuerpo. Si nosotros queremos ver la información que nos regresó,
vamos a la sección de response o preview.
[21:27] Entonces aquí ya es cómo estamos obteniendo la información que nos está regresando
nuestro servidor o nuestro Json server. Y por último, lo que voy a hacer es eliminarme de nuevo,
voy a limpiar la consola de network, le voy a dar clic en eliminar y voy a esperar a que termine.
[21:51] Vamos aquí, vamos a la parte de headers, al segundo. Tenemos la URL, le agregamos el
identificador, le estamos diciendo cuál es el método y al final de cuenta lo único que nos responde
es, okay, lo que tú me pediste fue realizado con éxito.
[22:10] De hecho, si me busco en mi db.Json, no existo. Bueno, vamos a dejar hasta aquí este
módulo. En el siguiente vamos a ver cómo es que podemos editar a nuestro clientes. Entonces te
veo.
05GET y POST
PRÓXIMA ACTIVIDAD


Les dejamos un artículo para que puedan conocer un poco más sobre las diferencias entre GET y
POST:
 HTTP: Diferencias entre GET y POST
PRÓXIMA ACTIVIDAD





07Lo que aprendimos
PRÓXIMA ACTIVIDAD



 Usar el método closest para encontrar el elemento del DOM más próximo al cual
queremos remover.
 Crear un cliente utilizando el verbo http POST.
 Remover un elemento del dom con el método remove().
 Borrar un cliente utilizando el verbo http DELETE.
 Transcripción
 [00:00] Hola. En este módulo vamos a ver la última parte que nos hace falta para completar
nuestro CRUD, que sería actualizar a nuestro cliente. Entonces lo primero que vamos a ver
es como debería de ser el flujo. Voy a regresar a mi navegador.
 [00:17] Aquí tenemos entonces nuestra lista de los clientes y lo que queremos es que cuando
le demos clic en editar, nos mande a este formulario pero que aquí ya debería de venir
rellenada la información o más bien necesitamos saber de alguna manera cuál fue el cliente
al cual le dimos clic.
 [00:41] Entonces para eso, lo que vamos a hacer es mandar el identificador o el id de nuestro
usuario o nuestro cliente por la URL. Vamos a ver entonces. Lo que voy a hacer es venir a
mi controller, el client-controller y nosotros entonces aquí tenemos nuestro template, que se
va a encargar justamente de darle la estructura.
 [01:11] Nosotros tenemos aquí, en la línea 15, la referencia a nuestra página HTML, que se
llama editar cliente y que queremos que cada vez que le den clic, nos redireccione. Ya lo está
haciendo.
 [01:28] Pero necesitamos mandarle por params el identificador. ¿A qué me refiero con
params? Después de HTML, le voy a poner el símbolo de interrogación, y lo que voy a hacer
entonces aquí entonces es abrir y cerrar llaves, y lo que voy a hacer es pasarle aquí el id.
Vamos a ver qué sucede. Voy a venir de nuevo aquí a mis clientes, le voy a dar aquí en
editar y ve cómo es que tenemos ya aquí nuestro 1, nuestro identificador.
 [02:05] Vamos ahora con el siguiente, le voy a dar clic aquí en editar y aquí tenemos ya el
identificador. Pero nos hace falta una parte. Nosotros como tal ya lo estamos mandando,
pero para que podamos trabajar con esos params en otras páginas vamos a poner un nombre.
En este caso yo le voy a poner id.
 [02:25] Entonces vamos a volver a verificar aquí, le voy a dar clic en editar y ahora ¿qué es
lo que tenemos? Tenemos que el id es este de aquí. Entonces nosotros gracias a través de
este identificador es que vamos a poder consultar a nuestro Json server, para que nos regrese
la información solamente de ese cliente. Vamos a ver.
 [02:49] Voy a copiar este identificador, voy a venir de nuevo aquí a localhost:3000 y lo que
voy a hacer es simplemente ponerle una diagonal, pegar el identificador, le voy a dar enter.
¿Qué es lo que tenemos? Tenemos el detalle de el cliente que tiene ese identificador.
 [03:11] Si yo se lo cambio aquí por 1, deberíamos de tener ya solamente a Christian. Y checa
que aquí en este caso ya no es un arreglo, sino es simplemente un objeto. Entonces vamos a
primero, saber cuál es el identificador que nosotros estamos recibiendo por params o por
parámetros dentro de la URL.
 [03:34] Lo que voy a hacer es crear un nuevo controlador. Se va a llamar
actualizar.controller.js. Vamos a venir aquí a nuestra página de editar_cliente y aquí tenemos
toda la estructura. Justo antes de que cierre body, lo que voy a hacer es crear una nueva
etiqueta script.
 [04:06] Le voy a poner el SRC, dos puntos para salir cla carpeta. Después vamos a carpeta
controllers, y por último al archivo actualizar.controller.js. Como vamos a generar aquí en
nuestro client-service la función que se va a encargar de obtener la información y la vamos a
importar, es necesario que le digamos aquí que va a ser de tipo módulo. No lo olvides.
 [04:33] Nos puede dar un error en caso de que no lo especifiquemos. Vamos a guardar. Lo
que voy a hacer aquí es obtener la URL en la que estamos actualmente. Cada vez que se
manda a llamar este archivo HTML, carga este archivo JavaScript, entonces lo que yo quiero
es crear una constante que se llame url que va a ser igual a una nueva clase que ya viene
definida dentro de JavaScript y nosotros no tenemos que instalar nada.
 [05:09] Vamos a poner entonces aquí URL y lo que le vamos a decir es (window.location).
Vamos a ver qué es lo que obtenemos. Voy a hacer aquí un console.log(url);. Voy a guardar.
Vamos a nuestro navegador, le voy a dar en inspeccionar. Voy a la parte de consola y aquí
tenemos un objeto que es nuestra URL.
 [05:34] Y si nos ponemos a ver tiene diferente información. Tenemos el host, hostname,
href, que es la URL completa. Pero tenemos aquí otro objeto que se llama searchParams.
Vamos a ver, lo que voy a hacer entonces aquí es voy a ponerle punto searchParams.
 [06:00] Voy a esperar aquí, voy a volver a llamarlo aquí, no obtenemos nada. Pero lo que
nosotros tenemos aquí al llamar, lo que nosotros tenemos con searchParams, tenemos un
método llamado get, en el cual le vamos a decir cual es el nombre del param que estamos
buscando. En este caso si recuerdas, le pusimos id. Entonces, ese es el que estamos
buscando.
 [06:33] ¿Qué voy a hacer? Es simplemente poner aquí ID, voy a guardar y vamos a ver qué
obtenemos. Como puedes ver nosotros ya estamos obteniendo el identificador que viene aquí
en el param, dentro de nuestra URL. ¿Ahora qué necesitamos?
 [06:51] Vamos a crear una nueva constante en lugar del console.log, que va ser igual a todo
esto, voy a quitar aquí este paréntesis. Se va a llamar id. Ahí ya lo tenemos. ¿Cuál sería el
siguiente paso? Necesitamos de alguna manera obtener la información. Es decir, lo que
nosotros estamos realizando aquí con el navegador, de mandarle el identificador,
necesitamos hacerlo también pero con JavaScript.
 [07:24] Lo que voy a hacer entonces es aquí en mi client-service, voy a crear una nueva
función, se va a llamar detalleCliente. Este detalleCliente va a recibir el identificador que
nosotros queremos. Vamos a regresar entonces nuestra promesa de fetch. Recuerda, como
queremos obtener información, no vamos a necesitar especificarle el método, ya que fetch lo
tiene por defecto.
 [07:55] Entonces vamos a pasar aquí la URL: localhost:3000/perfil/$(id), que es este de aquí.
Muy bien. Lo que voy a hacer entonces es exportarlo dentro de este objeto de client-service
para que lo podamos acceder desde otro lado. Lo que vamos a hacer es agregar aquí nuestro
then también. Vamos a ver la respuesta.
 [08:35] Ahorita lo único que me interesa es que tengo un console.log donde podamos ver
nuestra respuesta. Voy a guardar. Vamos a venir entonces a nuestro controlador de
actualizar, lo que voy a hacer entonces es importar, clientServices, aquí sí utilizas el
autocompletado. Recuerda que hay que poner el .js para que no nos marque ningún error.
 [09:08] Dentro de client-service ya tenemos nuestro detalle cliente. Vamos a generar una
nueva función que se va a llamar obtenerInformación. Solo como para que tengamos un
poco más ordenado nuestro código, la URL y el id lo voy a poner aquí adentro y solamente
la mandamos a llamar. Muy bien. Ahora nosotros ya tenemos este link y tenemos nuestro
método que va a recibir el id.
 [09:46] Entonces lo único que tendremos que hacer aquí, es decir
clientServices.detalleCliente, recuerda, va a recibir el identificador, en este caso es este de
aquí, el id. Vamos a guardar y vamos a ver qué es lo que obtenemos. Voy a venir a mi
página de nuevo aquí.
 [10:14] Como puedes ver, ya estamos teniendo aquí una respuesta, pero lo que nos hace falta
es transformarlo en un objeto JSON. Para eso, lo que podríamos hacer es simplemente
regresar aquí en este caso. Lo voy a poner en la misma línea, respuesta.json.
 [10:41] Recuerda, como no estamos utilizando aquí llaves, esto debería venir en una sola
línea, mi Visual Studio Code le da ese formato. Voy a venir de nuevo aquí a
actualizar.controller. Lo que voy a hacer entonces, como ya no voy a tener el console.log
dentro de mi fetch, dentro de esta función, lo voy a generar aquí.
 [11:04] Entonces voy a ponerle aquí then, vamos a ponerle perfil y simplemente un
console.log(perfil); vamos a ver. Este es nuestro console.log. Como puedes ver lo tenemos
en nuestro archivo actualizar.controller, en la línea 6, que efectivamente es este de aquí.
 [11:27] Ahora, nosotros ya estamos obteniendo la información de un cliente-detalle, lo que
necesitamos hacer es indicarle a este formulario cuál es el nombre y que lo autocomplete con
Pedro, y el email para que lo autocomplete con pedro@alura.com. Vamos a hacer eso. Voy
entonces aquí, lo voy a poner aquí mismo. Lo que voy a hacer es entonces aquí bgenerar una
nueva constante que se llame nombre.
 [12:02] Que va a ser igual a obtener el elemento donde nosotros vamos a querer rellenar ese
nombre. Vamos a ver la página que HTML se llama editar-cliente y tenemos data attributes.
Tenemos data-nombre y data-email. Entonces vamos a trabajar con eso:
documnet.querySelector y le vamos a decir entre paréntesis y corchetes que va a ser data-
nombre.
 [12:34] Vamos entonces ahora con el siguiente sería email. Voy a darle
document.querySelector y le vamos a indicar entre comills y corchetes data-email. Vamos a
poner console.log(nombre,"-", email); vamos a ver si ya estamos obteniendo nuestro
elementos.
 [13:06] Ya los estamos obteniendo. ¿Ahora qué necesitamos? Necesitamos que, una vez que
hayas obtenido la información del perfil, justamente viene aquí en esta variable, entonces
necesitamos llenarlo o decirle que perfil.nombre tiene que venir al valor de esta constante
nombre y perfil.email, tiene que venir al valor de este input llamado email.
 [13:33] Entonces en este caso, como voy a hacer bastantes operaciones, lo voy a poner
dentro de llaves. Lo que voy a hacer entonces es poner aquí nuestro nombre. Recuerda que
este nombre hace referencia a esta constante que es el elemento nombre.value =
perfil.nombre; y nuestro email.value = perfil.email;. Voy a guardar.
 [14:12] Vamos a regresar a ver nuestra página web y como puedes darte cuenta nosotros ya
estamos obteniendo aquí el nombre y el correo. Pero, siguiendo un poco las prácticas que te
había comentado anteriormente, no me gusta tanto esta forma de ver el perfil, de obtener
perfil, y si queremos acceder a un valor, o sea realmente tenemos que escribir perfil ,punto,
el nombre de la llave.
 [14:38] Lo que vamos a hacer entonces simplemente destructurarlo aquí como parámetro.
Voy a poner aquí, bueno, más bien lo que me acabo de dar cuenta es, que en este caso
tendríamos un problema. ¿Por qué? Si yo pongo aquí nombre y pongo aquí email, voy a en
lugar de aquí, de ponerle perfil voy a poner esto de aquí, vamos a ver qué es lo que vamos
obtener con esta sintaxis.
 [15:04] Me dice que no puede crear el valor de un string Pedro, pero ¿cuál es el tema? El
problema que estamos obteniendo aquí es que este nombre, a pesar de que vive afuera de su
contexto, por así decirlo, vive fuera de esa función, queda disponible para utilizarla.
 [15:29] En este caso lo que tendríamos que hacer es indudablemente sí obtener la parte de
perfil, entonces vamos a tener que poner perfil.nombre, para que no tengamos ningún
problema. ¿Ahora qué es lo que nos interesa? Que cuando editamos, por ejemplo, aquí,
Pedro se cambió el nombre a Pancho. Le voy a dar clic en editar cliente y lo que necesitamos
es enviárselo a nuestro json server para que él lo actualice.
 [16:14] Como puedes ver aquí, también necesitamos verificar que el identificador exista.
Ahorita nos mandó un 404, porque cuando yo le di clic en editar cliente, si recuerdas, esto es
un formulario, entonces tiene un comportamiento ya definido, en el cual va a mandar a
través de la URL el nombre, este nombre de acá, el email, la información que nosotros
llenamos.
 [16:43] Trata de enviarlo, hace un post a nuestro Json server y una vez que lo revisa, cambia
esta URL. El problema aquí es que ya no existe el identificador. Entonces lo que podemos
hacer es, tal vez, poner un poco de lógica en el que if(id == null), en este caso nos está
diciendo que está nulo, vamos a poner un console.log para verificar que sí realmente está
accediendo.
 [17:31] ("Hacer redirección") Aquí ya nos está comentando hacer redirección. Entonces, lo
que nosotros podemos hacer sería tal vez, tenemos esta vista de error, vamos a ver qué es lo
que obtenemos en esta vista. Nos manda este error, entonces vamos a redireccionarlos ahí.
 [17:56] Vamos entonces a poner aquí en nuestro if, en caso de que el id sea nulo,
window.location.href va a ser igual, y le especificamos cuál va a ser el archivo que nosotros
queremos desplegar. En este caso va a ser error.html, pero vamos a poner /screens/error.
Vamos a guardar, vamos a nuestro navegador. Aquí me dice que ocurrió un error. Vamos
aquí a clientes, vamos a editar alguno.
 [18:39] Voy a ponerle aquí que tal vez no viene el id por algún motivo. Nos dice: "Ops!
Ocurrió un error. Prueba de nuevo en unos minutos" y regresamos a la página de inicio, que
al menos ahorita es la de cliente. Entonces, muy bien, vamos a dejar hasta aquí el video y ya
lo que vamos a hacer en el siguiente es cachar la información que tenemos en este formulario
y ahora sí actualizar a nuestros clientes.
 Transcripción
 [00:00] Como recuerdas, ya tenemos nuestra función que se encarga de obtener el id, y
después manda a llamar a otra función que se encarga de obtener información de nuestro
Json Server. Después de que obtenemos nuestra respuesta, nosotros rellenamos
automáticamente estos inputs, el caso del nombre y el caso del correo electrónico. Ahora
necesitamos realizar otras dos funciones.
 [00:27] Una que se encargue cuando le demos clic en editar cliente, me muestre cuál es el
nombre y el correo electrónico nuevo que se actualizó, por así decirlo, en caso de que se
haya actualizado. Necesitamos otra función que se encargue de tomar el nombre y el correo
electrónico y lo actualice en Json server.
 [00:47] Lo que voy a hacer primero entonces es la función que cuando yo le dé clic aquí en
editar cliente, me muestre un simple console.log, el nombre y el correo electrónico. Voy a
regresar aquí al código, voy a quitar este console.log. Lo que voy a hacer entonces es venir a
mi página de editar cliente.
 [01:06] Como puedes observar, nosotros tenemos estos inputs que viven dentro de un
formulario. En este caso vamos a acceder a él con el data attribute data-form. Vamos a
regresar aquí a actualizar controller. Lo que voy a hacer entonces aquí es crear una nueva
constante que se llame formulario.
 [01:30] Esto ya lo habíamos hecho en la vista para crear un nuevo cliente, Formulario =
document.querySelector. ¿Cuál va a ser el selector? Si recuerdas, era ata-form. Muy bien,
entonces aquí nosotros ya tenemos nuestro formulario y lo que queremos es agregarle un
addEventListener en el caso cuando sea submit.
 [07:02] Vamos a hacer eso. Vamos a poner entonces aquí: formulario.addEventListener y
recuerda, recibe dos parámetros. El primero es el tipo de acción que estamos esperando, que
seria submit, y el segundo, una función que se va a ejecutar cuando el usuario realice esta
acción del envío.
 [02:23] Vamos a recibir aquí nuestro evento y si recuerdas nosotros preveníamos el
funcionamiento normal de un formulario. Era esto con evento.preventDefault. Lo que
estamos haciendo aquí es evitar que el formulario trate de hacer la petición. Nosotros lo
vamos a hacer con código JavaScript. Bueno, aquí ya estamos previniendo el funcionamiento
normal del formulario.
 [02:56] Vamos a entonces tener que obtener el valor de los inputs. Lo que nosotros podemos
hacer es copiar todo esto de aquí, lo voy a pegar. Lo que nos interesa es obtener el nombre,
pero lo que estamos obteniendo aquí son los elementos inputs como tal. Nos interesa acceder
a los values. Entonces vamos a ponerle .value.
 [03:26] Voy a poner aquí un console.log(nombre," ", email); vamos a guardar, vamos a
regresar a nuestro navegador. Tenemos Christian, ahora se va a llamar Edgar. Le voy a dar
aquí en mi correo electrónico, ahora va a ser Edgar, editar cliente y okay. Ya estamos aquí
obteniendo el nuevo valor de los inputs. Si nosotros venimos acá y ahora se llama Alan, ahí
ya lo tenemos.
 [04:05] Necesitamos entonces una función que obtenga tanto el nombre como el correo
electrónico y que lo actualice. Entonces vamos a generar esa función o ese servicio y lo
vamos a realizar aquí en client-service. Lo que vamos a hacer entonces aquí es const para
una nueva función, actualizarCliente ¿y qué es lo que va a recibir?
 [04:32] Va a recibir el nombre, el correo electrónico y también el id, porque nosotros a pesar
de que no lo estamos ocupando aquí, necesitamos saber cuál es el identificador del usuario
para que Json server se encargue de actualizarlo. Vamos entonces a terminar esta función y
lo que necesitamos es de nuevo, como prácticamente lo hicimos aquí con nuestra función
para crear un nuevo cliente, es regresar la promesa que genera fetch.
 [05:09] Le vamos a pasar la URL. En este caso es http://localhost:3000/perfil/${id}. El
identificador de nuestro cliente, entonces abro el símbolo de pesos o de dólar, abro llaves y
le mando el id. También, en este caso, como vamos a trabajar con un método para que
podamos actualizar nuestro cliente, necesitamos definirle más cosas, esto como segundo
parámetro y dentro de un objeto.
 [05:47] El primero va a ser el método que vamos a utilizar, va a ser put. Después si
recuerdas, tenemos la parte de los encabezados y le vamos a decir el tipo de aplicación que
vamos a mandar o el tipo de archivo. En este caso tendríamos que ponerle "Content-Type":
"application/json”.
 [06:12] Por último, si recuerdas, le mandábamos nuestro bod, que body lo que va a tener es
el objeto de nombre y de email, pero como de nuevo te había comentado, la transferencia o
el cómo se comunica el HTTP es a través de texto. Necesitamos entonces convertir ese
objeto en algo con lo que pueda trabajar HTTP.
 [06:36] Para eso vamos a utilizar de nuevo JSON.stringify y vamos a mandarlo como
parámetro todo este objeto. Muy bien. Vamos entonces a poner aquí nuestro then, vamos a
ponerle aquí nuestra respuesta, y vamos a hacer un console.log[respuesta]. Muy bien, vamos
a poner nuestro catch en caso de que exista algún error. Muy bien.
 [07:12] Ahora necesitamos agregar este actualizarCliente a nuestro objeto clientService.
Vamos a copiarlo y pegarlo aquí, ya para tenerlo disponible. Voy a actualizar controller. Ya
tenemos aquí importado nuestro clientService y lo que vamos a poder obtener de hecho
necesitamos esta URL y este id, en todo caso este id.
 [07:43] Lo que vamos a hacer entonces es copiar esto de aquí de nuevo, vamos a pegarlo,
vamos entonces a mandar a llamar nuestra función que lo va a actualizar.
clientServices.actualizarCliente y si recuerdas ¿qué es lo que recibíamos? Lo primero
recibíamos nuestro nombre, email y después nuestro id. Muy bien.
 [08:27] Vamos entonces a guardar esto de aquí, voy a regresar a mi navegador y ahora lo que
voy a hacer es editar a Christian y ahora le voy a llamar Pedro. Aquí su correo, de nuevo
Pedro, vamos a darle clic en editar cliente y ¿qué es lo que obtenemos? ¿Si viste que aquí
apareció algo y se actualizó?
 [08:56] Se hizo la petición, nosotros estamos obteniendo aquí a Pedro. Si venimos de nuevo
aquí, a localhost:3000/perfil/1, este lo tenía antes, por lo tanto dice Chistian, pero si le
vuelvo a dar enter, ya tenemos a Pedro. Entonces ya tenemos el funcionamiento de poder
editar a nuestro cliente.
 [09:20] Lo que vamos a querer entonces es en nuestra parte de clientService, lo único que
realmente me interesa es que me regrese la respuesta. Voy a guardar. Lo que voy a hacer
entonces es aquí en actualizar.controller, una vez que se cumpla esta promesa, voy a poner
aquí el then, voy a abrir una función anónima, porque realmente no me interesa tanto la
respuesta.
 [09:50] Voy a abrir aquí unas llaves, solo para que se pueda ver mejor y voy a poner un
window.location.href a esta página que se llama edición concluida. Si yo la abro, vamos a
ver qué tiene.
 [10:08] Me dice: Cliente editado con éxito, entonces es lo que vamos a hacer. Lo que voy a
decirle aquí entonces es que vaya a la carpeta de screens y después a edición concluida. Muy
bien, voy a quitar entonces aquí este console.log. Voy a guardar, voy a regresar aquí a mi
proyecto y ahora Pedro se vuelve a llamar Christian.
 [10:41] Muy bien. Entonces vamos a volver a editar aquí a nuestro cliente y ahora en lugar
de llamarse Pedro se va a llamar Pancho. Ahora va a ser pancho@alura.com, editar cliente.
 [10:57] Ya nos redireccionó, nos dice: Cliente editado con éxito. Podemos entonces a ver
clientes y ahora ya no existe Christian, ahora existe Pancho. Entonces nosotros ya tenemos
nuestro CRUD completo. ¿Recuerdas qué era lo que significaba CRUD? CRUD de Create,
que en español será crear. Eso lo logramos con este formulario de nuevo cliente.
 [11:20] R de leer, eso lo estamos haciendo en dos partes, la primera es en esta, donde
estamos obteniendo la información. Y también al momento de editarlo, ya que se rellena
automáticamente nuestro formulario. Estamos obteniendo la información de un cliente
detalle. Después tenemos la U de Update o de actualizar, que en este caso sería este
formulario.
 [11:45] Por último vamos a tener la D de Delete o eliminar, que en este caso lo logramos con
nuestro botoncito de eliminar. Como puedes ver, realmente trabajar con fetch ha sido más
sencillo a tener que estar lidiando tal vez con tantas promesas, con el callback head.
 [12:09] Entonces esta es una manera muy moderna de escribir código. Sin embargo, nos
hemos saltado por ahí algunas cosillas que pudieran ayudarnos a tener un código muchísimo
más profesional y eso es lo que vamos a esta viendo en la siguiente sección.
 DISCUTIR EN EL FO

PRÓXIMA ACTIVIDAD





06Lo que aprendimos
PRÓXIMA ACTIVIDAD



 Hacer una query string utilizando la propiedad serachParams.get() para encontrar un
id.
 Crear una IIFE o función autoejecutable.
 Editar los datos utilizando el verbo http PUT.
 Transcripción
 [00:00] Vamos a comenzar entonces el último módulo de este curso. Lo que vamos a ver es
qué es async await. Para eso voy a venir aquí, a mi navegador, voy a ver la documentación
de Mozilla, async await. Voy a buscar función async. ¿Qué es lo que tenemos entonces? Que
la declaración de una función async define una función asíncrona, la cual nos va a devolver
una async function.
 [00:50] Vamos a venir un poco más hacia aquí abajo. Tenemos nuestra palabra async, que es
una palabra reservada, que va antes del nombre de la función o la declaración de la función.
Vamos a venir acá y, ¿qué es lo que dice aquí?
 [00:47] Una función async puede contener una expresión await, la cual va a pausar la
ejecución de la función y va a esperar la resolución de la promesa y una vez que ya obtenga
esa respuesta de la promesa, va a continuar con la ejecución de la función async y devolver
el valor de la respuesta.
 [01:09] Vamos entonces a venir a nuestro código para ejemplificarlo y aquí en nuestra
función de actualizar controller, tenemos obtenerInformación. ¿Cómo definimos entonces
que esta función es asíncrona? Si recuerdas lo que decía la documentación es que tenemos
que poner async function, el nombre de la función y lo que debería de realizar.
 [01:34] Pero en este caso como nosotros estamos utilizando arrow function o funciones
anónimas, basta solo con ponerlo aquí. Lo que estamos diciendo es que esta función va a ser
asíncrona. Muy bien. Con eso nosotros ya obtenemos entonces la capacidad de utilizar await.
Lo que voy a hacer aquí es crear una constante, que se va a llamar perfil. Va a ser igual a
esperar clientServices.detalleCliente. Esto lo voy a cortar.
 [02:11] Lo que voy a hacer entonces es poder eliminar este then. ¿Esto por qué? Porque el
then ya lo maneja aquí adentro el await, entonces la respuesta que obtengas, la vas a asignar
a esta constante llamada perfil. Por lo tanto, yo ya puedo obtener esta sintaxis, en la cual voy
a hacer una llamada asíncrona a clientServices.detalleCliente, voy a esperar que se
comunique con el servidor de la respuesta y la respuesta la vamos a obtener en perfil.
 [02:48] Este perfil va a acceder aquí en esta parte. Muy bien. Vamos entonces a guardar,
vamos de nuevo a nuestro proyecto, vamos a editar algún cliente, ahora Pancho se cambió el
nombre y se va a llamar Jesús. Nuestro email va a ser Jesús, enter cliente. Cliente editado
con éxito.
 [03:11] Vamos de nuevo a ver nuestros clientes y ya tenemos actualizado nuestro cliente
pero con una sintaxis muchísimo más sencilla, entonces nosotros ya tenemos aquí al objeto
que nos va a regresar nuestra función. Ya tenemos implementado lo que viene siendo async
y await. Nosotros podemos ir trabajando en mejorar todo este código. Te lo dejo a ti como
tarea.
 [03:39] Tú puedes verificar en dónde es que se están mandando a llamar los .then, cuáles son
las funciones que podemos hacerlas asíncronas para tener un código más legible. ¿Cuál es el
tema con esto? Imagínate que aquí nosotros tenemos este actualizar cliente, y ahora, en lugar
de mandarle este id lo que voy a hacer es simular un error.
 [04:02] Voy a ponerlo esto entre comillas, no existe el id. Lo voy a guardar. Voy a regresar
acá, voy a editar a Jesús y ¿ahora qué es lo que tenemos? Un error. ¿Cómo es que nosotros
podemos manejar este tema de los errores? Anteriormente nosotros teníamos el .catch, lo
cual nos está ayudando a manejar ese tipo de errores.
 [04:34] Pero nosotros tenemos ahora disponible dentro de una función asíncrona algo
llamado try catch. Es decir, vamos a verlo acá, try catch. Vamos a tener esta sintaxis: try, de
intenta. Intenta hacer esto. En caso de que exista algún error, vamos a manejarlo en esta otra
función llamada catch. Vamos a ponerlo entonces y te veo en el siguiente video.
 Transcripción
 [00:00] Muy bien, entonces vamos a terminar ya con nuestro proyecto y el último concepto
que quiero que veamos es algo que se conoce como try...catch. Si tú recuerdas
anteriormente, lo que nosotros teníamos era el .then y el .catch. El .catch nos iba a ayudar a
encontrar algún error. Mientras que el .then se iba a ejecutar después de que se cumpliera la
promesa. Entonces vamos a ir al navegador, voy a escribir aquí try..catch JavaScript.
 [00:39] Y convertido al español sería más o menos como: "trata de hacer algo, si lo haces,
continúa". En caso de que exista un error dentro de esto que se está tratando de hacer,
entonces vamos a capturar ese error y lo vamos a manejar a nuestra conveniencia. Vamos a
ver entonces cuál será la sintaxis, lo que tenemos es la primera parte que sería try, y la última
sería la parte de catch.
 [01:05] Entonces podemos ver aquí diferentes ejemplos de cómo es la sintaxis en try y catch.
Lo que vamos a hacer entonces es implementarlo ya en nuestro código. Lo que tienes que
ver entonces es que este try...catch va a funcionar exclusivamente dentro de una función
asíncrona. Eso para que lo tengas en cuenta.
 [01:30] Entonces si recuerdas, la sintaxis que comentaba la documentación de Mozilla era
try, abrimos y cerramos nuestras llaves, vamos a poner aquí la palabra reservada catch,
abrimos y cerramos paréntesis, vamos a poner aquí nuestro error, abrimos y cerramos llaves
y lo que podemos hacer aquí es hacer un console.log("Catch Error - ", error) y vamos a hacer
el console.log de error.
 [02:12] ¿Entonces qué es lo que nosotros queremos que trate de hacer nuestro programa? Lo
que queremos es que haga esto de aquí. Lo voy a cortar, lo voy a pegar dentro de try, voy a
guardar y vamos regresar a nuestro navegador. ¿Qué es lo que tenemos? Si yo le he dado el
clic aquí en editar a Pedro, tenemos nuestro formulario normal, tenemos el nombre, tenemos
el correo electrónico.
 [02:41] Pero ahora lo que vamos a hacer es simular un error. Lo primero que voy a hacer es
regresar aquí al código y en lugar de mandarle el id, lo que voy a hacer es poner unas
comillas simplemente. Voy a hacer un console.log(perfil). Voy a guardar, voy a regresar
aquí a mi proyecto y ahora vamos a ver qué es lo que obtenemos.
 [03:08] Nuestros inputs se completaron con undefined y aquí nuestro console.log de la línea
18, que es el que acabamos de poner aquí. Viene un objeto vacío, entonces hace sentido, lo
que nosotros estamos diciendo aquí es: "Cuando tú te comunicas con el servidor, espera la
promesa, espera la respuesta y después al objeto que voy a recibir."
 [03:33] ¿Qué es lo que voy a tener? Perfil.nombre y perfil.email. Es decir, estoy tratando de
acceder a propiedades que no existen. Entonces aquí ya es donde tenemos nuestro error. Este
es un error de lógica. Si te puedes dar cuenta, realmente no está entrando el catch. Porque
nosotros no lo estamos manejando de una manera en la cual nosotros mandemos a llamar ese
catch.
 [04:00] Lo que vamos a hacer entonces es una validación: if(perfil) si existen, okay, haz esto.
En caso de que no, aquí podemos mandar a llamar nuestro error. ¿Cómo es que nosotros
activamos un error? Le vamos a decir: throw new Error. Voy a guardar aquí, vamos a
regresar a nuestro navegador. ¿Qué es lo que pasó?
 [04:44] Sí existe perfil como tal, es nuestro objeto que tenemos aquí. Lo que podemos hacer
entonces es if(perfil.nombre & perfil.mail) vamos a guardar, vamos a regresar. Ahora sí, ya
como te puedes dar cuenta, nuestros inputs no se rellenaron. Pero aquí ya nosotros estamos
obteniendo nuestro catch error.
 [05:19] Aquí ya tenemos nuestro console.log y nos está diciendo en dónde es que se está
generando este error, que en este caso es en esta línea 26. Lo que podemos hacer entonces es
simplemente poner aquí tal vez un alert o bien, lo que pudiéramos hacer también como lo
hemos manejado en otras funciones, es simplemente hacer un redirect.
 [05:45] Podemos poner un window.location.href= mi archivo que vive dentro de
"/screens/error.html". Voy a guardar, vamos a regresar aquí. Aquí me apareció mi alert, no
está haciendo nada, hasta el momento que le dé clic en aceptar, es que me va a hacer mi
redireccionamiento.
 [06:11] Entonces aquí ya le estamos indicando al usuario que ocurrió un error, que pruebe en
algún otro momento. Lo único que voy a hacer entonces aquí, si recuerdas, nosotros
simulamos este error, porque aquí la parte de id no puede encontrar a un id con el id texto id.
 [06:33] Entonces voy a regresarlo en la manera en la que estaba anteriormente, voy a
guardar. Vamos a regresar, vamos de nuevo a la parte de los clientes, vamos a ver aquí a
Pedro, vamos a poderlo editar. Estamos obteniendo la información.
 [06:51] Entonces por último, voy a eliminar este console.log, este otro console.log y el alert.
Entonces, ya vimos la aplicación de try...catch. También ya vimos cómo convertir de
funciones anteriores que se utilizaba el then, que se utilizaba el catch y nosotros ya podemos
trabajar entonces con async awaits.
 [07:15] Es una manera más limpia, muchísimo más moderna y probablemente, cuando tú
desarrolles algún proyecto o bien te encuentres trabajando, esta sería la manera ideal en la
cuál puedes realizar llamadas a back end o trabajar generalmente con promesas. Muy bien.
Vamos a dejar entonces el video hasta aquí y nos vemos en el último video.

PRÓXIMA ACTIVIDAD






07Lo que aprendimos
PRÓXIMA ACTIVIDAD



 Utilizar async/await para indicar funciones asíncronas.
 Tratar los errores con try/catch.
 anscripción
 [00:00] Hola. Si estás viendo este video es porque completaste el curso, y muchísimas
felicidades. Espero que todos los conocimientos que adquiriste en este curso, puedas
aplicarlos en tu carrera como programador. Bueno, vamos a dejar hasta aquí ya el curso y te
veo en el siguiente.

JS en La Web 3

Cargado por

Información del documento

Descripción original:

Título 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

JS en La Web 3

Cargado por

Copyright:

Formatos disponibles

Transcripción

video) empieza la descarga de json-server automáticamente.

npm install -g json-serverCOPIA EL CÓDIGO

plemente instalarla y listo. Debería aparecerte aquí. Muy bien.

[11:46] ¿Qué es lo que tendríamos? Bueno, de nuevo tener un const data2 =

Aquí está el link que les comenté en el video.

[01:18] Ahora, viéndolo de la manera en la cual nosotros lo estamos haciendo, comunicándonos

moverPersonaje(‘800’, ‘Derecha’, function() {

moverPersonaje(‘200’, ‘Izquierda’, function() {

moverPersonaje(‘10’, ‘Derecha’, function() {

moverPersonaje(‘60’, ‘Izquierda’, function() {

.then(() => moverPersonaje(‘800’, ‘Derecha’))

.then(() => moverPersonaje(‘200’, ‘Izquierda’))

.then(() => moverPersonaje(‘10’, ‘Derecha’ ))

.then(() => moverPersonaje(‘60’, ‘Izquierda’ ))COPIA EL CÓDIGO

Practicar ayuda mucho en el aprendizaje de un nuevo concepto, es muy importante que

Opinión del instructor

Lo que aprendimos en esta aula:

Practicar ayuda mucho en el aprendizaje de un nuevo concepto, es muy importante que

Opinión del instructor

Lo que aprendimos en esta aula:

[04:38] Entonces los formularios tienen un comportamiento ya definido dentro de JavaScript o

[06:49] Creo la constante email=document.querySelector y va a recibir el data attribute que va a ser

[07:30] Ya entonces estamos obteniendo la información, tanto el nombre como el correo

[08:40] Debería de ser la misma URL: http://localhost:3000/perfil pero ahora, si recuerdas, te

[09:07] Primero va a recibir la URL a la cual se va a conectar y después va a recibir un segundo

[03:22] Si yo lo guardo y regreso de nuevo a mi navegador, seguimos obteniendo el mismo

Opinión del instructor

Lo que aprendimos en esta aula:

05Haga lo que hicimos en aula

Opinión del instructor

Lo que aprendimos en esta aula:

05Haga lo que hicimos en aula

Practicar ayuda mucho en el aprendizaje de un nuevo concepto, es muy importante que

Opinión del instructor

Lo que aprendimos en esta aula:

También podría gustarte