How do I use fetch in Vue.js?

How do I use fetch in Vue.js?

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

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error('Error:', error));

Can I use fetch inside a Vue component?

Yes, you can use fetch inside the mounted lifecycle hook of a Vue component. For example:

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

What about error handling?

You can handle errors using the catch method. Here's an example:

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