javascript / expert
Snippet
Orchestrierung asynchroner Zustandsautomaten mittels Generator-Funktionen
Die Kombination von JavaScript Generator-Funktionen mit reaktiven Vue-Primitiven ermöglicht explizite, schrittweise asynchrone Zustandsautomaten-Workflows ohne Callback-Spaghetti oder unkontrollierte reaktive Zustandsänderungen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { ref, readonly } from 'vue';export function useAsyncWorkflow(stepGeneratorFn) {const currentState = ref('idle');const isProcessing = ref(false);let iterator = null;const start = async (...args) => {iterator = stepGeneratorFn(...args);return next();};const next = async (payload) => {isProcessing.value = true;try {const { value, done } = await iterator.next(payload);if (done) {currentState.value = 'completed';} else {currentState.value = value.stateName;}return value;} finally {isProcessing.value = false;}};return { state: readonly(currentState), isProcessing, start, next };}
vue
Erklärung
1
iterator = stepGeneratorFn(...args);
Instantiiert den Zustands-Generator, der diskrete Workflow-Stufen zurückgibt.
2
const { value, done } = await iterator.next(payload);
Führt den Generator asynchron fort und übergibt dynamische Kontextdaten an den aktuellen yield-Block.
3
return { state: readonly(currentState), isProcessing, start, next };
Stellt schreibgeschützte Zustandssteuerungen bereit, um eine unidirektionale Datenfluss-Architektur zu erzwingen.