How do I use fetch in Vue 3?

How do I use fetch in Vue 3?

You can use the fetch API in Vue 3 to make HTTP requests. Here's a basic example:

<template>
  <div>
    <h1>Data from API</h1>
    <pre>{{ data }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  mounted() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.data = data;
      })
      .catch(error => console.error('Error:', error));
  },
};
</script>

What if I want to handle errors more gracefully?

You can add error handling in the fetch call. Here's an updated example:

mounted() {
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => {
      this.data = data;
    })
    .catch(error => {
      console.error('Fetch error:', error);
      this.data = 'Failed to load data';
    });
},

Can I use async/await with fetch in Vue 3?

Yes, you can use async/await for cleaner syntax. Here's how:

async mounted() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    this.data = await response.json();
  } catch (error) {
    console.error('Fetch error:', error);
    this.data = 'Failed to load data';
  }
},