¡Hola, muy buenas! En la clase del curso gratuito de Svelte de hoy vamos a ver cómo podemos manejar promesas de una forma súper sencilla y de una forma declarativa
que no vamos a tener que tratar con esta promesa de forma manual como hemos hecho en una de las clases anteriores
porque esto es una clase de un curso gratuito de Svelte que te dejo aquí arriba por si quieres echarle un vistazo, por si acabas de empezar o por si lo quieres repasar.
Y si ya lo tienes todo visto, pues nada, ya podemos seguir a ver cómo podemos manejar las promesas de forma súper sencilla dentro de los componentes de Svelte.
Pues este era nuestro proyecto que era un buscador de películas, lo habíamos dejado tal que así y si os parece lo primero que vamos a hacer es pues darle un poquito más de vida, ¿vale?
Porque este buscador de películas queda un poco feo, un poco soso, un poco sencillo.
Así que lo primero que vamos a añadirle aquí en la app, vamos a poner unos estilos, estos estilos ya vamos a poner dentro del section, vamos a poner el input que teníamos hasta ahora
y vamos a dejarlo esto con un H1 que sea Search Movies y vamos a buscar las palomitas, vamos a ponerla aquí, ahora para que tome un poquito de vida, ¿vale?
Ahora, esta clase va de simplificar el tema de las promesas que habíamos hecho si vamos al input, ya teníamos en este componente una promesa,
hacíamos el fetch, que era el fetching de datos y cuando se resolvía esta promesa, pues transformábamos la respuesta JSON
y con esto lo que teníamos que extraer era la propiedad Search, que es el array de películas y si no, pues poníamos que era una lista vacía.
Además, y esto es interesante lo que hacíamos, ¿no? De tratar de controlar el estado en el que se encontraba si estamos cargando los datos o no los estamos cargando.
Esto lo vamos a poder eliminar con esta nueva sintaxis que vamos a ver que nos va a permitir esperar la promesa
y nos va a simplificar este código. Así que lo que vamos a hacer, lo primero, es quitar esto de loading porque no lo vamos a necesitar.
Así que fuera loading. Y este loading fuera también. Y este loading también fuera. Vale, vamos a guardar los cambios.
Ahora mismo, pues, habremos perdido la posibilidad de loading. De hecho, ahora nos va a petar porque este if loading, pues ya no funciona.
Así que se ha quedado en blanco. Pero lo vamos a solucionar muy rápido. Ahora, este response, como valor inicial, esto es un estado reactivo que tenemos en Svelte.
Está detectando que este response lo estamos reasignando aquí y, por lo tanto, lo está tratando como un estado.
Lo vamos a dejar así porque el estado inicial para nosotros es que es una array VAT. Pero ahora, este response, en lugar de asignarle la respuesta de la promesa,
lo que vamos a hacer es guardar la promesa. Vamos a hacer aquí este response, le asignamos la promesa.
De forma que este then lo que va a hacer es devolver realmente los resultados de la búsqueda.
Para simplificar esto y dejarlo en una sola línea, podríamos quitar este return y con el arrow function lo dejamos en una sola línea.
Esta promesa, cuando se resuelva, lo transforma en JSON y de ese JSON extrae la propiedad search y si no está, pues, da una lista vacía, una array vacía.
Vale, pues, este response, ¿qué tenemos que hacer? Ahora que lo hemos simplificado un poco, ¿cómo utilizamos este response?
Pues, ahora, en lugar de tener un if, lo que vamos a utilizar es la sintaxis de la wait.
Así que, vamos a decirle que utilice la wait para esperar esta promesa que tenemos en response.
¿Vale? ¿Por qué? Porque es una promesa y entonces tenemos que esperar la respuesta.
Si estamos esperando la respuesta es que esto está cargando, está haciendo loading.
Ahora, este else, que era de la sintaxis del if, ahora no es un else.
Ahora tendríamos que utilizar un poco la sintaxis de las promesas.
Tenemos que decirle, cuando tengamos la respuesta, en este caso podemos llamarle a respuesta,
porque le habíamos llamado para cada respuesta, pero podemos llamar, tenemos las movies,
y para cada movie, en movies, vamos a extraer las propiedades title, poster y year, y el índice lo utilizamos también.
¿Vale?
Y ahora, finalmente, para hacer que esto funcione, esta sintaxis, tal y como se cierra este bloque,
lo que tenemos que hacer ahora es utilizar el await en lugar del if.
Así que, si guardamos ahora los cambios, deberíamos ver que nuestra aplicación vuelve a funcionar.
Si nos ponemos a utilizarla, ponemos Avengers, podemos ver aún muy rápidamente que el loading vuelve a aparecer
y que todo funciona correctamente, solo que hemos quitado ese estado de control de loading,
que antes, pues, estábamos obligados a utilizar.
De esta forma, podemos controlar más fácilmente cuando utilizamos una promesa
y tener este renderizado condicional, como vimos en las clases anteriores, pero con las promesas.
De hecho, podríamos ir un poco más allá, ¿no?
Porque aquí hay un problema.
Sí que es verdad que aquí estamos controlando el loading,
aquí estamos controlando cuando tenemos en la lista, tenemos películas,
y aquí estamos controlando cuando esa lista es vacía.
Pero, ¿qué ocurre si yo aquí esta piquí que tenemos, pues, la pongo una que, obviamente, es incorrecta
y intento utilizar esto, que se queda en loading y me dice que no hay resultados.
No estamos controlando muy bien el error que nos está dando aquí en la consola.
Así que vamos a hacer algo para solucionar esto.
Lo que vamos a hacer es que aquí, en este then, lo que podemos hacer justo antes,
res, res, ok, response.key.
Esto es un método que nos dice si el status code de la petición es de 200 a 299.
Si ya está por encima, no es ok.
Así que, si no es ok, vamos a devolver un error que sea
something bad happened with the fetching of movies, ¿vale?
Entonces, cuando hacemos este error, lo que va a hacer es que no va a saltar al siguiente then,
sino que lo que va a hacer es ir al siguiente catch.
Pero aquí no vamos a tener ningún catch.
Pero no importa, porque lo que vamos a hacer esta promesa al guardar la response
es que vamos a poder controlar ese catch aquí, en este código, en este await, then,
y aquí vamos a poder tener incluso un catch,
que nos va a permitir decir, vale, pues cuando tengamos un error vamos a querer hacer algo.
Así que aquí vamos a hacer en este nivel el catch del error
y simplemente lo que hacemos con este error, pues podríamos poner aquí una X, a ver, aquí,
y decimos there has been an error.
Ahora guardamos los cambios y ahora, si aquí nos ponemos a buscar,
deberíamos decir que ha habido un error.
Esto es porque no se está resolviendo la promesa, está entrando en el catch
y en el catch lo estamos controlando aquí.
Ahora, obviamente esto nos gustaría volver a recuperar cómo estaba funcionando correctamente.
Voy a ver los cambios de esto.
Lo voy a poner aquí y lo voy a devolver.
Y ahora con esta sintaxis lo que estamos haciendo, por un lado,
es controlar cuándo está cargando, cuándo se ha resuelto,
y cuándo, por lo que sea, pues tiene que entrar al catch y queremos renderizar algo
para darle un poco de feedback al usuario para que sepa cómo está funcionando.
Pues con la sintaxis de la wait ya vemos una forma muy sencilla
de manejar las promesas dentro de nuestros componentes.
Sin necesidad de crear variables para el loading,
si tenemos que hacer un catch de la promesa,
creo que queda mucho más legible nuestro componente ahora.
Y si te gusta el curso gratuito de Svelte,
pues te reto a que dejes tu like para que lleguemos a los 200
y así desbloqueemos la siguiente clase donde vamos a ver el routing,
vamos a ver las rutas para que podamos navegar del listado
a un componente detalle donde vamos a ver el detalle de cada una de las películas.
Así que, 200 likes, deja tu like aquí abajo,
suscríbete si no lo estás y nos vemos en el siguiente vídeo aquí, en Mirudez.
¡Hasta luego!
¿Y esto por qué no funciona?
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete analá alla community!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!
¡Suscríbete al canal!