How do I make a GET request using Axios in Vue.js?

How do I make a GET request using Axios in Vue.js?

You can use Axios to make a GET request in Vue.js by importing Axios and calling the get method. Here's a simple example:

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 handle errors by using a catch block, as shown in the example. To improve user experience, you might want to set a loading state and display an error message. Here's an updated example:

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

Can I use async/await with Axios?

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

export default {
  data() {
    return {
      info: null,
      loading: true,
      error: null
    };
  },
  async mounted() {
    try {
      const response = await axios.get('https://api.example.com/data');
      this.info = response.data;
    } catch (error) {
      this.error = 'Failed to load data.';
      console.error('There was an error!', error);
    } finally {
      this.loading = false;
    }
  }
};