vue3使用axios

// 引入axios库
import axios from 'axios';

// 创建一个Axios实例，可以在这里配置默认的请求头、基础URL等
const instance = axios.create({
  baseURL: 'https://api.example.com', // API的基础URL
  timeout: 5000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json' // 默认请求头
  }
});

// 定义一个获取数据的方法
async function fetchData() {
  try {
    // 发送GET请求
    const response = await instance.get('/data'); // 替换为实际的API路径
    console.log(response.data); // 打印返回的数据
    return response.data;
  } catch (error) {
    console.error('Error fetching data:', error); // 捕获并打印错误信息
  }
}

// 定义一个发送数据的方法
async function sendData(data) {
  try {
    // 发送POST请求
    const response = await instance.post('/submit', data); // 替换为实际的API路径和要发送的数据
    console.log('Data sent successfully:', response.data); // 打印返回的数据
    return response.data;
  } catch (error) {
    console.error('Error sending data:', error); // 捕获并打印错误信息
  }
}

// 在Vue组件中使用这些方法
export default {
  name: 'MyComponent',
  methods: {
    async loadData() {
      const data = await fetchData();
      this.items = data; // 假设this.items是组件中的一个属性
    },
    async submitForm(formData) {
      await sendData(formData);
    }
  }
};

解释说明：

1. 引入axios：首先需要通过import axios from 'axios';引入axios库。
2. 创建Axios实例：通过axios.create()创建一个自定义的Axios实例，可以在其中配置基础URL、请求头等全局设置。
3. 定义请求方法：分别定义了fetchData和sendData两个异步函数来处理GET和POST请求。这两个函数使用await关键字等待请求完成，并处理可能发生的错误。
4. 在Vue组件中使用：在Vue组件中通过methods选项暴露了loadData和submitForm方法，用于调用上面定义的请求方法。