How do I make API requests in Vue 3?

How do I make API requests in Vue 3?

You can use the Fetch API or Axios to make API requests in Vue 3. Would you like an example using one of these?

Yes, please show me an example using Axios.

First, install Axios with npm install axios. Then, you can use it like this:

import axios from 'axios';

export default {
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.error('There was an error!', error);
      });
  }
};

What if I want to handle errors more gracefully?

You can use a try-catch block with async/await for better error handling. Here's how:

async mounted() {
  try {
    const response = await axios.get('https://api.example.com/data');
    this.info = response.data;
  } catch (error) {
    console.error('Error fetching data:', error);
    alert('Failed to fetch data. Please try again later.');
  }
}