在基于核心组件的自适应表单中使用异步函数

自适应Forms🔗中的规则编辑器支持异步功能，允许您集成和管理需要等待外部进程或数据检索的操作，而不会中断用户与表单的交互。

哪些因素决定了使用异步或同步功能？

有效管理用户交互对于创建流畅的体验至关重要。 处理操作的两种常用方法是同步和异步函数。

同步功能 ​逐个执行任务，导致应用程序等待每个操作完成后再继续。 这可能会导致延迟和用户体验减少，尤其是在任务需要等待外部资源（如文件上传或数据获取）时。

例如，考虑用户上传图像的情况，整个表单暂停，等待上传完成。 此暂停使用户无法与其他字段交互，从而导致挫折感和延迟。 在等待图像处理时，如果输入的信息离开或失去耐心，则可能会丢失这些信息，从而使体验变得繁琐和低效。

另一方面，异步函数 ​允许同时运行任务。 这意味着，在执行后台进程时，用户可以继续与应用程序交互。 异步操作增强了响应能力，使用户能够立即收到反馈并保持参与而不出现中断。

相反，通过异步方法，用户可以在后台上传图像，同时继续无缝填写表单的其余部分。 该界面保持响应式，允许实时更新并在上传过程中提供即时反馈。 它增强了用户参与度，确保畅通无阻的体验。

{align="center"}

为自适应Forms实施异步函数

您可以在规则编辑器中使用以下规则类型为自适应Forms实施异步函数：

如何使用异步函数调用规则类型？

您可以为异步操作编写自定义函数，并在规则编辑器中使用​ 异步函数调用 ​规则类型配置异步函数。

通过用例探索异步函数调用规则类型

考虑用户输入一次性密码(OTP)的网站上的注册表。 只有在输入正确的OTP后，才会显示用于添加用户详细信息的面板。 如果OTP不正确，面板将保持隐藏状态，屏幕上将显示一条错误消息。

在注册表单中，当用户单击​ Confirm ​按钮时，将异步调用matchOTP()函数以验证输入的OTP。 matchOTP()函数是作为自定义函数实现的。 使用规则编辑器中的​ 异步函数调用 ​规则类型，您可以在自适应表单的规则编辑器中配置matchOTP()函数。 您还可以在规则编辑器中实施成功和失败回调。

下图说明了使用​ 异步函数调用 ​规则类型为自适应Forms调用异步函数的步骤：

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

1.在JS文件中为异步操作编写自定义函数

matchOTP()函数作为自定义函数实现。 以下代码会添加到自定义函数的JS文件中：

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

代码定义一个函数matchOTP()，该函数生成用于异步验证一次性密码(OTP)的promise。 它使用函数asyncOperationForOTPMatch()来模拟OTP匹配过程。 该函数检查提供的OTP是否等于111。 如果输入的OTP正确，它将使用null为错误调用回调，并使用一个对象指示OTP有效({'valid':'true'})。如果OTP无效，它将使用错误对象({'valid':'false'})为结果调用null。

2.在规则编辑器中配置异步函数

执行以下步骤以在规则编辑器中配置异步函数：

2.1创建规则以使用Async Function调用规则类型来使用异步函数

要创建规则以使用异步操作，请使用​ 异步函数调用 ​规则类型，请执行以下步骤：

下面的屏幕截图显示了规则：

现在，您可以继续为matchOTP函数实施回调： Success和Failure。

2.2实施异步函数的回调

使用可视规则编辑器对异步函数实施成功和失败回调方法。

为Add Success callback方法创建规则

如果OTP与值111匹配，让我们创建一个规则以显示userdetails面板。

{width="50%,"}

请参阅下面的屏幕截图，其中用户以111身份进入OTP，单击Confirm按钮时将显示User Details面板。

为Add Failure callback方法创建规则

让我们创建一个规则，以在OTP与值111不匹配时显示失败消息。

{width="50%,"}

请参阅下面的屏幕截图，其中用户以123身份进入OTP，单击Confirm按钮时将显示错误消息。

下面的屏幕快照显示了使用​ 异步函数调用 ​实现异步函数的完整规则：

用于异步函数调用的

您还可以通过单击​ 编辑成功回调 ​和​ 编辑失败回调 ​来编辑回调。

如何使用函数输出规则类型？

您还可以使用同步函数间接调用异步函数。 在自适应表单的规则编辑器中使用​ 函数输出 ​规则类型执行同步函数。

查看以下代码，了解如何使用​ 函数输出 ​规则类型调用异步函数：

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

在上述示例中，asyncFunction函数是asynchronous function。 它通过向https://petstore.swagger.io/v2/store/inventory发出GET请求来执行异步操作。 它使用await等待响应，使用response.json()将响应正文解析为JSON，然后返回数据。 callAsyncFunction函数是一个同步自定义函数，它调用asyncFunction函数并在控制台中显示响应数据。 虽然callAsyncFunction函数是同步的，但它调用异步asyncFunction函数并使用then和catch语句处理其结果。

要查看其是否有效，让我们添加一个按钮，并为单击按钮时调用异步函数的按钮创建规则。

{width="50%"}

请参阅下面控制台窗口的屏幕截图，以演示当用户单击Fetch按钮时，将调用自定义函数callAsyncFunction，进而调用异步函数asyncFunction。 检查控制台窗口以查看对按钮单击的响应：

另请参阅