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 🙂

Categorías: UI5

0 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *