Uso de funções assíncronas em um Formulário adaptável com base nos Componentes principais

O editor de regras no Forms Adaptável oferece suporte a funções assíncronas, permitindo que você integre e gerencie operações que exigem espera por processos externos ou recuperação de dados sem interromper a interação do usuário com o formulário.

Quais fatores determinam o uso de funções assíncronas ou síncronas?

Gerenciar a interação do usuário de maneira eficaz é fundamental para criar uma experiência perfeita. Duas abordagens comuns para lidar com operações são as funções síncronas e assíncronas.

As funções síncronas executam tarefas uma após a outra, fazendo com que o aplicativo aguarde a conclusão de cada operação antes de continuar. Isso pode levar a atrasos e a uma experiência do usuário menos envolvente, especialmente quando as tarefas envolvem a espera por recursos externos, como uploads de arquivos ou busca de dados.

Por exemplo, considere um cenário em que um usuário carrega uma imagem, o formulário inteiro é interrompido, aguardando a conclusão do upload. Essa pausa impede que o usuário interaja com outros campos, causando frustração e atrasos. À medida que esperam o processamento da imagem, qualquer informação inserida pode ser perdida se eles saírem ou perderem a paciência, tornando a experiência complicada e ineficiente.

Por outro lado, as funções assíncronas permitem que as tarefas sejam executadas simultaneamente. Isso significa que os usuários podem continuar interagindo com o aplicativo enquanto os processos em segundo plano são executados. As operações assíncronas melhoram a capacidade de resposta, permitindo que os usuários recebam feedback imediato e mantenham o engajamento sem interrupções.

Por outro lado, com uma abordagem assíncrona, os usuários podem carregar imagens em segundo plano e, ao mesmo tempo, continuar a preencher o restante do formulário sem interrupções. A interface permanece responsiva, permitindo atualizações em tempo real e feedback imediato à medida que o upload avança. Ele melhora o engajamento do usuário, garantindo uma experiência perfeita sem interrupções.

{align="center"}

Implementação de funções assíncronas do Adaptive Forms

É possível implementar as funções assíncronas do Adaptive Forms usando os seguintes tipos de regras no editor de regras:

Como usar o tipo de regra Chamada de função assíncrona?

Este é um recurso de pré-lançamento acessível através do nosso canal de pré-lançamento.

Você pode gravar as funções personalizadas para operações assíncronas e configurar as funções assíncronas usando o tipo de regra Chamada de Função Assíncrona no editor de regras.

Explorar o tipo de regra Chamada de função assíncrona por meio de um caso de uso

Considere um formulário de registro em um site onde os usuários inserem uma senha ocasional (OTP). O painel para adicionar detalhes do usuário é exibido somente após a inserção do OTP correto. Se o OTP estiver incorreto, o painel permanecerá oculto e uma mensagem de erro será exibida na tela.

Em um formulário de registro, quando o usuário clica no botão Confirmar, a função matchOTP() é chamada de forma assíncrona para verificar o OTP inserido. A função matchOTP() é implementada como uma função personalizada. Usando o tipo de regra Chamada de função assíncrona no editor de regras, você pode configurar a função matchOTP() no editor de regras de um Formulário adaptável. Também é possível implementar as chamadas de retorno com êxito e falha no editor de regras.

A figura a seguir ilustra as etapas para usar o tipo de regra Chamada de função assíncrona para invocar funções assíncronas para o Adaptive Forms:

{align="center" width="50%,"}

1. Grave uma função personalizada para a operação assíncrona no arquivo JS

A função matchOTP() é implementada como uma função personalizada. O código abaixo é adicionado ao arquivo JS da função 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);
}

O código define uma função matchOTP() que gera uma promessa para validar uma OTP (senha ocasional) de forma assíncrona. Ele usa uma função asyncOperationForOTPMatch() para simular o processo de correspondência de OTP. A função verifica se o OTP fornecido é igual a 111. Se o OTP inserido estiver correto, ele chamará o retorno de chamada com nulo para o erro e um objeto indicando que o OTP é válido ({'valid':'true'}). Se o OTP não for válido, ele chamará o retorno de chamada com um objeto de erro ({'valid':'false'}) e nulo para o resultado.

2. Configure a função assíncrona no editor de regras

Execute as seguintes etapas para configurar a função assíncrona no editor de regras:

2.1 Criar uma regra para usar a função assíncrona usando o tipo de regra de chamada Função assíncrona

Para criar uma regra para usar a operação assíncrona, use o tipo de regra Chamada de função assíncrona. Execute as seguintes etapas:

A captura de tela abaixo exibe a regra:

Agora, você pode prosseguir com a implementação dos retornos de chamada: Success e Failure para a função matchOTP.

2.2 Implementar retornos de chamada para a função assíncrona

Implemente os métodos de retorno de chamada de sucesso e falha para a função assíncrona usando o editor visual de regras.

Criar uma regra para o método Add Success callback

Vamos criar uma regra para exibir o painel userdetails, se o OTP corresponder ao valor 111.

{width="50%,"}

Consulte a captura de tela abaixo, onde o usuário insere o OTP como 111, e o painel User Details é exibido quando o botão Confirm é clicado.

Criar uma regra para o método Add Failure callback

Vamos criar uma regra para exibir uma mensagem de falha se o OTP não corresponder ao valor 111.

{width="50%,"}

Consulte a captura de tela abaixo, onde o usuário insere o OTP como 123, e a mensagem de erro aparece quando o botão Confirm é clicado.

A captura de tela abaixo exibe a regra completa para usar a Chamada de Função Assíncrona para implementar uma função assíncrona:

Você também pode editar os retornos de chamada clicando em Editar retorno de chamada com êxito e Editar retorno de chamada com falha.

Como usar o tipo de regra de Saída de função?

Você também pode chamar as funções assíncronas indiretamente usando as funções síncronas. As funções síncronas são executadas usando o tipo de regra Saída de Função no editor de regras de um Formulário Adaptável.

Examine o código abaixo para ver como invocar funções assíncronas usando o tipo de regra Saída de Função:

    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);
    });
}

No exemplo acima, a função asyncFunction é um asynchronous function. Ele executa uma operação assíncrona fazendo uma solicitação GET para https://petstore.swagger.io/v2/store/inventory. Ele aguarda a resposta usando await, analisa o corpo da resposta como JSON usando response.json() e retorna os dados. A função callAsyncFunction é uma função personalizada síncrona que chama a função asyncFunction e exibe os dados de resposta no console. Embora a função callAsyncFunction seja síncrona, ela chama a função asyncFunction assíncrona e manipula seu resultado com instruções then e catch.

Para ver seu funcionamento, vamos adicionar um botão e criar uma regra para o botão que chama a função assíncrona em um clique de botão.

{width="50%"}

Consulte a captura de tela da janela de console abaixo para demonstrar que, quando o usuário clica no botão Fetch, a função personalizada callAsyncFunction é invocada, o que, por sua vez, chama uma função assíncrona asyncFunction. Inspect na janela do console para exibir a resposta ao clique de botão:

Consulte também