0 Tage Serie
javascript / intermediate
Snippet

Asynchrones Status-Management in Composables

Die Verwaltung asynchroner Anfragen in einem Composable hält Ihre Komponenten sauber, während Lade- und Fehlerzustände reaktiv in der gesamten Anwendung verarbeitet werden.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref } from 'vue';
export function useFetch(url) {
const data = ref(null);
const error = ref(null);
const doFetch = async () => {
try {
const res = await fetch(url);
data.value = await res.json();
} catch (err) {
error.value = err;
}
};
doFetch();
return { data, error };
}
vue
Erklärung
1
const data = ref(null);
Erstellt einen reaktiven Container für die zukünftige API-Antwort.
2
try { ... } catch (err) { ... }
Standard JavaScript-Fehlerbehandlung angewendet auf reaktive Statusänderungen.