Anteriormente vimos que son las promesas y cómo usarlas para trabajar con código asíncrono, aunque se quedaron un par de puntos pendientes, vamos a ello.
Async/Await
Puede que nos interese esperar a que un código asíncrono termine de procesarse antes de seguir con la ejecución, esto lo conseguimos con la estructura async/await
. Vamos a ver como sería siguiendo el mismo ejemplo de login
y getFriends
.
Declaramos la función como async
y con await
le decimos que espere hasta que se termine de ejecutar:
Bastante más claro, ¿no?
Hay que tener en cuenta que con este sistema esperará a que se termine la primera ejecución antes de llamar a la segunda, por lo que en este caso el tiempo de espera será de 5 segundos. No es tan óptimo como el caso del Promise.all
, pero es bastante más claro y simple. Parece código síncrono del de toda la vida.
Nota: No se puede utilizar la palabra reservada await
en el nivel principal del programa, por eso he incluido las llamadas a las funciones async
dentro de la función getUserWithFriends
.
Nota2: Realmente no hace falta definir una promesa en el return
de una función async
, JavaScript envuelve el resultado en una automáticamente. Por lo que el resultado de getUserWithFriends
es otra promesa.
Ejemplo práctico con oData
Uno de los ejemplos más claros de código asíncrono que encontramos al usar SAPui5 son las llamadas a los oData. Un read sería algo así:
El código dentro del success
se ejecuta cuando nos devuelve el resultado y si se ha producido algún error lo tratamos dentro del error
. Se parece un poco a algo de lo que hemos visto con las promesas, ¿no?
Personalmente, nunca me acuerdo de cómo se hace esta llamada, siempre acabo buscando otra app en la que lo he utilizado y hago un copy/paste. Pero en alguna ocasión tengo que hacer un create
/update
/delete
en vez de un read
y me toca bucear a ver donde narices lo he usado.
O eso hacía antes, ahora tengo una mini librería que me he creado para simplificar este proceso usando las promesas. Veamos el código:
Se inicializa la clase ODataPromise
pasándole al constructor el modelo oData. Al método read
se le pasan la ruta y los parámetros a aplicar a la lectura (filters, sorters y esas cosas) si hay alguno (si no, se puede dejar ese parámetro vacío), y este devuelve una promesa con success
y error
asociados a resolve
y reject
respectivamente. Así podemos capturar con then
y catch
el resultado de success
y error
.
El uso del read
quedaría algo así:
El método read
devuelve una promesa que tratamos directamente con then
y catch
, aunque la podríamos tratar perfectamente con los métodos de Promise
del post anterior.
El resto de métodos del oData serían prácticamente iguales, pero añadiendo los datos que se envían en el create
y update
.
Y su invocación quedaría algo así:
O si no se quiere pasar ningún parámetro, sería algo como esto:
Nota: Las _
delante de las variables y métodos son una convención de código de JavaScript para indicar que son privados. No tienen ningún efecto, pero es una buena práctica.
Nota2: He omitido el define
para importar la clase ODataPromise
.
Y con esto doy por finalizada esta serie sobre las promesas. Espero que os haya gustado y os hayan quedado más claras las promesas. El código está disponible en github por si queréis usarlo 🙂
0 comentarios