Sicheres Laden von Produktdetails mit Promise Catch Handler

<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>