Snippet

Safely Loading Product Details with Promise Catch Handler

Promises represent the eventual completion or failure of an asynchronous operation. Using the .catch() method allows you to catch any network errors or custom thrown exceptions that occur in the promise chain, preventing unhandled promise rejections and allowing the component state to reflect errors to the user.

snippet.js

javascript

<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

Breakdown

if (!response.ok) { throw new Error('Product not found'); }

Explicitly throws an Error instance if the HTTP status indicates failure.

.catch(error => { errorMessage.value = error.message; });

Catches any error in the fetch chain and assigns its message to a reactive error state.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Safely Loading Product Details with Promise Catch Handler

Related