Usar funciones asincrónicas en un formulario adaptable basado en componentes principales
El editor de reglas de Forms adaptable admite funciones asincrónicas, lo que permite integrar y administrar operaciones que requieren esperar procesos externos o recuperar datos sin interrumpir la interacción del usuario con el formulario.
¿Qué factores determinan el uso de funciones asincrónicas o sincrónicas?
Gestionar la interacción del usuario de forma eficaz es crucial para crear una experiencia fluida. Dos enfoques comunes para controlar las operaciones son las funciones sincrónicas y asincrónicas.
Funciones sincrónicas ejecutan las tareas una tras otra, lo que hace que la aplicación espere a que se complete cada operación antes de continuar. Esto puede provocar retrasos y una experiencia del usuario menos atractiva, especialmente cuando las tareas implican esperar recursos externos, como cargas de archivos o recuperación de datos.
Por ejemplo, en un escenario en el que un usuario carga una imagen, todo el formulario se detiene y espera a que se complete la carga. Esta pausa impide que el usuario interactúe con otros campos, lo que provoca frustración y retrasos. Mientras esperan a que la imagen se procese, cualquier información introducida puede perderse si se aleja o pierde la paciencia, lo que hace que la experiencia sea engorrosa e ineficiente.
Funciones asincrónicas, por otro lado, permiten que las tareas se ejecuten simultáneamente. Esto significa que los usuarios pueden seguir interactuando con la aplicación mientras se ejecutan los procesos en segundo plano. Las operaciones asincrónicas mejoran la capacidad de respuesta, lo que permite a los usuarios recibir comentarios inmediatos y mantener la participación sin interrupciones.
Por el contrario, con un enfoque asincrónico, los usuarios pueden cargar imágenes en segundo plano sin dejar de rellenar el resto del formulario. La interfaz sigue siendo adaptable, lo que permite realizar actualizaciones en tiempo real y recibir comentarios de forma inmediata a medida que progresa la carga. Mejora la participación del usuario, lo que garantiza una experiencia fluida sin interrupciones.
Implementación de funciones asincrónicas para Forms adaptable
Puede implementar las funciones asincrónicas para Forms adaptable mediante los siguientes tipos de reglas en el editor de reglas:
¿Cómo se utiliza el tipo de regla Llamada a función asincrónica?
Esta es una función previa al lanzamiento y se puede acceder a ella a través de nuestro canal previo al lanzamiento.
Puede escribir las funciones personalizadas para operaciones asincrónicas y configurar las funciones asincrónicas usando el tipo de regla Llamada a función asincrónica en el editor de reglas.
Exploración del tipo de regla de llamada a función asincrónica mediante un caso de uso
Considere un formulario de registro en un sitio web en el que los usuarios escriban una contraseña de un solo uso (OTP). El panel para añadir detalles del usuario solo aparece después de introducir el OTP correcto. Si el OTP es incorrecto, el panel permanece oculto y aparece un mensaje de error en la pantalla.
En un formulario de registro, cuando el usuario hace clic en el botón Confirmar, se llama a la función matchOTP()
de forma asincrónica para comprobar el OTP introducido. La función matchOTP()
se ha implementado como función personalizada. Con el tipo de regla Llamada de función asíncrona en el editor de reglas, puede configurar la función matchOTP()
en el editor de reglas de un formulario adaptable. También puede implementar las llamadas de retorno de éxito y error en el editor de reglas.
La siguiente ilustración ilustra los pasos para usar el tipo de regla Llamada a función asincrónica para invocar funciones asincrónicas para Forms adaptable:
1. Escriba una función personalizada para la operación asincrónica en el archivo JS
- El editor de reglas de un formulario muestra solamente funciones con un tipo de valor devuelto de
Promise
cuando selecciona el tipo de regla Llamada a función asincrónica. - Para aprender a crear una función personalizada, consulte el artículo titulado Crear una función personalizada para un formulario adaptable basado en componentes principales.
La función matchOTP()
se ha implementado como una función personalizada. El siguiente código se agrega en el archivo JS de la función personalizada:
/**
* generates the otp for success use case
* @param {string} otp
* @return {PROMISE}
*/
function matchOTP(otp) {
return new Promise((resolve, reject) => {
// Perform some asynchronous operation here
asyncOperationForOTPMatch(otp, (error, result) => {
if (error) {
// On failure, call reject(error)
reject(error);
} else {
// On success, call resolve(result)
resolve(result);
}
});
});
}
/**
* generates the otp
*/
function asyncOperationForOTPMatch(otp, callback) {
setTimeout(() => {
if(otp === '111') {
callback( null, {'valid':'true'});
} else {
callback( {'valid':'false'}, null);
}
}, 1000);
}
El código define una función matchOTP()
que genera una promesa de validar una contraseña de un solo uso (OTP) de forma asincrónica. Utiliza una función asyncOperationForOTPMatch()
para simular el proceso de coincidencia de OTP. La función comprueba si el OTP proporcionado es igual a 111
. Si el OTP introducido es correcto, llama a la devolución de llamada con null para el error y un objeto que indica que el OTP es válido ({'valid':'true'})
. Si el OTP no es válido, llama a la devolución de llamada con un objeto de error ({'valid':'false'})
y null para el resultado.
2. Configure la función asincrónica en el editor de reglas
Realice los siguientes pasos para configurar la función asincrónica en el editor de reglas:
2.1 Crear una regla para utilizar una función asincrónica mediante el tipo de regla de llamada de función asincrónica
Para crear una regla para usar una operación asincrónica, use el tipo de regla Llamada a función asincrónica, realice los siguientes pasos:
- Abra el formulario adaptable en el modo de creación, seleccione cualquier componente del formulario y seleccione Editor de reglas para abrir el editor de reglas.
- Seleccione Crear.
- Cree una condición en la sección When de la regla para hacer clic en un botón. Por ejemplo, al hacer clic en[Confirmar].
- En la sección Then, seleccione Llamada a función asincrónica de la lista desplegable Seleccionar acción.
Cuando selecciona Llamada de función asíncrona y aparecen las funciones con el tipo de valor devueltoPromise
. - Seleccione la función asincrónica de la lista. Por ejemplo, seleccione la función
matchOTP()
y sus llamadas de retorno tal y como aparecenAdd success callback
yadd failure callback
. - Ahora, seleccione los enlaces Input. Por ejemplo, seleccione Input como
Form Object
y compárelo con el campoOTP
.
La siguiente captura de pantalla muestra la regla:
Ahora puede continuar con la implementación de las llamadas de retorno: Success
y Failure
para la función matchOTP
.
2.2 Implementar las llamadas de retorno para la función asincrónica
Implemente los métodos de devolución de llamada success y failure para la función asincrónica mediante el editor de reglas visual.
Crear una regla para el método Add Success callback
Vamos a crear una regla para mostrar el panel userdetails
, si el OTP coincide con el valor 111
.
-
Haga clic en Agregar devolución de llamada correcta.
-
Haga clic en Agregar instrucción para crear la regla.
-
Cree una condición en la sección When de la regla.
-
Seleccione Salida de función > Obtener carga útil de evento.
note note NOTE La función Obtener carga útil de evento recupera datos asociados con un evento específico para administrar interacciones de usuario de forma dinámica. -
Seleccione sus enlaces correspondientes de la sección Input. Por ejemplo, seleccione Cadena e introduzca
valid
. Comparar la cadena ingresada contrue
. -
En la sección Entonces, seleccione Mostrar de la lista desplegable Seleccionar acción. Por ejemplo, mostrar el panel
userdetails
. -
Haga clic en Agregar instrucción.
-
Seleccione Ocultar de la lista desplegable Seleccionar acción. Por ejemplo, oculte el cuadro de texto
error message
. -
Haga clic en Listo.
Consulte la captura de pantalla siguiente, en la que el usuario introduce el OTP como 111
y aparece el panel User Details
cuando se hace clic en el botón Confirm
.
Crear una regla para el método Add Failure callback
Vamos a crear una regla para mostrar un mensaje de error si el OTP no coincide con el valor 111
.
-
Haga clic en Agregar devolución de llamada con error.
-
Haga clic en Agregar instrucción para crear la regla.
-
Cree una condición en la sección When de la regla.
-
Seleccione Salida de función > Obtener carga útil de evento.
-
Seleccione sus enlaces correspondientes de la sección Input. Por ejemplo, seleccione Cadena e introduzca
valid
. Comparar la cadena ingresada confalse
. -
En la sección Entonces, seleccione Mostrar de la lista desplegable Seleccionar acción. Por ejemplo, mostrar el cuadro de texto
error message
. -
Haga clic en Agregar instrucción.
-
Seleccione Ocultar de la lista desplegable Seleccionar acción. Por ejemplo, oculte el panel
userdetails
. -
Haga clic en Listo.
Consulte la captura de pantalla siguiente, donde el usuario introduce el OTP como 123
y aparece el mensaje de error cuando se hace clic en el botón Confirm
.
La captura de pantalla siguiente muestra la regla completa para usar Llamada a función asincrónica para implementar una función asincrónica:
También puede editar las llamadas de retorno haciendo clic en Editar devolución de llamada correcta y Editar devolución de llamada con error.
Cómo usar el tipo de regla de salida de función
También puede llamar a las funciones asincrónicas indirectamente mediante las funciones sincrónicas. Las funciones sincrónicas se ejecutan utilizando el tipo de regla Salida de función en el editor de reglas de un formulario adaptable.
Observe el código siguiente para ver cómo invocar funciones asincrónicas utilizando el tipo de regla Salida de función:
async function asyncFunction() {
const response = await fetch('https://petstore.swagger.io/v2/store/inventory');
const data = await response.json();
return data;
}
/**
* callAsyncFunction
* @name callAsyncFunction callAsyncFunction
*/
function callAsyncFunction() {
asyncFunction()
.then(responseData => {
console.log('Response data:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
}
En el ejemplo anterior, la función asyncFunction es un asynchronous function
. Realiza una operación asincrónica realizando una solicitud GET
a https://petstore.swagger.io/v2/store/inventory
. Espera la respuesta con await
, analiza el cuerpo de la respuesta como JSON con response.json()
y, a continuación, devuelve los datos. La función callAsyncFunction
es una función sincrónica personalizada que invoca la función asyncFunction
y muestra los datos de respuesta en la consola. Aunque la función callAsyncFunction
es sincrónica, llama a la función asyncFunction asincrónica y controla su resultado con instrucciones then
y catch
.
Para ver cómo funciona, vamos a agregar un botón y crear una regla para el botón que invoca la función asincrónica al hacer clic en un botón.
Consulte la captura de pantalla de la ventana de la consola siguiente para demostrar que cuando el usuario hace clic en el botón Fetch
, se invoca la función personalizada callAsyncFunction
, que a su vez llama a una función asincrónica asyncFunction
. Inspect abre la ventana de la consola para ver la respuesta al botón y hacer clic en:
Consulte también
- Introducción al Editor de reglas para formularios adaptables basados en componentes principales
- Tipos de operadores y eventos en el editor de reglas de un formulario adaptable basado en componentes principales
- Interfaz de usuario del Editor de reglas para formularios adaptables basados en componentes principales
- Diferentes casos de uso del Editor de reglas para un formulario adaptable basado en componentes principales
- Diferencia en varias ediciones del editor de reglas
- Usar funciones asincrónicas en un formulario adaptable
- Invocar mejoras de servicio en el editor de reglas visuales para formularios basados en componentes principales
- Introducción a las funciones personalizadas para formularios adaptables basados en componentes principales
- Crear una función personalizada para un formulario adaptable basado en componentes principales
- Objeto de ámbito en funciones personalizadas
- Ejemplos de desarrollo y uso de funciones personalizadas