✒️SAP BTPFIORI / ¿Cómo trabajar con código asíncrono en SAPUI5? Por Jose Baz Suarez

Selector Alummnos / Empresas

¿Cómo trabajar con código asíncrono en SAPUI5?

¿Cómo trabajar con código asíncrono en SAPUI5?¿Cómo trabajar con código asíncrono en SAPUI5?
1. Introducción

El código asíncrono es fundamental en SAPUI5 porque permite ejecutar tareas sin bloquear la interfaz de usuario (UI).
Esto mejora la fluidez de las aplicaciones Fiori y garantiza que el usuario pueda seguir interactuando con la app mientras se procesan operaciones en segundo plano, como llamadas a servicios OData o la carga de módulos.

SAPUI5, al estar basado en JavaScript, utiliza de forma nativa mecanismos asincrónicos como promesas (Promises), callbacks y el uso de async / await.

2. Concepto de ejecución asíncrona

En un entorno sincronizado, las instrucciones se ejecutan una tras otra.
En cambio, en un entorno asíncrono, una instrucción puede continuar ejecutándose mientras otras se procesan paralelamente.

SAPUI5 aprovecha este modelo para:

  • Consultar datos desde servicios OData.

  • Cargar módulos o vistas bajo demanda.

  • Ejecutar funciones que dependen de resultados remotos o demoran en completarse.

3. Mecanismos asincrónicos en SAPUI5 🔹 a) Callbacks

Fueron la primera técnica usada para manejar tareas asíncronas.
Consisten en pasar una función que se ejecuta al finalizar otra tarea.

oModel.read("/Productos", { success: function(oData) { sap.m.MessageToast.show("Datos cargados correctamente"); }, error: function() { sap.m.MessageToast.show("Error al obtener los datos"); } });

Ventaja: Sencillo de usar.
Desventaja: Puede generar anidaciones excesivas (“callback hell”) cuando hay varias dependencias.

🔹 b) Promises

Las Promesas permiten un manejo más limpio y estructurado del código asíncrono.
Una promesa representa una operación que puede completarse con éxito (resolve) o fallar (reject) en el futuro.

new Promise(function(resolve, reject) { let exito = true; if (exito) resolve("Proceso completado"); else reject("Error en el proceso"); }).then(function(resultado) { console.log(resultado); }).catch(function(error) { console.error(error); });

Ventaja: Facilita el encadenamiento de procesos (then y catch), evitando anidaciones.

🔹 c) Async / Await

Introducido en ECMAScript 2017, simplifica el uso de Promesas al hacer que el código asíncrono se lea de forma secuencial.

async function obtenerDatos() { try { const respuesta = await fetch("/api/productos"); const datos = await respuesta.json(); console.log(datos); } catch (error) { console.error("Error al cargar datos", error); } }

Ventaja: Código más limpio, fácil de mantener y depurar.
Recomendado: Es el método más utilizado en aplicaciones Fiori modernas.

4. Carga asíncrona de módulos en SAPUI5

SAPUI5 permite cargar módulos de forma asíncrona usando las funciones sap.ui.define() y sap.ui.require().

sap.ui.require(["sap/m/MessageBox"], function(MessageBox) { MessageBox.information("Módulo cargado de forma asíncrona"); });

  • sap.ui.define() → Define un módulo y sus dependencias.

  • sap.ui.require() → Carga módulos existentes sin bloquear la ejecución.

💡 Buenas prácticas:
Evitar cargar módulos sincrónicamente (deprecated desde SAPUI5 1.60).

5. Llamadas asíncronas con modelos OData

Al trabajar con servicios ODataModel, se utilizan funciones como read, create, update o remove, todas de ejecución asíncrona.

this.getView().getModel().read("/Productos", { success: function(oData) { console.log("Datos obtenidos:", oData); }, error: function(oError) { console.error("Error al leer los datos"); } });

En versiones recientes, también se puede usar await con ODataModel si la API devuelve promesas.

6. Beneficios del código asíncrono

  • Mejora la experiencia del usuario (UI no bloqueada).

  • Permite procesar datos de red o backend sin congelar la pantalla.

  • Optimiza el rendimiento y tiempo de carga de la aplicación.

  • Facilita el uso de componentes modulares con carga dinámica.

  • Hace posible la integración con APIs REST, OData y JSON de forma eficiente.

7. Buenas prácticas

  • Preferir el uso de async/await frente a callbacks.

  • Manejar siempre errores con catch o bloques try/catch.

  • Mostrar mensajes informativos mientras se cargan datos (MessageToast o BusyIndicator).

  • No abusar del asincronismo: usarlo solo cuando se requiera interacción con red o procesos lentos.

  • Evitar mezclar código sincrónico y asíncrono en un mismo flujo.

8. Conclusión

El trabajo asíncrono es esencial en SAPUI5 para crear aplicaciones Fiori ágiles, reactivas y eficientes.
Dominar el uso de Promises, async/await y la carga asíncrona de módulos permite construir apps modernas que aprovechan al máximo el potencial de SAPUI5 y la plataforma SAP BTP.

Preguntas de repaso

  1. ¿Por qué es importante usar código asíncrono en SAPUI5?
    ✅ Porque evita que la interfaz se bloquee mientras se procesan tareas o llamadas remotas.

  2. ¿Qué diferencia hay entre sap.ui.define() y sap.ui.require()?
    sap.ui.define() define un módulo y sus dependencias; sap.ui.require() los carga de forma asíncrona.

  3. ¿Qué palabra clave se utiliza junto con async para esperar el resultado de una promesa?
    ✅ await.

  4. ¿Qué función se usa para mostrar un mensaje mientras se espera un proceso asíncrono?
    ✅ sap.m.MessageToast.show().

  5. ¿Qué beneficio principal tiene el uso de Promesas en comparación con los callbacks?
    Permiten un flujo de código más limpio, fácil de leer y mantener.

 

Escanear / Compartir

 

 

Sobre el autor

Publicación académica de Jose Rodrigo Baz Suarez, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.

SAP SemiSenior

Jose Rodrigo Baz Suarez

Profesión: Analista de Inventarios y Auditoria - Uruguay - Legajo: WX92M

✒️Autor de: 47 Publicaciones Académicas

🎓Egresado del módulo:

Disponibilidad Laboral: FullTime

Presentación:

Analista con experiencia en sap, contabilidad, inventarios y costos. manejo de cierres, balances, reportes y mejoras de procesos administrativos.

Certificación Académica de Jose Baz

✒️+Comunidad Académica CVOSOFT

Continúe aprendiendo sobre el tema "¿Cómo trabajar con código asíncrono en SAPUI5?" de la mano de nuestros alumnos.

SAP SemiSenior

¿Cómo trabajar con código asíncrono en SAPUI5? 1. Introducción El código asíncrono es fundamental en SAPUI5 porque permite ejecutar tareas sin bloquear la interfaz de usuario (UI). Esto mejora la fluidez de las aplicaciones Fiori y garantiza que el usuario pueda seguir interactuando con la app mientras se procesan operaciones en segundo plano, como llamadas a servicios OData o la carga de módulos. SAPUI5, al estar basado en JavaScript, utiliza de forma nativa mecanismos asincrónicos como promesas (Promises), callbacks y el uso de async / await. 2. Concepto de ejecución asíncrona En un entorno sincronizado, las instrucciones se ejecutan una tras otra. En cambio, en...

Acceder a esta publicación

Creado y Compartido por: Jose Rodrigo Baz Suarez / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Master

Como trabajar con código asincrono en SAPIU5: significa que una operación no se ejecuta inmediatamente, sino que se hace en segundo plano y el resto del código sigue ejecutándose sin esperar a que termine. Es decir, no bloquea la aplicación mientras espera una respuesta. Sincronas y bloqueantes Sincronas y no bloqueantes Asincronas y no bloqueantes El metodo JavaScript: es una función que pertenece a un objeto. Es como una acción que ese objeto puede realizar Los patrones asincronos: Permiten ejecutar código sin bloquear la aplicación mientras esperamos una respuesta. Las promesas: es un valor que puede estar disponible ahora, en el futuro o nunca. Esta maneja varios...

Acceder a esta publicación

Creado y Compartido por: Claudia Bibiana Monsalve Lopez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

1. LAS LLAMADAS ASINCRONAS Podemos tener operaciones de entrada y salida de los siguientes tipos: Sincronas y bloqueantes: TODA la operacion se hace de una vez, bloqueando el flujo de ejecucion. La respuesta se ejecuta inmediatamente despues de terminar la operacion. Sincronas y no-bloqueantes: usa alguna tecnica de polling para evitar el bloqueo en la primera fase. SE NECESITARAN SUCESIVOS INTENTOS HASTA COMPLETAR LA OPERACION. La respuesta se ejecuta inmediatamente despues de terminar la operacion. Asincronas y no-bloqueantes: la peticion vuelve inmediatamente para evitar el bloqueo. Se envia una notificacion una vez que la operacon se ha completado. y se encola la funcion que procesa la respuesta callback SINCRONICAS VS ASINCRONAS...

Acceder a esta publicación

Creado y Compartido por: Roberto Hernan Santucho

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


JavaScript utiliza un modelo asincrónico y no bloqueante con un loop de eventos implementados con único tree para sus interfaces de entrada y salida la sincronía es uno de los pirales fundamentales de JavaScript ya que es un lenguaje de programación de un solo subproceso o hilo lo que significa que solo puede ejecutar una cosa a la vez. Dentro del bootstraping se realiza la carga de la librería de SAP GUI 5 en el cliente para eso debemos referenciales en el index.html que es el archivo de arranque de las aplicaciones. Se pone entre las etiquetas script y el id ui bootstrap la librería se pone en la propiedad SRC que es fuente la cual se puede guardar n el proyecto como un recurso o apuntar directamente...

Acceder a esta publicación

Creado y Compartido por: Jose Medina / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Expert


How to Work with Asynchronous Code in SAPUI5? Asynchrony is one of the fundamental pillars of JavaScript. By understanding these concepts, we can apply them in our code to write better applications. We can have input and output operations of the following types: Synchronous and Blocking: The entire operation is done at once, blocking the execution flow. The thread is blocked while waiting, and the response is processed immediately after the operation is completed. Synchronous and Non-Blocking: Similar to the previous type, but uses some polling technique to avoid blocking in the first phase. The call returns immediately, the thread is not blocked, and successive attempts are needed until the operation is complete. The response is processed...

Acceder a esta publicación

Creado y Compartido por: Jaime Eduardo Gomez Arango / Disponibilidad Laboral: FullTime + Carta Presentación

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Javascript JavaScript es un lenguaje de programación de alto nivel creado por Brendan Eich en 1995, originalmente destinado a mejorar la interactividad en páginas web. A lo largo de los años, ha evolucionado y se ha expandido a diversas áreas de desarrollo, tanto en el lado del cliente como en el lado del servidor. Algunas características clave de JavaScript incluyen su naturaleza interpretada, orientación a objetos, dinamismo y tipado débil. Se ejecuta directamente en los navegadores web y es esencial para manipular el Document Object Model (DOM), permitiendo la interacción con elementos HTML y CSS. El lenguaje también se ha extendido al lado del servidor a través de plataformas...

Acceder a esta publicación

Creado y Compartido por: Claudio Marcelo Hermann / Disponibilidad Laboral: FullTime

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

Código asincrónico thread Síncrono Asíncrono javaScript es síncrono aunque haya tareas asíncronas con Ajax event loop timer promise .then pending fulfilled rejected promesa como un ticket llamadas OData asincrónica odataModel.read async success error Bootstrap rootView manifest.json data-sap.ui-async loop de eventos javascript solo ejecuta una cosa a la vez

Acceder a esta publicación

Creado y Compartido por: Enrique Gomez

*** CVOSOFT - Nuestros Alumnos - Nuestro Mayor Orgullo como Academia ***

SAP Senior

las llamdas asincronicas Podeos tener las siguientes operaciones de entrada y salida Sicronas Bloqueante Sicronas Np-bloqueantes asicronas No-bloqueantes Javascript utiliza un modelo asincrono no-bloqueante con un loop de eventos implementado con un unico theard para sus interfaces de entrada/salida La funcion callback: una funcion callback de primer nivel que se pasa a otra funcion como variable y esta es ejecutada en algun punto de la ejecucion de la funcion que la recibe Las Promesas una promesa representa un valor que puede estar disponible, ahora en el futuro o nunca. una promesa se encuentra en uno de los siguientes estados Pendiente (pending) Cumplida (fulfilled) Rechazada (rejected) La configuracion mas importante...

Acceder a esta publicación

Creado y Compartido por: Detriana Barrios / Disponibilidad Laboral: FullTime + Carta Presentación

 

 

👌Genial!, estos fueron los últimos artículos sobre más de 99.000 publicaciones académicas abiertas, libres y gratuitas compartidas con la comunidad, para acceder a ellas le dejamos el enlace a CVOPEN ACADEMY.

🔎Buscador de Publicaciones:

 

 

No sea Juan... Solo podrá llegar alto si realiza su formación con los mejores!