Verwenden asynchroner Funktionen in einem adaptiven Formular, basierend auf Kernkomponenten
Der Regeleditor in Adaptive Forms unterstützt asynchrone Funktionen, sodass Sie Vorgänge integrieren und verwalten können, für die das Warten auf externe Prozesse oder den Datenabruf erforderlich ist, ohne die Interaktion des Benutzers mit dem Formular zu unterbrechen.
Welche Faktoren bestimmen die Verwendung asynchroner oder synchroner Funktionen?
Die effektive Verwaltung der Benutzerinteraktion ist für ein reibungsloses Erlebnis von entscheidender Bedeutung. Zwei gängige Ansätze für die Verarbeitung von Vorgängen sind synchrone und asynchrone Funktionen.
Synchrone Funktionen führen Aufgaben nacheinander aus, sodass die Anwendung auf den Abschluss jedes Vorgangs wartet, bevor der Vorgang fortgesetzt wird. Dies kann zu Verzögerungen und einem weniger ansprechenden Benutzererlebnis führen, insbesondere wenn Aufgaben das Warten auf externe Ressourcen erfordern, wie z. B. Datei-Uploads oder das Abrufen von Daten.
Angenommen, ein Benutzer lädt ein Bild hoch und das gesamte Formular wird angehalten, bis der Upload abgeschlossen ist. Durch diese Pause kann der Benutzer nicht mit anderen Feldern interagieren, was zu Frustration und Verzögerungen führt. Während sie warten, bis das Bild verarbeitet wird, können alle eingegebenen Informationen verloren gehen, wenn sie die Geduld verlieren oder wegnavigieren, was das Erlebnis umständlich und ineffizient macht.
Asynchrone Funktionen ermöglichen dagegen die gleichzeitige Ausführung von Aufgaben. Dies bedeutet, dass Benutzende während der Ausführung von Hintergrundprozessen weiterhin mit dem Programm interagieren können. Asynchrone Vorgänge verbessern die Reaktionsfähigkeit und ermöglichen es Benutzenden, sofortiges Feedback zu erhalten und die Interaktion ohne Unterbrechungen aufrechtzuerhalten.
Umgekehrt können Benutzer bei einem asynchronen Ansatz Bilder im Hintergrund hochladen und gleichzeitig den Rest des Formulars nahtlos ausfüllen. Die Benutzeroberfläche bleibt responsiv und ermöglicht Echtzeit-Aktualisierungen und sofortiges Feedback im Verlauf des Uploads. Es verbessert die Benutzerinteraktion und sorgt für ein reibungsloses Erlebnis ohne Unterbrechungen.
Implementieren asynchroner Funktionen für adaptive Forms
Sie können die asynchronen Funktionen für adaptive Forms mithilfe der folgenden Regeltypen im Regeleditor implementieren:
Wie wird der Regeltyp „Aufruf der asynchronen Funktion“ verwendet?
Dies ist eine Vorabveröffentlichungsfunktion, auf die über unseren Vorabveröffentlichungskanalzugegriffen werden kann.
Sie können die benutzerdefinierten Funktionen für asynchrone Vorgänge schreiben und die asynchronen Funktionen mithilfe des Regeltyps Asynchroner Funktionsaufruf im Regeleditor konfigurieren.
Erkunden des Regeltyps für asynchrone Funktionsaufrufe durch einen Anwendungsfall
Stellen Sie sich ein Registrierungsformular auf einer Website vor, auf der Benutzer ein Einmalkennwort (OTP) eingeben. Das Bedienfeld zum Hinzufügen von Benutzerdetails wird erst nach der Eingabe des richtigen OTP angezeigt. Wenn der OTP falsch ist, bleibt das Bedienfeld ausgeblendet und eine Fehlermeldung wird auf dem Bildschirm angezeigt.
Wenn der Benutzer in einem Registrierungsformular auf die Schaltfläche Bestätigen klickt, wird die matchOTP()
asynchron aufgerufen, um das eingegebene OTP zu überprüfen. Die matchOTP()
Funktion wird als benutzerdefinierte Funktion“. Mithilfe des Regeltyps Async Function Call im Regeleditor können Sie die matchOTP()
Funktion im Regeleditor eines adaptiven Formulars konfigurieren. Sie können die Callbacks für Erfolg und Fehler auch im Regeleditor implementieren.
Die folgende Abbildung zeigt die Schritte zum Verwenden des Async Function Call-Regeltyps zum Aufrufen asynchroner Funktionen für adaptive Forms:
1. Schreiben Sie eine benutzerdefinierte Funktion für den asynchronen Vorgang in die JS-Datei
- Der Regeleditor eines Formulars zeigt nur Funktionen mit dem Rückgabetyp
Promise
an, wenn Sie den Regeltyp Asynchroner Funktionsaufruf auswählen. - Informationen zum Erstellen einer benutzerdefinierten Funktion finden Sie im Artikel mit dem Titel Erstellen einer benutzerdefinierten Funktion für ein adaptives Formular basierend auf Kernkomponenten.
Die matchOTP()
Funktion wird als benutzerdefinierte Funktion implementiert. Der folgende Code wird in der JS-Datei der benutzerdefinierten Funktion hinzugefügt:
/**
* 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);
}
Der Code definiert eine matchOTP()
, die eine Zusage zur asynchronen Validierung eines einmaligen Kennworts (OTP) generiert. Zur Simulation des OTP-Matching-Prozesses wird ein asyncOperationForOTPMatch()
verwendet. Die Funktion prüft, ob der angegebene OTP gleich 111
ist. Wenn der eingegebene OTP korrekt ist, ruft er den Callback mit null für den Fehler und einem -Objekt auf, das angibt, dass der OTP gültig ist ({'valid':'true'})
. Wenn der OTP nicht gültig ist, ruft er den Callback mit einem Fehlerobjekt ({'valid':'false'})
und null für das Ergebnis auf.
2. Konfigurieren der asynchronen Funktion im Regeleditor
Führen Sie die folgenden Schritte aus, um die asynchrone Funktion im Regeleditor zu konfigurieren:
2.1 Erstellen Sie eine Regel für die Verwendung einer asynchronen Funktion mithilfe des Regeltyps für den Aufruf der asynchronen Funktion
Um eine Regel für die Verwendung eines asynchronen Vorgangs mit dem Regeltyp Async Function Call zu erstellen, führen Sie die folgenden Schritte aus:
- Öffnen Sie ein adaptives Formular im Authoring-Modus, wählen Sie eine Formularkomponente und dann Regeleditor aus, um den Regeleditor zu öffnen.
- Wählen Sie Erstellen aus.
- Erstellen Sie eine Bedingung im Wenn-Abschnitt der Regel für einen Klick auf eine Schaltfläche. Beispielsweise wird Wenn[Bestätigen] angeklickt.
- Wählen Sie im Dann-Abschnitt Asynchroner Funktionsaufruf aus der Dropdown-Liste Aktion auswählen aus.
Wenn Sie asynchroner Funktionsaufruf auswählen, werden die Funktionen mit demPromise
Rückgabetyp angezeigt. - Wählen Sie die asynchrone Funktion in der Liste aus. Wählen Sie beispielsweise die Funktion
matchOTP()
und ihre Callbacks alsAdd success callback
aus undadd failure callback
angezeigt. - Wählen Sie nun die Input-Bindungen aus. Wählen Sie beispielsweise Eingabe als
Form Object
aus und vergleichen Sie sie mit demOTP
.
Im folgenden Screenshot wird die Regel angezeigt:
Jetzt können Sie mit der Implementierung der Callbacks fortfahren: Success
und Failure
für die matchOTP
.
2.2 Implementieren der Callbacks für die asynchrone Funktion
Implementieren Sie die Rückrufmethoden für Erfolg und Fehler für die asynchrone Funktion mit dem visuellen Regeleditor.
Erstellen Sie eine Regel für Add Success callback
Methode
Erstellen wir eine Regel, um den userdetails
anzuzeigen, wenn der OTP mit dem 111
übereinstimmt.
-
Klicken Sie Erfolgs-Callback hinzufügen.
-
Klicken Sie Anweisung hinzufügen, um die Regel zu erstellen.
-
Erstellen Sie eine Bedingung im Abschnitt Wenn der Regel.
-
Wählen Sie die Funktionsausgabe > Ereignis-Payload abrufen.
note note NOTE Die Funktion Ereignis-Payload abrufen ruft Daten ab, die mit einem bestimmten Ereignis verknüpft sind, um Benutzerinteraktionen dynamisch zu verwalten. -
Wählen Sie die entsprechenden Bindungen im Abschnitt Eingabe aus. Wählen Sie beispielsweise Zeichenfolge und geben Sie
valid
ein. Vergleichen Sie die eingegebene Zeichenfolge mittrue
. -
Wählen Sie im Dann-Abschnitt Anzeigen aus der Dropdown-Liste Aktion auswählen aus. Zeigen Sie beispielsweise das Bedienfeld
userdetails
an. -
Klicken Sie Anweisung hinzufügen.
-
Wählen Ausblenden aus der Aktion auswählen Dropdown-Liste aus. Blenden Sie beispielsweise das
error message
Textfeld aus. -
Klicken Sie auf Fertig.
Im folgenden Screenshot sehen Sie, wie der Benutzer 111
in das OTP-Fenster eintritt. Das Bedienfeld "User Details
" wird angezeigt, wenn auf die Schaltfläche "Confirm
" geklickt wird.
Erstellen Sie eine Regel für Add Failure callback
Methode
Erstellen wir eine Regel, um eine Fehlermeldung anzuzeigen, wenn der OTP nicht mit dem Wert 111
übereinstimmt.
-
Klicken Sie Fehler-Callback hinzufügen.
-
Klicken Sie Anweisung hinzufügen, um die Regel zu erstellen.
-
Erstellen Sie eine Bedingung im Abschnitt Wenn der Regel.
-
Wählen Sie die Funktionsausgabe > Ereignis-Payload abrufen.
-
Wählen Sie die entsprechenden Bindungen im Abschnitt Eingabe aus. Wählen Sie beispielsweise Zeichenfolge und geben Sie
valid
ein. Vergleichen Sie die eingegebene Zeichenfolge mitfalse
. -
Wählen Sie im Dann-Abschnitt Anzeigen aus der Dropdown-Liste Aktion auswählen aus. Zeigen Sie beispielsweise das
error message
Textfeld an. -
Klicken Sie Anweisung hinzufügen.
-
Wählen Ausblenden aus der Aktion auswählen Dropdown-Liste aus. Blenden Sie beispielsweise das Bedienfeld
userdetails
aus. -
Klicken Sie auf Fertig.
Die Fehlermeldung wird angezeigt, wenn auf die Schaltfläche Confirm
geklickt wird. Sie sehen im folgenden Screenshot, wo der Benutzer 123
in das OTP-Programm eintritt.
Im folgenden Screenshot wird die vollständige Regel für die Verwendung von asynchroner Funktionsaufruf zum Implementieren einer asynchronen Funktion angezeigt:
Sie können die Callbacks auch bearbeiten, indem Sie auf Erfolgs-Callback bearbeiten und Fehler-Callback bearbeiten klicken.
Wie wird der Regeltyp Funktionsausgabe verwendet?
Sie können die asynchronen Funktionen auch indirekt über die synchronen Funktionen aufrufen. Die synchronen Funktionen werden mit dem Regeltyp Funktionsausgabe im Regeleditor eines adaptiven Formulars ausgeführt.
Sehen Sie sich den unten stehenden Code an, um zu sehen, wie Sie asynchrone Funktionen mithilfe des Regeltyps Funktionsausgabe aufrufen:
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);
});
}
Im obigen Beispiel ist die Funktion „asyncFunction“ eine asynchronous function
. Sie führt einen asynchronen Vorgang durch, indem eine GET
-Anfrage an https://petstore.swagger.io/v2/store/inventory
gesendet wird. Sie wartet mit await
auf die Antwort, analysiert den Antworttext mithilfe der response.json()
als JSON und gibt dann die Daten zurück. Die Funktion callAsyncFunction
ist eine synchrone benutzerdefinierte Funktion, die die Funktion asyncFunction
aufruft und die Antwortdaten in der Konsole anzeigt. Obwohl die Funktion callAsyncFunction
synchron ist, ruft sie die asynchrone Funktion „asyncFunction“ auf und verarbeitet ihr Ergebnis mit den Anweisungen then
und catch
.
Fügen wir eine Schaltfläche hinzu und erstellen Sie eine Regel für die Schaltfläche, die beim Klicken auf eine Schaltfläche die asynchrone Funktion aufruft, damit sie funktioniert.
Im folgenden Screenshot des Konsolenfensters wird gezeigt, dass beim Klicken auf die Schaltfläche Fetch
die benutzerdefinierte callAsyncFunction
aufgerufen wird, die wiederum eine asynchrone asyncFunction
aufruft. Inspect zeigt das Konsolenfenster an, in dem die Reaktion auf das Klicken auf die Schaltfläche angezeigt wird:
Siehe auch
- Einführung in den Regeleditor für adaptive Formulare, die auf Kernkomponenten basieren
- Operatortypen und -ereignisse im Regeleditor eines auf Kernkomponenten basierendes adaptiven Formulars
- Benutzeroberfläche des Regeleditors für adaptive Formulare, die auf Kernkomponenten basieren
- Verschiedene Anwendungsfälle des Regeleditors für ein auf Kernkomponenten basierendes adaptives Formular
- Unterschiede in verschiedenen Editionen des Regeleditors
- Verwenden von asynchronen Funktionen in einem adaptiven Formular
- Aufrufen von Diensterweiterungen im visuellen Regeleditor für Formulare, die auf Kernkomponenten basieren
- Einführung in benutzerdefinierte Funktionen für adaptive Formulare, die auf Kernkomponenten basieren
- Erstellen einer benutzerdefinierten Funktion für ein auf Kernkomponenten basierendes adaptives Formular
- Umfangsobjekt in benutzerdefinierten Funktionen
- Beispiele für die Entwicklung und Verwendung benutzerdefinierter Funktionen