Funciones async

Aprende cuándo y cómo ejecutar funciones asíncronas en el código de tu escena.

Resumen

La mayor parte del código en tu escena se ejecuta de forma síncrona usando un único hilo. Eso significa que los comandos se ejecutan secuencialmente línea por línea. Cada comando debe esperar a que el comando anterior termine de ejecutarse antes de poder comenzar.

Incluso las funciones en los sistemas de tu escena se ejecutan una por una, siguiendo un orden de prioridad.

Ejecutar el código de forma síncrona asegura consistencia, ya que siempre puedes estar seguro del orden en el que se ejecutan los comandos en tu código.

Por otro lado, tu escena necesita actualizarse muchas veces por segundo, construyendo el siguiente frame. Si una parte de tu código tarda demasiado en responder, entonces todo el hilo principal queda bloqueado y esto resulta en tasas de frames con lag.

Por eso, en algunos casos quieres que algunos comandos se ejecuten de forma asíncrona. Esto significa que puedes iniciar una tarea en un nuevo hilo, y mientras tanto el hilo principal puede seguir ejecutando las siguientes líneas de código.

Esto es especialmente útil para tareas que dependen de servicios externos que podrían tardar en responder, ya que no quieres que ese tiempo inactivo esperando la respuesta bloquee otras tareas.

Por ejemplo:

• Al recuperar datos de una API REST

• Al realizar una transacción en la blockchain

📔 Nota: Ten en cuenta que varios frames de tu escena podrían renderizarse antes de que la tarea termine de ejecutarse. Asegúrate de que el código de tu escena sea lo suficientemente flexible para manejar los escenarios intermedios mientras la tarea asíncrona se completa.

Ejecutar una función async

Marca cualquier función como async para que se ejecute en un hilo separado del hilo principal de la escena cada vez que se llame.

// declarar función async
async function myAsyncTask() {
	// ejecutar pasos de la función
}

// llamar a la función async
myAsyncTask()

// el resto del código sigue ejecutándose

La función executeTask

El executeTask() function ejecuta una función lambda de forma asíncrona, en un hilo separado del hilo principal de la escena. executeTask() nos permite declarar y ejecutar la función todo en una misma sentencia.

// Crea un objeto factory basado en el abi
	let data = await myAsyncTask()
	console.log(data)
})

// el resto del código sigue ejecutándose

La función then

El then function toma una función lambda como argumento, que solo se ejecuta una vez que la sentencia previa ha terminado. Esta función lambda puede opcionalmente tener entradas que se mapean desde lo que devuelva la sentencia previa.

myAsyncTask().then((data) => {
	console.log(data)
})

📔 Nota: En general es mejor usar el executeTask enfoque en lugar de la then function. En este ejemplo, la escena no será considerada completamente cargada por el Explorer hasta que la myAsyncTask() function se complete, lo que puede afectar los tiempos de carga. Además, si dependes demasiado de la then function en múltiples niveles anidados, puedes terminar con lo que se conoce como "callback hell", donde el código puede volverse muy difícil de leer y mantener.

Funciones PointerEvents y RayCast

Cuando tu escena usa un PointerEvent o un RayCast component, los cálculos de colisiones se realizan de forma async en el engine. El engine luego devuelve un evento de resultados a la escena, que puede llegar uno o varios ticks del game loop más tarde de cuando se invocó el evento.

Entonces necesitas crear un system para procesar estos resultados en el frame cuando lleguen.

📔 Nota: Si manejas clicks mediante el Register a callback enfoque, no necesitas crear explícitamente un system para manejar esto, pero lo mismo ocurre en segundo plano.

Ver eventos de click y raycasting.

💡 Consejo: Si el procesamiento de los resultados de un raycast requiere muchos cálculos (como ejecutar un algoritmo de búsqueda de rutas) podrías querer ejecutar ese cálculo en una función asíncrona.

La sentencia await

Un await statement fuerza la ejecución a esperar una respuesta antes de pasar a la siguiente línea de código. await statements solo pueden usarse dentro de un bloque de código async.

// declarar función
async function myAsyncTask() {
	// Pasos de configuración explicados en la sección anterior
		let response = await fetch(callUrl)
		let json = await response.json()
		console.log(json)
	} catch {
		console.log('no se pudo alcanzar la URL')
	}
}

// llamar a la función
myAsyncTask()

// El resto del código sigue ejecutándose

El ejemplo anterior ejecuta una función que incluye una fetch() operación para recuperar datos de una API externa. La fetch() operación es asíncrona, ya que no podemos predecir cuánto tiempo tardará el servidor en responder. Sin embargo, la siguiente línea necesita que la salida de esta operación esté lista antes de poder parsearla como json. La await sentencia aquí asegura que la siguiente línea solo se ejecutará una vez que esa operación haya devuelto un valor. De manera similar, la response.json() function también es asíncrona, pero la siguiente línea necesita que el json esté parseado antes de poder registrarlo. La segunda await sentencia fuerza a que la siguiente línea solo se llame una vez que el parseo del json haya terminado, por mucho tiempo que tome.