Pues, ha salido la nueva versión de Node, la 17.5.0.
Y bueno, está bastante interesante porque justamente viene con Fetch API,
aunque pone que tiene soporte experimental.
Tened en cuenta que el hecho de que aporte la Fetch API no solo significa que viene Fetch, ¿vale?
Que esto es el típico, lo que mucha gente cree, ¿no?
Que cree que la Fetch API solo es el método Fetch.
Y no es así, o sea, tiene un montón de cosas más.
Por ejemplo, tiene el objeto Request, el objeto Response, que tú dirás, bueno, ¿y esto para qué sirve?
Bueno, esto puede ser muy útil justamente para frameworks como Express,
que necesitas trabajar con Request y Response.
Y el hecho de tener un objeto que está documentado en MDN para poder leer una Request
o poder crear una Response es súper importante y súper interesante.
Así que no solo es el método Fetch, sino que son todas las cosas asociadas a lo que sería la API de Fetch.
Y eso, Response, Request, además, mira, eventos de Fetch, o sea, aquí hay un montón de cosas.
El de Headers, que esto no lo tenía hasta ahora Node, un montón de cosas.
Total, ¿qué he pensado? Ostras, pues justamente una cosa que quería hacer era intentar hacer el ejemplo este del Proxy,
explicaros otra vez un poco lo del Proxy, pero hacer una cosa interesante con el Proxy,
y utilizar Node 17.5.0 con la Fetch para ver si somos capaces de ejecutarlo, de traernos los datos.
Esta era un poco la idea. No sé si tendrá mucho sentido, pero si tiene sentido, pues lo vamos a ver ahora.
El tema, ¿cómo podemos instalar? Esto depende, si tú lo tienes de otra forma, tendrás que instalar de otra forma.
Pero, ¿cómo podemos instalar la última versión de Node 17.5.0?
Pero, en caso que yo tengo nvm, pues es tan fácil como poner 17.5.0 con nvm install tal.
Y con esto ya debería estar.
¡Pum!
Ya debería.
Ya deberías. Vale, muy bien.
Para ver qué lo tenemos, Node-V.
Ya está.
Y además, supongo que se ha actualizado también la última versión.
Ah, no, la última no es la 8.4.1.
Pues te voy a enseñar también cómo se actualiza npm de una forma muy fácil.
Bien. Sí, fnm lo instalé en el Slimbook y nvm lo tengo aquí, justamente.
Si por lo que sea ya lo tuvieses instalado, pues hacéis un nvms y aquí hacéis nvm use y utilizáis aquí el proyecto que queráis.
La 14, la 16.
Yo en este caso no tenía instalada la 17 y la he instalado.
Y una vez que la instalas, te la usa automáticamente.
Lo cual está bastante bien.
Entonces, si alguna vez queréis actualizar la versión de npm, porque veis que tengo la 8.4.1, o sea, me he instalado la 8.4.1.
Y si no me equivoco, ya ha salido la...
Mira, esto, qué bonito es esto.
Qué bonito es esto, ¿eh?
Parece como Capicúa.
O sea, que...
Pero esto al final lo que tienes es que npm info npm es que ejecutas npm con el comando info para saber información del paquete npm.
Es bastante curioso.
Entonces, esto debería decirte cuál es la última versión de npm.
Yo esto...
El npm info lo utilizo un montón, un montón de veces.
Vale, ya podemos ver que la última es la 8.5.0, que se publicó hace cuatro días.
Pues para actualizarla, npm install, menos g, npm.
Y aquí podéis poner latest o podéis poner 8.5.0, lo que queráis.
Qué increíble es FIC.
Qué increíble es FIC que te detecta también las versiones que tienes, que hay remotas.
Está muy chulo, ¿eh, FIC?
Joder, cómo se le ocurren.
Bueno, pues podéis poner lo que queráis.
Yo voy a poner así, con el latest, y así se actualiza en un momentito.
Y de esta forma tenemos esto.
Ahora bien, y esto es un error que veo muchas veces con la gente que tiene npm, o sea, que utiliza nvm.
Cuando tú utilizas nvm, como nvm, que es el manejador de versiones de npm, fíjate que yo tengo aquí diferentes versiones, ¿no?
La 14, la 16, 16.8, 16.11, 17.5.
Si yo ahora me voy a la 16.8 por irme a una, 16.8.0, ten en cuenta que la versión de npm que tienes con ese node es diferente, ¿vale?
Porque es que la gente se cree que instala, ¿ves? Esta es la 16.
Ay, perdón.
Npm.
Aquí tengo la...
No tengo nada.
No sé, se ha quedado penchado.
A ver, ¿qué tengo?
¿Qué tengo?
Dime lo que tengo.
840.
Tendete en cuenta que no hay que borrar el caché.
No, no hay que borrar el caché.
No tiene nada que ver.
No es un tema de caché.
Es un tema de que en npm y en un montón de administradores de versiones de node, lo que hacen es que tu versión de node y las dependencias globales están totalmente separadas.
O sea, que tú, ahora yo cuando haga aquí un npm install menos g de lo que sea, para instalar un paquete global o lo que sea, se queda para esta versión de node.
No para todas las versiones de node.
Y lo mismo con la versión que tengas instalada de npm.
Así que, nada, tenedlo en cuenta porque hay veces que hay gente que con esto se vuelve muy loco.
Veis que aquí pongo npmuse 17 y ya te dice, vale, para eso usas esta y la versión de npm es esta, que ahora es diferente.
Bueno, pero esto no es lo importante.
Lo importante es que nos vamos a ir a temp.
Vamos a poner aquí fetch API.
Vamos a crear un nuevo proyecto de node para ver si funciona.
Me salió un kilo de errores.
Hostia, cabra.
Algo has hecho.
Algo has hecho.
Y para actualizar node de la 16.8 a la 16.14, pues lo mismo.
Bueno, te puedes instalar npm install 16 y te instala la última de la 16.
O sea, que ya lo tendrías.
Vale, vamos a hacer aquí un index.mjs para que vaya sonando el tema de utilizar módulos, que es interesante.
Harás algún día algo de integración continua en GitHub.
Ya hemos hecho.
Y de hecho, en YouTube, te lo voy a pasar, pero esto está oculto, ¿eh?
Esto está oculto.
Midu, MiduDev.
Esto está oculto.
Mira, en esta lista, a ver si la encuentro, MiduDevBookcamp, en el, joder, cuántos anuncios, la leche, cuántos anuncios y un poco más y no se ven ni los vídeos míos.
Si le das a esta lista, uy, calla.
Mira el último vídeo.
GitHub Actions Tutorial.
Pero este tutorial no está público todavía.
Hostia, tiene mil visualizaciones.
Y fíjate que está oculto.
O sea, me encanta, me encanta.
Voy a tener que hacer ocultos todos los vídeos.
¿Por qué está oculto?
Bueno, está oculto porque me faltan vídeos por medio, ¿vale?
Desde el ConectaMongoDB con GraphQL, aquí en medio hay vídeos como el de TypeScript, no sé qué, no sé cuánto.
Y el proyecto que se crea para utilizar en esta integración continua de GitHub Actions se hace antes.
Entonces, por eso creo que se hacía.
Pero bueno, lo podéis, podéis, mira, si tiene hasta comentarios.
Solo puedo decir una cosa tras ver el vídeo.
Te quiero.
Qué bueno.
Qué bueno.
Pues eso.
¿Has probado Prima?
Sí, hemos probado aquí Prima un poquito.
O sea que sí.
Bueno, lo pondré público eventualmente.
Algún día lo pondré público.
Vale, pues vamos a hacer esto.
¿Vale?
El index.js.
¿Y qué es lo que quería hacer?
Vale, quiero hacer dos cosas.
Dos cosas.
Estoy complicado.
Sí.
Quiero hacer dos cosas, ¿vale?
Lo primero que quiero hacer...
Vamos a poner algo más modito.
Venga.
Lo primero que quiero hacer es que vi en Twitter una forma muy interesante de utilizar el proxy
para crear, y ahora te explico qué es proxy y todo esto, para crear un cliente de REST API.
¿Vale?
Y tú me dirás, ¿qué es esto?
Un cliente de REST API.
¿Vale?
¿Y qué es una REST API?
La verdad es que muchas preguntas serían.
Bueno, voy a buscaros una...
Aquí, pum.
Star Wars API.
No.
Star Wars...
Star Wars API.
¿Vale?
Swappy.
Swappy.
Eso.
Bueno, la Swappy, por si no sabéis lo que es, es la Star Wars API.
Punto pelota.
No hay más.
Y esto es lo que te permite, justamente, esto es una REST API.
¿Qué es una REST API?
¿Qué es una REST API?
¿Cómo explico esto?
Una REST API, básicamente, es un tipo de...
O RESTful.
Bueno, es una interfaz para crear APIs en la que, básicamente,
utilizas una arquitectura en concreto en la que te refieres a objetos,
de los que puedes hacer gets, post, que sería para recuperar,
obtener datos, para actualizar datos y todo esto.
Entonces, es como una arquitectura que se utiliza con las APIs.
La habréis visto 80.000 millones de veces,
porque es lo típico de hacer, pues, con este objeto,
tienes API y luego tendrías el recurso, en este caso,
people y luego le pasarías la id.
Y, entonces, esto es muy típico y de esto le puedes hacer un get.
En este caso, en la SWAPI solo puedes hacer gets,
porque sería muy raro poder hacer post.
Pero también podrías hacer un delete y lo haces sobre los mismos recursos.
De esta forma, utilizas los verbos de HTTP para, justamente,
interactuar con la API, en lugar de hacerlo tanto con los endpoints.
Solo utilizas un endpoint, pero con cada endpoint tienes cuatro verbos
para hacer las acciones, el get, el post, el put, el delete,
todo este tipo de cosas.
Y ya está.
Eso sería un poquito la historia.
Entonces, lo bueno que normalmente tienen las REST APIs es que es bastante fácil
el cómo se componen, ¿no?
Porque aquí, si, por ejemplo, que te sabe la id de una persona,
para recuperar la persona 1, pues, ya veis que haces la request esta,
no haces people.
People barra 1, ¿no?
Tengo la id 1.
Le das a request y es Luke Skywalker.
Si tienes la id 2, le das a request, pues, ya tienes C3PO.
Y esto así, por siempre, jamás.
El tema es, el patch, bueno, también puede ser el patch.
Entonces, el tema es, el tema es, que para hacer un fetch de esto,
se podría hacer súper fácil y, de hecho, lo vamos a hacer en Node,
ahora que hemos visto que Node se supone que soporta esto.
Vamos a volver a nuestro código, un momentito, ¿vale?
Y vamos a hacer aquí un fetch de, de, de, de, de, de, de, joder,
a su API D.
Vamos a traernos esto.
Vamos a traernos esto por aquí.
Vamos a poner aquí API URL, ¿vale?
Y aquí, pues, tendríamos esto y vamos a decirle, perfecto.
Bueno, perfecto no, porque me hubiera gustado más un template string,
que es HACO pilot, pero bueno, no está mal.
Vamos a quitarle la barra final para que siempre se empiece con barra,
que creo que se vea un poquito mejor, ¿vale?
Entonces, ahora hacemos un fetch, el response.
Vamos a hacerlo con el top level await, para que veáis que también funciona en Node,
que el otro día lo vimos en Dino.
Y había gente que estaba ahí, hostia, en Dino, cómo mola Dino, y no la cosa esta, ¿vale?
Pues, vamos a tener aquí el JSON, res.json, y esto debe ser await.
Y aquí, pues, ya podríamos recuperar la información que queramos.
Ahora esto lo vamos a complicar, porque esto es lo más fácil del mundo,
es lo más típico de siempre.
Bueno, más que hide, vamos a ver, especies.
Ah, esto es otro tema de la rest API, es el hecho de cómo se descubre más información del propio recurso.
Entonces, puedes tener aquí, justamente, las URLs en las que puedes pedir la información, por ejemplo,
¿de qué planeta es?
Pues, aquí tendrías la URL para pedir más información.
Yo no soy muy fan de esto, esto es una de las cosas que más me gusta de GraphQL,
pero bueno, vamos a poner, yo qué sé, gender, por decir algo.
Vamos a poner el gender, ¿vale?
Del JSON.
Y aquí vamos a poner el console.log, del name, y el gender.
Esto es lo más típico, pero ahora lo complicaremos,
y veréis cómo vamos a hacer un cliente de rest, que está muy chulo.
Gracias, Sanjeno.
Estaba seco, estaba sequísimo.
¿Cómo se llama el Visual Studio Code el tema que estoy usando?
Fofo, es OneDart Pro.
Vale, porque esto lo odio, lo del name.
Name is deprecated.
La madre me parió.
Esto es un tema del DOM, que se ha quedado ahí por siempre jamás.
Bueno, pero no importa.
Si yo ahora hago node.index.mjs, esto peta,
porque como puedes ver me dice que fetch is not defined.
Se supone que ahora tenemos un modo experimental
que debería ser experimental fetch.
No es experimental fetch.
Vamos a ver cómo es.
Según esto es...
Ah, pues sí.
Y this ads experimental fetch.
Pues sí, se supone que era así.
Me he ativado.
Ah, espérate, que igual...
¿Dónde he puesto esto?
Aquí está la versión esta.
Vale.
Nos tenemos que asegurar que estamos utilizando la versión correcta,
que es la 17.5.0.
Ahora sí, sí que vamos a tener la versión experimental, ¿vale?
Y esto es un flag para activar el uso de fetch en node.
Así que le vamos a dar.
Y fetch is not defined.
Perfecto.
Pues yo veo que sigue pasando lo mismo.
O sea, nos han engañado.
Nos han engañado totalmente.
Ta, ta, ta, install fetch.
Lo he hecho bien, ¿no?
O sea, siempre...
Ta, ta, ta, ta, ta.
Pues no funciona igual.
Está bien.
Index.
Experimental fetch.
No.
Fetch is not defined.
Fetch is not defined.
Lo raro es que me lo pone aquí en el await.
Pero bueno.
Fetch is not defined.
No creo que haya que utilizar el global...
Global disk.
Add fetch API, no sé qué.
Add experimental.
Me lo voy a copiar.
Pero yo diría que me lo he copiado ya, ¿eh?
Nada.
Nada.
No se han engañado.
Me siento timado ahora mismo.
A ver.
Obviamente no creo que haya que poner el global disk.
Me extrañaría.
¿Ves?
¿Ves?
¿Qué es raro?
Pues yo pensaba que...
De hecho...
Mira, global disk.fetch.
Pero bueno, esto no hay que fiarse porque esto obviamente...
Pero mira, global disk.fetch y no lo encuentra.
It's not a function.
¿Qué creéis que está pasando?
Quizás sea el primer flag que el archivo.
Es verdad.
Justo...
Mira, lo he pensado antes también.
Que he dicho...
Hostia, a ver si va como un dino que a veces pasa.
Pues tienes razón.
Vamos a hacerlo.
Igual sí que tienes razón, ¿eh?
Que va primero.
Antes.
Vamos a poner...
Sí.
¡Muy bien!
¿Quién ha sido la persona que se la ha ganado?
¿Quién ha sido?
¿Quién ha sido?
¿Quién ha sido...?
¿Tendrás que hacer un record?
No.
Un record no, hombre.
Eso es de common.js.
Creo que en package.json hay que agregar experimental.
No.
¿Quién ha sido?
Pon el flag antes del fichero.
Eso, Suso.
Has de poner...
Julio Burgos también lo ha dicho.
Pero alguien lo ha dicho antes.
¿Alguien ha sido el primero?
Ah, no sé quién ha sido.
Pero alguien lo ha dicho.
Estuve usando...
Bueno, ahora no sé quién ha sido.
Pero quien haya sido...
Midu, instala fetch.
No, joder.
Que la idea es que viene ya.
Por defecto.
Bueno.
El tema, sí.
Había que ponerlo antes.
Ha sido Julio.
Bueno, Julio Burgos.
Felicidades.
Muchas gracias, ¿eh?
¿Por qué el archivo MJS?
MJS es de module.
Module.js.
Para poder utilizar los imports y poder utilizar el top level await y todo esto.
¿Vale?
Así sí...
Se supone que va a ser...
Bueno, se supone no.
Va a ser la forma por defecto de utilizar JavaScript.
Con módulos.
Con los imports.
En lugar del require.
¿Vale?
Entonces, ya tenemos aquí el aviso.
Experimental warning.
Fetch is an experimental feature.
The feature could change.
The technical time.
Que ya os digo yo que es bastante difícil que esto cambie.
Pero bueno.
Y luego, si quieres mostrar los warnings, no sé qué.
Blob experimental feature.
The feature...
Esto es una cosa que se está utilizando internamente.
Así que...
Ni caso.
Vale.
Pues ya tenemos una parte hecha.
Ahora...
Bien.
Imaginad que yo quiero ahora también, aparte de esto, porque esto está muy bien.
Esto es para recuperar las personitas, ¿no?
Personas de la API de Star Wars.
Y pues imaginad que ahora quiero recuperar, pues, planetas de la API de Star Wars, ¿no?
Y esto, pues, también me lo puedo traer aquí.
Y esto lo cambiaría por planet.
Y entiendo que esto...
Esto lo voy a poner por aquí.
Y esto lo vamos a poner aquí.
Vamos a poner...
No sé qué...
No sé los planetas que es lo que devuelve.
Pero vamos a poner aquí name.
Esto no sé si va...
Vamos a poner planet name.
Y vamos a ponerle aquí person name.
¿Vale?
Así es como se hace un...
Justamente cómo cambiarle el nombre a la variable.
Así que así estaremos sin dudas.
Hacemos esto.
Vale.
Aquí ya lo he puesto esto.
Ya lo he puesto esto.
Y...
¿Cómo podemos hacer esto para que no quede muy...?
No sé, me había ocurrido.
Utilizar un dos.
Muy bien.
Vale.
En respecto de token...
Igual me lo he inventado, lo del planet.
Es que es planet...
People...
Igual es planets, ¿eh?
Planets.
Normalmente los recursos se ponen en plural.
Pero justamente como people, que es el plural de person, que es cierto, pues no sé por qué no había caído.
Vale.
Pues ya tenemos aquí person name, Luke Skywalker, gender male, planet name, Tatooine.
Vale.
Está aquí bien.
Pero es que ahora viene lo chulo.
Ya veréis.
Es...
Quitar...
Ah, sí.
El global disk se puede quitar, ¿eh?
No es necesario.
Aunque...
Aunque...
Os voy a explicar algo.
Os voy a explicar algo, va.
Os voy a explicar algo.
La verdad es que es una buena práctica.
O yo considero que es una bastante buena práctica.
Y de hecho, yo lo tengo en el linter para que no se pueda hacer esto.
A la hora de utilizar objetos globales, es bastante raro que aparezcan de la nada.
Porque, claro, si aparecen de la nada, ¿cómo sabes que está ahí?
Entonces, puede ser fetch, pero podría ser importarlo.
O sea, tienes que indicar exactamente de dónde lo está sacando.
Global disk, además, es una cosa que tanto funciona el servidor como el cliente,
aunque no lo soportan todos los navegadores,
es una forma realmente de decir que lo está sacando del objeto global,
que viene de algún sitio.
Porque si no, imagínate un montón de variables que tengas que tener por ahí,
en las que salen de la nada.
A mí normalmente me gusta, antes, poner el window, no sé qué, o el disk punto.
Pero el global disk sería la forma de indicar el contexto global
en el que se está ejecutando.
Si ese cliente sería window, y en el caso de node sería global,
y este tipo de cosas.
Y de esta forma, pues lo podrías tener.
Hay reglas del linter que te dicen, oye, ¿de dónde sale este fetch?
Entonces, yo normalmente lo hago.
Aunque pueda quitarlo, yo lo suelo hacer.
Especialmente si estoy escribiendo código del cliente,
siempre pongo window.localstorage.
Window. para saber de dónde sale.
Entonces, no hace falta, pero yo lo uso bastante.
Incluso para las clases.
No entiendo lo que quiere decir con las clases.
A ver.
Se puede hacer así, claro.
Tú, el global disk es un objeto.
Global disk es un objeto.
Entonces, tú puedes hacer esto.
Esto lo puedes hacer sin problemas.
Y fíjate, puedes hacer con todo esto.
Todo esto está en global disk.
Así que, claro.
El response.json nos retorna una promesa.
Claro, si lo toquen.
Y justamente la estamos esperando, ¿no?
Está devolviendo una promesa.
Res.json devolve una promesa.
Hacemos una wait.
Y estamos esperando que se resuelva la promesa del res.json.
¿Qué es global disk?
Bueno, global disk.
¿Cuál es el problema?
¿Os explico global disk?
¿Document realmente es un objeto global?
Claro.
Document es un objeto global.
En el caso de...
Bueno.
Puesto esto.
Pero, claro.
Document es un objeto global.
Si no, podrías hacer esto.
Window.document.
Document es un objeto global y un poco especial.
Porque, en realidad, aunque es un objeto global,
es parte del...
Bueno, o sea, no es que sea especial.
Es que le pasa lo mismo.
Es que el document le pasa como el fetch.
Que es window.document.
Por eso es un objeto global.
Es como fetch.
Porque está en global disk.
Básicamente.
Es que es lo mismo.
Es que window y global disk son lo mismo.
¿Veis que pone true?
Es lo mismo.
Es lo mismo.
Mira.
Global disk.
Mira, disk es window.
Window.
Bueno.
Disk es global disk.
Y window puede ser global disk también.
Entonces.
¿Qué es global disk?
¿Qué es no sé qué?
Window es un objeto global que es como el objeto global que tendrías en el cliente, en el navegador.
En el caso de Node, ese objeto global se llamaba global.
Y tú dirás.
¿Por qué se llama global en un sitio y en otro sitio se llama window?
Y en otro sitio...
Bueno, porque sintácticamente estuvo mal.
Alguien la cagó.
Alguien lo hizo mal.
¿Por qué?
Porque aquí le llamó al objeto global, le llamó window, porque tienes una ventana.
Y en cambio, en el navegador, ¿vale?
Si ponemos aquí Node, global, este era el objeto global.
Aquí tú en global ves que pone clear interval, clear team out, todo este tipo de cosas también las tenemos justamente en este global.
Sería como el window.
Si pones window no funciona porque esta referencia no existe.
Pero si pones global, este objeto global que ves aquí, este global, esta variable que existe de la nada, justamente sería el window del navegador.
¿Qué pasa?
Que funcionan de forma distinta porque window puede tener, por ejemplo, local storage.
Y en el caso de global aquí, pues no tenemos el local storage, ¿no?
Que ya te digo que la idea, por ejemplo, en Dino, que estamos viendo cada vez más, es que este objeto global que tenemos en el servidor, si esto lo hiciésemos en Dino, esto sí que funcionaría.
Porque lo que se está buscando es que cada vez más el código de servidor, el objeto global, encaje con el objeto global que hay en el navegador.
Entonces, ¿qué es esto de global disk?
Global disk viene a solucionar justamente este problema.
Dice console.log.
Pues mira, console.log.
Igual, window.console.
¿Dónde os creíais que me salían todas estas cosas?
Me encanta porque os está follando la cabeza ahora mismo esto.
Ahora mismo estáis alucinando de, ostras, es que el console viene de window.
¿Qué?
Por eso, por eso, lo podía utilizar.
Global disk.console.
¿Qué os creíais?
Que esas cosas salían de la nada.
Claro, pues el console igual.
También escribes console, efectivamente.
Yo sí que utilizo global disk.console.
Lo que pasa es que la gente dirá, tú te pones a escribir global disk, global disk.console.
Tú haces estas cosas, ¿estás loco?
No.
Lo que muchas veces lo que se tiene, por ejemplo, es un fichero log.js.
Y en el log.js tú lo que haces es exportar el log, que además normalmente haces algo así y lo hacemos así.
Entonces tú lo que haces es importar luego el log y ya está.
Entonces tú haces log, hola, ya está.
¿Visto?
Tampoco es tan difícil, ¿eh?
Tampoco es tan difícil.
Entonces, esto es lo que sí que suelo hacer a veces.
Esto sí.
Entonces, ¿qué es mejor, Windows o global disk?
Bueno, pero dejad que os explique todavía.
Dejad que os explique.
Vale.
El tema, lo que pasa con esto, voy a quitar el Chrome, que me supa la energía y todo.
Ay, vale.
Entonces, el tema es que el global disk, mira, lo vamos a hacer aquí, que aquí también funciona.
Vale.
Global disk.
¿Ves?
El global disk es Windows.
Alguien dice, ¿y por qué esto retorna false?
A ver, no os voy a explicar ahora por qué esto retorna false.
Porque esto es bastante grande y largo de explicaros ahora mismo.
Porque son referencias distintas.
Pero justamente que Windows y global disk devuelvan true, lo que quiere decir es que son exactamente el mismo objeto.
Entonces, respondiendo a la pregunta de por qué el global disk, ¿vale?
¿Por qué el global disk?
El global disk este, lo que significa es el objeto global, independientemente de donde estés.
¿Por qué?
Porque de esta forma, uno, no te tienes que referir al objeto global como Windows, que ya hemos visto que depende del entorno de ejecución de tu JavaScript, puede estar o no.
Si estás en el cliente sí que está, si estás en Node no está.
De esta forma, tú siempre puedes utilizar global disk, que va a ser el objeto global de JavaScript en el que vas a tener todo este tipo de métodos.
Y así, ya no vas a depender tanto de que tu código se ejecute en un sitio u en otro.
Eso por un lado.
Otra razón por la del global disk.
Un problema que hay a veces es que disk, por defecto, o sea, cuando no se está ejecutando ningún tipo de cosa, o sea, está fuera de un contexto de ejecución, disk también es Windows.
Fíjate que también es Windows.
Entonces, para poder ejecutar, hay veces que hay gente que hace disk, no sé qué, disk fetch, bueno, yo estas cosas no las haría, ¿vale?
Pero lo que sí que haría a veces, tened en cuenta que que disk sea Windows, esto no ocurre siempre, esto pasa a veces.
En este caso sí que disk es Windows.
Pero si, por ejemplo, estuviésemos dentro de un objeto y estuvieros ejecutando el método, disk no sería Windows porque disk depende del contexto de ejecución.
O sea, que disk es esa variable mágica que comentaba antes Dan Abramov que puede cambiar su valor dependiendo de dónde se está ejecutando, ¿vale?
El contexto de ejecución de nuestras funciones, ¿vale?
Así que no penséis que esto siempre es así, pero por defecto, disk es el objeto global.
Así que aquí lo teníamos en este caso, ¿vale?
Ahora, pensad solo en global disk, que es el importante.
Global disk es una nueva forma de referirse al objeto global en lugar de utilizar Windows, tal.
Ahora, tened en cuenta que, por desgracia, global disk no es como totalmente...
O sea, por ejemplo, Internet Explorer 11 no soporta.
Tiene un buen soporte, 93%, pero hay algunos navegadores que a lo mejor no soportan y tal.
Tenedlo en cuenta si, por ejemplo, necesitáis soporte para Internet Explorer 11, pues no utilicéis global disk por ahí.
Lo que podéis hacer muchas veces es, por ejemplo, hay un polyfill que sería bastante fácil, que a ver si lo tenemos aquí...
¿Dónde lo he hecho? Aquí no sé dónde lo he hecho.
Pero a ver, tendríais un montón de formas de hacerlo.
Por ejemplo, podéis hacer type of global disk.
Si es undefined, pues entonces window, por ejemplo.
Entonces os devolvería el window en el caso que sea undefined y todo este tipo de cosas.
Y ya está.
Y todo esto no sé para qué, pero era para explicaros esto de dónde sale el fetch y por qué lo pongo.
Bueno, porque básicamente de esta forma sabes que este método fetch viene de global disk y no de un import ni de nada.
Hay veces que, claro, hay gente que dice, bueno, pero el fetch ya sabe de dónde sale.
Bueno, sí, pero muchas veces hay un montón de métodos que no saben ni de dónde sale ni nada.
Y el lint, el slint, tienes global object, global variables, no implicit globals.
Este justamente.
¿Vale?
Que creo que van por aquí los tiros.
En el que te obliga a evitar que tengas este tipo de problemas en el que no sabes de dónde salen las variables que estás utilizando y todo esto.
¿Vale?
Pues ya está.
Especialmente esto es muy interesante con variables que no sabe de dónde sale.
Por ejemplo, hay gente que utiliza window.optimisely, ¿no?
Y esto está en index.html.
Y luego en tu código javascript, pues utilizas así, optimisely.sdk.
Pero claro, ¿de dónde sale esto?
¿De dónde sale esto?
Bueno, pues esto sale.
Si tú le pones window.optimisely.sdk, al menos sabes de dónde sale.
O en este caso, que creo que sea más correcto, global disk.
¿Ok?
Vale.
Dicho esto, con este pedazo de cambio que hemos dado.
¿Me explicas qué es en más script y en qué en más script estamos?
Hay un vídeo de eso.
O sea, que si quieres...
Casi siempre, siempre hay un vídeo para todo.
Te vas a Middle Life.
Mira, YouTube, Middle Life.
Te vas aquí al segundo mejor canal de YouTube.
Y mira, ¿qué es en más script proposals?
Y aquí te explico qué es en más script.
¿En qué en más script estamos?
¿Qué es lo que viene en siguiente?
O sea, lo tienes todo.
Así que ahí lo tienes.
Ahí lo tienes, Neon Teta.
Ahí lo tienes.
Ya sabes lo que tienes que hacer.
Vale.
Entonces, dicho esto, vamos a hacer una REST API.
Vamos a hacer una REST API, no.
Una REST API client utilizando el objeto de proxy.
Vamos a ver si sale y si no sale, pues nada, ¿qué le vamos a hacer?
Pero debería ser sencilla.
El tema es que antes estaba explicando que para atacar a la API de Star Wars,
podríamos atacar a los recursos de People, al de Planets.
Pero ya veis que es un poco rollo, ¿no?
Todo lo que hay que hacer, que podría meter también aquí los checks.
También podríamos envolverlo en una función y todo esto.
Pero podríamos también hacer una función muy bonita utilizando los proxys de JavaScript.
Que al final es una...
Con muy poquito código se puede hacer una cosa muy bonita.
Y el otro día que hace unas semanas estuvimos hablando de proxy, pues dije,
ostras, pues esto es un ejemplo que está muy chulo.
Lo vi en Twitter y dije, ostras, pues lo voy a traer.
Podríamos crear una función que le vamos a llamar Create API.
Estoy compartiendo la pantalla, ¿no?
Vale.
Que si no, luego la vamos a liar.
Vale.
Create API, ¿no?
Y le vamos a pasar...
Más que la URL, porque aquí pone URL.
Bueno, sí, le vamos a pasar la URL entera, ¿vale?
Porque es que todas las REST APIs...
Esto no solo lo vamos a poder utilizar con la de Star Wars.
O sea, se supone que todo lo que fueran REST APIs, luego vamos a intentar a ver si funciona
tal cual con la de la PokeAPI, que creo que también es una REST API.
¿Vale?
Pues vamos a tener esta función.
La vamos a poner aquí arriba.
Y dentro de la CRUDID API lo que vamos a hacer es devolver un nuevo proxy.
Y vamos a devolver que esto tenga un objeto vacío.
Y aquí vamos a hacer nuestra magia.
¿Qué es lo que hacía el proxy?
El proxy básicamente lo que hace es interceptar las...
Como el intentar acceder a propiedades o setear valores a un objeto.
Y en este objeto, en este caso, es este objeto vacío.
Lo que estamos haciendo es crear un proxy que vamos a interceptar las llamadas que salían en este objeto.
¿Este objeto que ves aquí?
Pues en este objeto.
Y tú dirás, pero este objeto está vacío.
Efectivamente está vacío.
Pero ahora es que nosotros le vamos a dar la magia.
La magia que le vamos a dar nosotros gracias al GET.
Lo que vamos a hacer es que cada vez que alguien intente acceder a este objeto,
depende de lo que intente hacer, va a entrar en este método.
Y de hecho, vamos a ponerle un console.log para que lo veas claro.
¿Vale?
Vamos a poner aquí, ¿vale?
Get URL Pro, por ejemplo.
Por decir algo.
Vamos a poner esto.
De hecho, es que se podrían hacer un montón de cosas, ¿eh?
Pero por ahora vamos a hacer solo los GETs.
Y vamos a ponerle target prop, ¿vale?
Create API de la URL.
Devolvemos un proxy de este objeto vacío.
O sea, es un objeto que no tiene nada.
Pero cuando cada vez que intentamos a este objeto que estamos devolviendo acceder a una propiedad,
se va a ejecutar este método GET.
Y por ahora vamos a hacer un console.log.
¿Vale?
Pues vamos a hacer aquí una API y vamos a hacer un create API y vamos a pasarle, en este caso, la API.
Voy a llamarle Star Wars.
Star Wars API URL, ¿vale?
Por si luego intentamos otra.
¿Vale?
Y ahora aquí, pues, vamos a hacer API.people, por decir algo.
¿Por qué people?
Bueno, porque ya hemos visto que tenemos aquí people.
Entonces, lo que vamos a hacer es crear un API.people y este método, al intentar ejecutarlo, ¿qué es lo que va a hacer?
Va a venir a este método y vamos a ver este console.log.get, donde vamos a ver GET, target y prop.
Vamos a ver qué es lo que nos devuelve.
Voy a comentar todo esto y lo vamos a ver en funcionamiento.
Voy a abrir aquí.
Y vamos a ver qué versión tengo aquí.
¿Vale?
Necesitamos la 17, que es la última que tenía fetch.
Vamos a hacer node index.mjs.
Bueno, perdón.
Experimental fetch node.mjs.
¿Vale?
Vale.
Ay, perdón.
Que he puesto node y es index.
Vale.
Vale.
Pone API.people is not a function.
It's not a function.
Espérate.
Claro, no es una función.
¿Por qué no es una función?
Está bien que haya petado.
No es una función porque, fíjate, que sí que estamos viendo el console.log.
Aquí veas que me pone GET, un objeto vacío y people, y luego PETA.
¿Por qué PETA?
Porque no he devuelto esto una función.
¿Por qué tengo que devolver una función?
Porque este método GET es el que se ejecuta justamente cuando aquí, en este punto, estoy accediendo a esta propiedad.
¿Vale?
Cuando yo accedo con el punto people, entonces se ejecuta este método.
Pero cuando intento ejecutarlo, claro, no está devolviendo una función, está devolviendo undefined.
Entonces vas a ver que ahora devuelvo la función y ahora va a funcionar bien.
De hecho, este console.log lo vamos a pasar dentro, que tiene bastante más sentido.
Y de esta forma vamos a poder también probar qué pasa si le decimos happypeople1.
¿Vale?
Vamos a quitar esto y así vamos a poder ver más información.
Voy a limpiar esto.
Ejecuto.
Vale.
Y de hecho, vale, prop.
Tenemos la prop.
Vale.
¿Dónde tenemos el 1?
Parece que no lo tenemos en ningún sitio, pero en realidad sí que lo tenemos en un lado.
Lo tenemos aquí.
De hecho, lo vamos a recuperar aquí con id.
Este target no tiene sentido que lo mostremos, así que vamos a quitar esto.
Y vamos a poner id.
De esta forma ahora vamos a ver que vamos a tener tanto el people como el id.
O sea, con esto ahora ya tenemos como la posibilidad de acceder a la parte de people y con el id de la persona.
O sea, solo haciendo esto.
Pues ahora viene la magia.
Básicamente la magia aquí sería que esto, esta función que estábamos devolviendo, que era asíncrona, la vamos a devolver como si fuese asíncrona.
¿Vale?
Y lo que vamos a hacer aquí dentro, pues es lo que estábamos haciendo aquí fuera.
Algo parecido a todo esto.
Vamos a quitar esto.
Voy a ponerlo así más o menos.
¿Qué es lo que tiene que hacer?
Vamos a hacer un fetch y en lugar de API y URL, este no había inventado antes, aquí lo que vamos a hacer es utilizar la URL que le pasamos aquí, que es la URL que le pasamos aquí, que es esta URL.
O sea, la de la Star Wars.
Ahora, ¿de dónde sacamos este people?
Pues este people lo sacamos de prop, que justamente lo hemos visto, ¿no?
Que podemos acceder, ves, esto era prop.
Y la idea se la tenemos que pasar de aquí.
O sea, que aquí tendríamos id.
Ahora hacemos una wait.
Aquí podríamos hacer algún check más.
Por ejemplo, podríamos mirar si la respuesta está ok.
Entonces, intentamos hacer algo, porque si no, lo que podemos hacer es devolver otro tipo de cosa.
De hecho, con esto, lo que podemos hacer aquí es devolver.
Si está ok, vamos a devolver esto, el JSON directamente.
Y así, lo que podemos hacer aquí es, pues, a ver, podríamos devolver o un promise reject, promise reject, por ejemplo.
¿Vale?
Le decimos error, something wrong happened.
¿Vale?
Si algo no ha ido bien, pues, le devolvemos un promise reject y ya, pues, si quiere manejar el error, pues, lo maneje.
Ya está.
O sea, con esto, ahora fíjate.
Tenemos un credit API, get, y hacemos toda esta cosa de aquí, que parece súper rara.
¿Vale?
Sí, parece súper rara.
Pero fíjate que ahora podemos hacer api.people y esto.
Podemos hacer una wait.
Tendríamos aquí look.
Vamos a hacer un console log.
De look.
¿Vale?
Guardamos los cambios.
Limpio aquí.
Y fíjate, qué bonito.
Qué bonito.
¿Qué tenemos aquí?
Tenemos la respuesta de look, porque le he pasado api.people1.
Bueno, pues, si le pongo esto y le pongo aquí 2, tenemos c3po.
¿Vale?
Así que vamos a poner aquí esto.
Vamos a poner look.name.
¿Vale?
Para que lo veamos más fácil.
Vamos a poner aquí c3po, c3po.name.
Vamos a ver el nombre.
Pero ahora es donde viene lo increíble que te va a reventar la cabeza.
Porque hasta aquí vas a decir, bueno, esto está muy bien.
Pero ¿qué has hecho todo esto?
Para lo de people.
No, amigo.
No.
Lo que estoy haciendo, ¿qué me dices?
Que tengo planets, starships.
Pues, fíjate lo que acabamos de hacer.
Acabamos de crear un cliente api.res que te va a follar la mente.
Mira, planet, await, api.planet1.
¿Qué quieres?
¿Una nave?
Venga, starship, await, api.starship y le ponemos starship1.
Pues, todo esto que ves aquí, esto funciona.
Todo esto funciona sin haber hecho nada.
Mira, vamos a ver cuál es el nombre del planeta.
Y vamos a ver aquí cuál es el nombre de la nave.
Todo esto funciona.
Porque todo esto, mientras sean algunos que existen, obviamente.
Que aquí veo people, planets, starships.
Mira, películas.
Pues, también.
Esta de películas, esta films, lo que sea, también funciona.
También funciona.
Mira.
Film, vamos a ver cuál es la primera.
api.films1.
Ah, importante.
Importante que no me voy a liar.
¿Vale?
¿Por qué puede petar?
Porque este planet no es planet, es planets.
Y este starships es starships.
Y films es también así.
Si no, no funcionaría.
Porque esta key que se está utilizando aquí, esta propiedad, es la que utiliza aquí para meterla en la URL.
Esto lo va a cambiar por esto.
Entonces, es importante que sea la correcta.
Si no, no funcionaría.
Pero bueno, podríamos capturar el error y ya está.
Pues, todo esto que ves aquí, todo esto funciona.
Todo esto funciona.
¿Que no me crees?
No me crees.
O sea, es que no me crees.
No me crees.
Vale, pues, toma.
Vale, son synchron happy.
Pues, no.
No ha funcionado.
A ver qué hemos hecho mal.
Algo hemos roto hasta aquí.
Hasta aquí.
Hasta aquí esto parecía que funcionaba.
Estos dos sí que funcionan.
Vamos a verlos.
¿No me crees?
Pues, está bien que no me creas porque como puedes ver no ha funcionado.
Bueno, espérate.
Si encima.
Ah, planet.name.
Vale, estos dos sí que funcionan.
Vamos a ver el de planets.
Planets.
Es que este plan.
Claro, es que no sé si planets tiene un nombre.
Ahí ya me he venido muy arriba.
A ver si es que tiene que tener un nombre, ¿no?
Claro, claro.
Esto sí que tiene un nombre.
Vamos a comentar estos dos.
Pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa, pa.
Y vamos a...
Ay, es que he puesto start ship.
Igual la he liado ahí, ¿eh?
Sí, porque aquí tenemos este.
Y es que es start ship.
Y aquí he puesto start ship.
Pues creo que era eso, ¿eh?
Creo que en realidad ha sido un typo que he metido ahí en medio.
Y que todo lo demás debía estar funcionando.
Puede ser, ¿eh?
A ver.
No.
Starship.
A ver, vamos a...
Voy a poner aquí el film entero.
Es que también me la...
Yo me la he jugado aquí un montón con el tema este de...
Del punto name.
Pero a ver.
Something wrong happened.
Bueno, a ver.
Lo bueno de esto es que aquí podemos...
Este error que yo he puesto aquí, bastante pirata.
En realidad ponemos aquí...
Podemos poner resource.
Ponemos esto aquí.
Este resource lo vamos a utilizar aquí.
Y vamos a poner aquí with.
Podemos hacer esto.
Y planets 1, 1, 1.
Y starships.
Starships.
A ver si lo he escrito bien.
Planets.
Y happy films, no sé qué.
Vale.
Vale.
Lo que...
El error está con esto.
Ay, no.
Chrome.
¿Ves?
No lo he encontrado.
No lo he encontrado.
Starships 1.
Esto no sé si es que lo he escrito mal.
Pero bueno.
Que también es verdad porque no he hecho...
Starships 9.
Porque el 1 no va.
Hostia, es que no existe el 1.
El Starship 1 no existe.
La madre que me parió.
Vale, vale.
Si la culpa encima...
Si es que...
Y a ver las films.
A ver si es que el films 1 tampoco existe y la voy a liar.
Vale, este sí existe.
Vale, pues el problema es que no existía el Starship 1.
Pero bueno, ya veis que podemos hacer que la información del error sea mucho mejor.
Esto soy yo que he sido súper rápido.
Pero...
Hostia.
Se ha saltado la primera nave.
Y la primera nave tendría que ser con milonario.
Lo sabe Dios.
Bueno.
Pero ya veis que con esto ahora sí.
Ahora sí que está funcionando correctamente.
Y lo mejor de esto es que ahora lo que tenemos aquí es api.people, api.com, no sé qué.
O sea, tenemos como un pequeño cliente de la REST API utilizando un proxy de JavaScript.
Y creo que es un ejemplo muy bueno de justamente cómo funcionan los proxies en JavaScript.
Porque lo que hemos creado de este objeto que era vacío justamente es interceptar cada vez que intentamos acceder a una propiedad, api.people.
Y claro, te digo más, porque ahora esto hay muchas cosas que se pueden mejorar.
Muchas, muchas, muchas, muchas cosas.
Por ejemplo, imagínate que intentas acceder a una que no existe.
Yo aquí lo que podría hacer es accepted methods.
Bueno, methods.
Accepted resources, ¿no?
Y podría tener aquí people, planets, starships y lo que sea, ¿vale?
Bueno, starships, films, por ejemplo.
O esto se lo podríamos pasar también aquí como accepted resources, ¿vale?
Accepted resources.
Mira, lo vamos a hacer así para que veamos que además es súper configurable.
Star Wars accepted resources.
Pues este accepted resources se lo podemos pasar aquí como segundo parámetro, ¿vale?
Y ahora lo que podemos hacer es ver que realmente tenemos que mirar si accepted resources realmente incluye la propiedad que estamos intentando acceder, ¿vale?
Si incluye, ¿vale?
Pues bien, si no incluye, pues lo que podemos hacer justamente es return promise.reject error resource.
Le decimos la resource además que está intentando acceder.
Vamos a poner esto por aquí.
Vamos a poner esto un poco más legible, ¿vale?
Resource not accepted.
Fíjate, antes de hacer la API, la llamada, ¿vale?
Lo que podemos hacer es, vamos a mirar si esta resource realmente está aceptada.
Imagina que entonces en lugar de todo esto, pues alguien dice, ah, pues voy a poner pepito o midu, midu, midu, midu, midu, midu, midu def, uno, ¿no?
Pues lo que se va a encontrar con esto es que antes de hacer el fetch, antes de hacer el fetch, le debería petar.
Pues no, no.
Ah, porque es not a function, vale.
No pasa nada, no pasa nada.
Es que esto lo tendríamos que hacer aquí dentro.
Esto lo deberíamos hacer aquí dentro, ¿vale?
Podríamos hacerlo de otra forma, pero bueno, lo podemos hacer aquí dentro.
Y ahora sí, ¿ves?
Resource midu def, not accepted.
De esta forma controlamos, antes de que haga el fetch, justamente, podríamos controlar esto.
Pero claro, ahora me dirías, bueno, pero esto está muy bien, el ejemplo de la Star Wars API.
Bueno, pues vamos a ver la PokeApi.
Vamos a ver la PokeApi.
Porque creo que la PokeApi es un rest.
Mira, ¿ves? Pone restful.
Pues es que la PokeApi funcionaría perfectamente.
Mira, pongamos que tenemos la de Star Wars por aquí y tenemos también la de PokeApi accepted resources.
Vamos a decir que las que acepta, por ejemplo, es Pokémon, Pokémon, Pokémon, Type, Ability, ¿vale?
Vamos a poner estas.
Y por otro lado vamos a poner...
PokeApi URL, ¿vale?
Y ya ves, la PokeApi URL, pues la tenemos aquí.
Bueno, no me la ha copiado, ¿no?
No, no me la ha copiado.
Dios, ¿cómo odio cuando alguien no me deja copiar algo?
Vale, ya está.
PokeApi URL.
Bueno, pues lo mismo que hemos hecho antes aquí, que hemos creado la Star Wars API, ¿no?
Y tenemos aquí la Star Wars API.
Y aquí tendríamos people.
Y ahí teníamos a Luke.
Pues yo que puedo hacer aquí la PokeApi, create API, PokeApi, con la URL, los resources.
Entonces, a ver, esto es...
Aquí es que el límite es tu imaginación aquí, ¿vale?
Esto es el límite de tu imaginación.
Gracias, Suso, que se me había olvidado la barrita.
Gracias.
Entonces, PokeApi, no sé qué, no sé cuánto.
Pues aquí lo mismo.
Ahora ya podríamos aquí hacer await, PokeApi, Pokémon.
Mira, es que esto es increíble.
Esto es increíble.
Si ahí sale la información del Pikachu, 100 subs.
Va.
No es broma.
Es broma.
Accepte Horrocruxes.
Venga.
Vamos a ver el Pikachu.
¡Pikachu!
La verdad es que no sé si funcionará.
Pero sí que funciona.
No sé si funcionará, pero aquí tenemos.
Un cliente REST de la PokeApi.
O sea, lo mejor es que este, este, estas, ¿cuántas líneas de código hemos hecho?
Hemos hecho nada.
O sea, 15 líneas de código.
En 15 líneas de código hemos creado un cliente REST que lo puedes utilizar con todo tipo de APIs
y que te permite, además, con validación.
O sea, te validas si ese recurso es válido para evitar que lo intente llamar antes.
Y ya está.
O sea, a ver, aquí podrías hacer 10.000 millones de cosas.
Por ejemplo, podríamos hacer pokeapi.get.pokémon, ¿no?
Para hacer gets, posts, deletes.
O sea, podríamos hacer un montón de cosas.
Pero, bueno, en este ejemplo es así porque si no me podría estar aquí 8 líneas.
Ah, perdón, 12 líneas.
Perdón, perdón.
Pero el tema es que podríais hacer lo que queráis.
Y lo que es mejor es que es totalmente agnóstico.
Justamente, justamente, es totalmente agnóstico a qué...
¿Sabes?
O sea, si estás utilizando la API de Star Wars, estás utilizando la que sea.
O sea, que es totalmente agnóstico.
Compost también funciona, obvio.
A ver, habría que hacer bastantes cambios, ¿vale?
No confundir con este get.
Este get no tiene nada que ver con el action del HTTP method.
Este get es cuando haces el get este.
Esto es un get, ¿no?
O sea, esto es recupera get propiedad Pokémon de pokeapi.
Y es cuando haces esto, es que se está ejecutando justamente esto, ¿vale?
Un word del consultando una API de un diccionario.
Hostia.
Con types.
A ver, con types también lo podrías hacer, obviamente.
De hecho, lo podrías hacer con genéricos, justamente para pasarle qué resources son los aceptados y ya está.
Y suelo usar un code generator a partir del open API.
Bueno, claro, un code generator puede estar, si ya tienes un code generator, ya está.
Ya creo que sea estable con node 18.
Bueno, a ver, lo que hemos visto, el fetch.
Al final esto, es verdad que este fetch es de experimental, pero a partir de esto lo podríamos importar mientras.
Y si tienes rutas más largas, a ver, al final tened en cuenta que esto está pensado, o sea, hemos solucionado un cliente de restful, obviamente.
O sea, no es tan fácil.
Si no es exactamente restful, pues no funcionaría.
Tal cual.
Pero sí que se podría complicar más y se podrían llegar a ver cosas.
Por ejemplo, pasarle query params sería bastante fácil.
Le podéis pasar las query params.
Si no, directamente se las podéis pasar como un segundo parámetro, ¿vale?
Porque aquí le podéis pasar lo que queráis.
O sea, podríais pasarle esto.
Por ejemplo, limit one.
Esto está tirado, ¿no?
Y aquí lo que podemos pasarle, este objeto de query params, esto, aparte, en el ID podríamos tener...
Esto ID, o sea, esto está pensado para un restful, ¿vale?
Pero aquí podríais tener query params.
Y estos query params, pues lo podríais pasar y tal.
O sea, aquí es que al final...
O que el próximo retorno...
Sí, o sea, aquí el límite es vuestra imaginación.
Vuestra imaginación.
Y hay, claro, un montón de casos de uso de cosas que a lo mejor queréis arreglar.
Pero vaya, que tiene buena pinta ya.
Lo que me parece increíble es que con tan pocas líneas se hace una cosa muy chula.
Y que realmente queda interesante.
Y esto nada, es que esto...
Mira, es que esto, de hecho, con el URL search params...
A ver.
Console URL search params punto...
Params...
Es que no sé si esto funciona.
¿Esto era así?
¿O esto solo...?
Ay, que la he liado aquí.
¿Qué he hecho aquí?
¿Qué he hecho aquí?
Const params...
Params punto get limit.
Vale.
Y params punto to string.
Vale.
Pues ya está.
O sea que con esto...
Porque ahora entiendo que...
No sé si ya estaba, pero URL search params debería funcionar.
Entonces, query params.
Bueno, pues sí...
Podemos hacer let query string.
Si tenemos query params, pues hacemos esto con los query params.
Query params punto to string.
Y si no, pues le ponemos aquí el query string vacío.
Esto creo que no tenía...
Vale.
Esto tendríamos que hacerlo así.
Porque creo que no pone el cuestión mar del principio.
Y con esto podríamos hacer esto.
Y ya lo tendríamos.
Vamos a probar.
A ver, por ejemplo...
Aquí creo que hemos visto...
Mira, limit 100.
Pokémon limit 100.
De hecho, también podríamos hacer que si no tiene ID, pues no la pusiera.
O sea, es que podría tener un montón de cosas.
Ah, es que qué pena que ahí...
No sé si tiene...
Bueno, vamos a ver al menos...
Vamos a ver el resource.
¿Qué se llama?
Resource.
Vale.
Y no hace falta que veamos si tiene al Pikachu.
No tiene al Pikachu.
Vamos a ver esto.
¿Ves?
Pokéapi.
¿Ves?
O sea, ya está.
Resource.
Pokéapi.
Pokémon.
Pikachu.
Limit 1.
O sea, que tú aquí le podrías ponerle...
O sea, bueno, no sé.
Morinfo.
True.
Whatever.
Dos.
Y aquí con esto ya...
Fíjate.
Ya estaría creando todo el query string.
Y este que no tiene query string, pues lo dejaría tal cual.
Mira, le hemos añadido el query string en un momento también.
O sea, hemos...
Aquí a tope, ¿eh?
Puedes usar también URL.prototype.searchparams.
URL....
¿Y cuál es la diferencia con esto?
O sea, que se puede utilizar...
O sea, es que poder se puede hacer un montón de formas, pero...
O sea, qué ventaja tiene el searchparams, realmente.
Me fumo tremendo porro en esta sintaxis, ya te digo.
La verdad es que sí.
Entonces se puede hacer bastante profundo.
Claro, es que esto lo podéis llevar hasta donde queráis.
Y ya os digo que...
Pensad que como aquí...
Hacéis el punto post.
Aquí esto podría devolver esto.
Es que esto...
Es que esto...
Claro, es que es punto post.
Pues cuando hacéis el get, esto tendría que devolver...
Podrías devolver otro proxy y hacer exactamente lo mismo.
O dependiendo de este punto post, devolver...
Sí, lo mejor sería devolver otro proxy.
Y eso ya te lo simplificaría.
New URL.
Ya, pero ¿por qué...?
Es que no tengo la URL, solo tengo la query string.
¿No?
¿Para qué iba a querer hacer eso de new URL, URL?
Si...
Justamente estoy trabajando con searchparams, ¿no?
O sea, le quiero pasar los queryparams.
¿Cómo qué?
¿Para qué creo crear una URL entera?
A ver.
No sé si...
O sea, yo tengo aquí un objeto de queryparams.
Entonces, ¿cómo voy a crear la new URL?
¿Sabes?
A partir de que creo...
Si yo le paso este, no le va a gustar.
No, claro que no le va a gustar.
O sea, lo de URL, entiendo que lo podríamos utilizar para otra cosa.
Pero para tener un objeto y pasarlo a un string,
pues yo creo que lo ideal es esto, ¿no?
Lo que podríamos hacer es más, claro, al revés, ¿no?
El pasarle los queryparams después y tal.
Sí, lo podríamos pasar.
O sea, le podríamos crear el queryparams y pasarle aquí después.
Hacerlo aquí.
El riesgo es que le pasamos.
Porque aquí, aparte de...
¿Ves?
Se le puede pasar un input, se le puede pasar un objeto.
Podríamos, en lugar de crear el string aquí.
Es verdad.
Podríamos hacerlo así.
Pero bueno, era un ejemplo.
Tampoco...
Soy nuevo, no entiendo nada.
¡Hostia, matute!
No pasa nada, ¿eh?
No pasa nada que no entiendas.
Básicamente, MJS es module JS.
Module JavaScript.
El MJS se utiliza para utilizar los imports y los exports en Node.js.
Lo voy a quitar porque me habéis preguntado un montón.
Lo cual me sabe fatal.
Porque la verdad es que es súper importante e interesante.
Yo no sé dónde metéis, la verdad.
Porque yo lo he explicado muchas veces.
Pero bueno, voy a poner esto para que no me siga explicando más la gente.
No me pregunte más la gente.
El objeto proxy nos permite crear un proxy para otro objeto.
El cual puede interceptar y desrefinir operaciones fundamentales para dicho objeto.
Efectivamente.
Ahí está.
Claro, David.
Pero es que eso es bastante más complicado, ¿no?
O sea, creamos la URL, luego la base y luego tienes que hacerle el set.
Y como sabes, tienes que pasarle el objeto.
Y además del objeto, el set no le puede pasar solo uno.
O sea, es un poco más difícil, ¿no?
Es que yo me parece que...
O sea, tú dices URL, new, URL.
Entonces, URL.
Le pasamos aquí la base.
URL, punto.
Y luego...
Un poquito más difícil, ¿no?
Y hacer params, search params, punto.
Además, no es set.
Tendría que ser...
En realidad tendría que ser append.
Porque si le haces el set...
Bueno, depende.
Claro, es que depende.
Me parece que es un poco mejor el otro, ¿no?
Porque es que si no...
Además, el set...
Pero tendríamos entonces que iterar.
Es un poco más...
Si es más fácil al final hacerlo con...
Pasarle el objeto entero y ya está.
Y ya está.
O sea, entiendo lo que dices.
Que al final sería al revés.
Pero...
Es que así se hace una y ya está, ¿no?
Es rebuscado.
El código.
Bueno, a ver.
Esto es juguetear, ¿vale?
Esto es juguetear.
Tampoco hay que...
Tampoco ahora os volváis locos.
Que entiendo que...
Entiendo que os podéis volver locos.
Lo mismo con una función no se puede hacer.
Lo mismo no.
Se puede hacer otra cosa.
Pero lo mismo no.
¿Por qué no se puede hacer?
Lo mismo.
No se puede hacer lo mismo.
Porque, hombre.
La posibilidad de hacer el punto Pokémon y tal.
A ver.
Es que tendrías que hacerlo...
Se podría hacer otra cosa.
No se podría hacer exactamente lo mismo.
Tú lo que podrías hacer...
Piensa que esta Creative API, esto es totalmente agnóstico a las URLs que estés utilizando.
¿Vale?
Entonces, claro que con una función nosotros podríamos hacer un montón de cosas.
Se podrían hacer un montón de cosas.
Pero lo mismo no.
Fíjate que la API que nos permite es hacer .people, que esto sea recurso, y pasarle la idea.
Que esto también lo podrías arreglar y pasarle a otras cosas.
¿Qué inconveniente le ves?
A ver.
Para mí, el mayor inconveniente, básicamente, sería que está muy forzado a que sea una RESTful API.
Si no es una RESTful, la has liado.
Por ejemplo, lo que decía alguien.
Bueno, ¿y qué pasa si la URL es más larga?
Por ejemplo, el resource, imagínate que quieres acceder a people barra 1 barra whatever barra 2.
Bueno, pues esto empieza a complicarse.
Y por lo tanto, empiezas a hacer muchas magias o cosas raras.
Luego, pues también, no sé, cosas que se me ocurran.
Pues que tenga que ser un subrecurso, ¿no?
People.fabs2, por decir algo, ¿no?
Pues tampoco te funcionaría bien.
Entonces, bueno, puede tener sus cosillas, pero no son imposibles de arreglar.
Eso es verdad, ¿sabes?
No son imposibles de arreglar.
Porque siempre se podría hacer alguna cosa, ya sea que, por ejemplo, imaginemos que queremos los Fabs de, decimos, people barra 1.
Y quieres recuperar los favoritos de la persona 1.
Bueno, pues aquí podrías hacer más cosas, yo qué sé.
Igual que le podemos pasar, podríamos pasarle query string, que fuese un objeto, o ks, que fuese un objeto.
Le podríamos pasar subresource y seguir pasándole lo que quieras.
Todo podría tener un arreglo, pero hombre, ya empieza a perder su magia.
Obviamente.
Entonces, creo que el mayor inconveniente es que se basa mucho en la arquitectura REST.
A partir de ahí, pues ya...
Pero bueno, fíjate que son unas pocas líneas de código, que quieres tirar rápidamente la PokeAPI y no tienes ganas de escribir nada,
pues si ya tienes esta utilidad, pues ya cuando quieras utilizar la PokeAPI, además a este le podrías poner tipos y cosas así.
Y ya sería increíble.
Fue divertido. A ver, me parece muy divertido por el hecho de entender cómo funciona el proxy.
Es un ejercicio muy chulo para entender cómo funciona el objeto proxy.
¿Podrías explicar algún día el uso de WebWorkers con React?
¿Sea algún paquete que ayuda a su manejo?
Es que no creo que tenga nada que ver con React.
¿Cualquier ejemplo que se te ocurra de WebWorkers podría ser con JavaScript en general?
Cualquier cosa.
Por ejemplo, una cosa que quieras que pase en el segundo plano y que no bloquee el thread principal.
Es que es cualquier cosa.
Es que podría ser cualquier cosa.
Por ejemplo, en el AppNGS yo lo utilizaba para ejecutar los tests.
Porque si ejecutaba los tests en el thread principal, se bloqueaba el thread principal y el usuario no podía escribir en el editor.
Entonces, al ponerlo en un WebWorker, independientemente de que sea React, de hecho creo...
Sí, sí que es React ese proyecto.
Pero no es porque sea React.
Es porque quieres que no bloquee el thread principal o tu UI.
Ya está. Cualquier cosa.
Es muy interesante el tema de los WebWorkers.
Lo malo es que no se soporta al 100%.
Pero es muy interesante porque al final, si es código asíncrono, podría llevártelo a un WebWorker.
Y así hacerlo en un thread aparte del tuyo principal.
Si es un fetch a una API, podría llegar a hacerlo.
Y el mapeo de datos, la validación de datos, todo, todo.
Lo cual estaría bastante bien.
Cuando va creciendo la URL se complica.
Claro.
Digamos que fue divertido.
Sí.
Midu, ¿qué opinas de los access y refresh tokens?
¿Los has aplicado alguna vez?
Los he aplicado y bueno, que están bien.
O sea, que tienen todo sentido el mundo para temas de seguridad.
O sea, no me parecen mal.
Lo que sí que me parece...
O sea, yo intento evitar al máximo tener que pelearme con ellos.
O sea, tener que yo implementar toda la lógica.
Es un trabajazo increíble.
Y por eso existen startups como Out0 que se dedican exactamente a esto.
O sea, por eso.
Está genial.
¿En qué otras circunstancias sería muy útil usar Proxy?
Bueno, hay un montón de casos.
Pero siempre que quieras interceptar algo...
Por ejemplo, imagínate que quieres saber cada vez que se accede a una propiedad y quieres
loggear o trackear esto.
Pues lo puedes hacer.
Es una forma de hacerlo.
O quieres decorar, que también se puede utilizar decoradores, pero quieres decorar un comportamiento
de un método de un objeto.
Pues lo puedes hacer.
Y es que esto puede ser mil millones de cosas.
Añadir login, tracking, de forma que sea totalmente transparente.
Y en este caso es un poco más como chulo porque lo hacemos como al revés.
Desde un objeto totalmente vacío le estamos añadiendo cosas.
Claro, esto se puede hacer client-side.
Esto funciona totalmente sin ningún problema, claro.
¿Os creéis que esto me lo he inventado yo aquí y solo funciona en Node?
No, hombre, no.
Este código si no...