javascript / intermediate
Snippet
Sichere asynchrone Operationen mittels Result-Tupeln in Vue-Methoden
Die Rückgabe von [data, error]-Tupeln aus asynchronen Funktionen verhindert unbehandelte Promise-Rejections und hält den Kontrollfluss in Vue-Komponenten explizit, ohne tief verschachtelte try-catch-Blöcke zu benötigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ref } from 'vue';export function useSafeAsync(asyncFn) {const isExecuting = ref(false);async function run(...args) {isExecuting.value = true;try {const result = await asyncFn(...args);return [result, null];} catch (error) {const normalized = error instanceof Error ? error : new Error(String(error));return [null, normalized];} finally {isExecuting.value = false;}}return { run, isExecuting };}
vue
Erklärung
1
const result = await asyncFn(...args);
Wartet auf die übergebene asynchrone Funktion mit allen weitergeleiteten Argumenten.
2
return [result, null];
Gibt ein Erfolgs-Tupel mit dem aufgelösten Wert und null als Fehler zurück.
3
const normalized = error instanceof Error ? error : new Error(String(error));
Konvertiert unbekannte geworfene Nicht-Error-Werte in standardisierte Error-Instanzen.
4
return [null, normalized];
Gibt ein Fehler-Tupel mit null als Datenwert und dem gefangenen Error-Objekt zurück.