What are some examples of using Axios in Vue 3?

What are some examples of using Axios in Vue 3?

Axios is a promise-based HTTP client for the browser and Node.js. In Vue 3, you can use it to make API requests easily. For example, you can install Axios using npm and then import it into your component.

Can you show me a simple example of fetching data from an API?

Sure! Here's a basic example:

import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null);
    const error = ref(null);

    axios.get('https://api.example.com/data')
      .then(response => {
        data.value = response.data;
      })
      .catch(err => {
        error.value = err;
      });

    return { data, error };
  }
};

This code fetches data from an API and stores it in a reactive variable.

How do I handle errors when making requests?

You can handle errors using the .catch() method in your Axios call, as shown in the previous example. You can also check the response status to provide more specific error handling.

Are there any best practices for using Axios in Vue 3?

Yes! Some best practices include:

1. Centralizing your API calls in a service file.
2. Using interceptors for request/response handling.
3. Managing loading states and error messages in your components.