javascript / beginner
Snippet
Sicheres Laden von Produktdetails mit Promise Catch Handler
Promises repräsentieren den eventuellen Abschluss oder Fehler einer asynchronen Operation. Die .catch()-Methode fängt Netzwerkfehler oder benutzerdefinierte geworfene Ausnahmen in der Promise-Kette ab, verhindert unbehandelte Ablehnungen und ermöglicht es, Fehler im Zustand der Komponente für Benutzer anzuzeigen.
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
<script setup>import { ref, onMounted } from 'vue';const product = ref(null);const errorMessage = ref('');const loadProduct = (id) => {fetch(`/api/products/${id}`).then(response => {if (!response.ok) {throw new Error('Product not found');}return response.json();}).then(data => {product.value = data;}).catch(error => {errorMessage.value = error.message;});};onMounted(() => loadProduct(42));</script>
vue
Erklärung
1
if (!response.ok) { throw new Error('Product not found'); }
Wirft explizit eine Error-Instanz, wenn der HTTP-Status einen Fehler anzeigt.
2
.catch(error => { errorMessage.value = error.message; });
Fängt jeden Fehler in der Fetch-Kette ab und weist dessen Nachricht einem reaktiven Fehlerzustand zu.