| Ambos lados, revisión anteriorRevisión previaPróxima revisión | Revisión previa |
| informatica:programacion:cursos:programacion_avanzada_javascript:funciones_asincronas [2024/10/16 10:59] – [Esperas asíncronas en paralelo] tempwin | informatica:programacion:cursos:programacion_avanzada_javascript:funciones_asincronas [2024/10/30 12:58] (actual) – [Ejercicio propuesto] tempwin |
|---|
| Las funciones asíncronas se invocan exactamente igual que las funciones tradicionales. Es decir, la función anterior la podemos invocar usando simplemente ''answerAsync()''. | Las funciones asíncronas se invocan exactamente igual que las funciones tradicionales. Es decir, la función anterior la podemos invocar usando simplemente ''answerAsync()''. |
| |
| <WRAP center round todo 60%> | {{ :informatica:programacion:cursos:programacion_avanzada_javascript:12-invocacion-funcion-asincrona.png |}} |
| invocación función asíncrona | |
| </WRAP> | |
| |
| Si nos fijamos en la imagen anterior, observamos cómo al invocar la función ''answerAsync'' el resultado devuelto no ha sido ''undefined'', que es lo que devolvería la versión síncrona/convencional de esa misma función (recuerda que las funciones que no devuelven nada explícitamente devuelven ''undefined''), sino que la función devuelve una promise. En este caso la promise está resuelta al terminar la llamada. | Si nos fijamos en la imagen anterior, observamos cómo al invocar la función ''answerAsync'' el resultado devuelto no ha sido ''undefined'', que es lo que devolvería la versión síncrona/convencional de esa misma función (recuerda que las funciones que no devuelven nada explícitamente devuelven ''undefined''), sino que la función devuelve una promise. En este caso la promise está resuelta al terminar la llamada. |
| En este caso, una vez la función asíncrona se ha ejecutado, se ejecuta la función indicada dentro del ''then'': | En este caso, una vez la función asíncrona se ha ejecutado, se ejecuta la función indicada dentro del ''then'': |
| |
| <WRAP center round todo 60%> | {{ :informatica:programacion:cursos:programacion_avanzada_javascript:12-invocacion-funcion-asincrona-then.png |}} |
| invocación función asíncrona y then | |
| </WRAP> | |
| |
| Por lo tanto toda función ''async'' devuelve una //promise//. El resultado devuelto por la función es el resultado que se resuelve con la //promise//. | Por lo tanto toda función ''async'' devuelve una //promise//. El resultado devuelto por la función es el resultado que se resuelve con la //promise//. |
| **Usando ''try''/''catch'' no se capturan las promesas rechazadas**. Así, a pesar de que ''asyncPromise'' ha fallado, nosotros no capturamos el error: | **Usando ''try''/''catch'' no se capturan las promesas rechazadas**. Así, a pesar de que ''asyncPromise'' ha fallado, nosotros no capturamos el error: |
| |
| <WRAP center round todo 60%> | {{ :informatica:programacion:cursos:programacion_avanzada_javascript:12-error-promise-no-capturado.png |}} |
| Error en promise no capturado | |
| </WRAP> | |
| |
| La imagen muestra el resultado de ejecutar dicho código; en Firefox a la izquierda y en Chrome a la derecha. Observa cómo el ''catch'' no es invocado nunca (Firefox, a diferencia de Chrome, se queja de que una //promise// rechazada no ha sido tratada). | La imagen muestra el resultado de ejecutar dicho código; en Firefox a la izquierda y en Chrome a la derecha. Observa cómo el ''catch'' no es invocado nunca (Firefox, a diferencia de Chrome, se queja de que una //promise// rechazada no ha sido tratada). |
| ===== Ejercicio propuesto ===== | ===== Ejercicio propuesto ===== |
| |
| | Crea una función que, usando la API ''fetch'', devuelva una //promise// resuelta con el número de carácteres de la respuesta de una URI. La función debe invocarse como sigue: |
| | |
| | <code javascript> |
| | uriSize('https://jsonplaceholder.typicode.com/posts/42') |
| | .then(s => console.log('Num carácteres recibidos:' + s)) |
| | </code> |
| | |
| | Crea la función asíncrona ''getLargestUri'' que espere un array de cadenas con varias direcciones URI y que devuelva la que ofrezca la respuesta más larga en bytes. Para sus cálculos haz que use la función ''uriSize'' anterior. Debe invocarse como sigue: |
| | |
| | <code javascript> |
| | getLargestUri([ |
| | 'https://jsonplaceholder.typicode.com/posts/4', |
| | 'https://jsonplaceholder.typicode.com/posts/5', |
| | 'https://jsonplaceholder.typicode.com/posts/42']) |
| | .then(v => console.log('La url más larga es ' + v.url + ' con ' + v.size + ' caracteres')); |
| | </code> |
| | |
| | Intenta que la función ''getLargestUri'' haga las peticiones en paralelo: |
| | |
| | {{ :informatica:programacion:cursos:programacion_avanzada_javascript:12-ejercicio-peticiones-paralelo.png |}} |
| | ==== Consejos ==== |
| | |
| | En contra de lo que pueda parecer, este es un **ejercicio relativamente complejo**, así que tómatelo con calma y repasa lo necesario del módulo de fetch API. |
| | |
| | La función ''getLargestUri'' es la que presenta el mayor reto. Repasa la sección de "Esperas asíncronas en paralelo" para ver lo que debes hacer para llamar asíncronamente N veces la función ''uriSize'' pero que se ejecuten todas en paralelo. |
| | |
| | ==== Y un pequeño reto adicional ==== |
| | |
| | En la función ''getLargestUri'' al final, de los N resultados devueltos por las N llamadas a ''uriSize'' debes seleccionar aquella cuyo valor de ''size'' sea mayor. Seguramente hayas implementado (o tengas pensado implementar) eso mediante un bucle. No hay problema, pero ya puestos te propongo un pequeño reto adicional: |
| | |
| | Crea una función ''max'' que se pueda llamar sobre **cualquier array**. Dicha función debe esperar una función transformadora (que transforma el elemento del array en un número) y debe devolver el elemento cuyo valor transformado en número es mayor. La función debe invocarse de este modo: |
| | |
| | <code javascript> |
| | [{v:42, name:'great question'}, {v: 0, name: 'zero'}].max(i => i.v) |
| | </code> |
| | |
| | (En este caso debe devolver el primer elemento) |
| |
| | Una vez tengas esa función ''max'', úsala en ''getLargestUri'' para seleccionar el elemento con el tamaño mayor. |
