vue3 axios

// 引入 Vue 3 和 axios
import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    // 定义一个响应式变量来存储数据
    const data = ref(null);

    // 在组件挂载时发起请求
    onMounted(async () => {
      try {
        // 使用 axios 发起 GET 请求
        const response = await axios.get('https://api.example.com/data');
        // 将响应的数据赋值给响应式变量
        data.value = response.data;
      } catch (error) {
        console.error('There was an error fetching the data!', error);
      }
    });

    return {
      data, // 返回响应式变量，以便在模板中使用
    };
  },
};

解释说明：

1. 引入依赖：首先我们引入了 Vue 3 的 Composition API (ref, onMounted) 和 axios。
2. 定义响应式变量：使用 ref 创建了一个响应式变量 data，用于存储从 API 获取的数据。
3. 发起请求：在 onMounted 钩子中，当组件挂载后，使用 axios.get 方法发起一个 GET 请求到指定的 API 端点。
4. 处理响应：如果请求成功，将响应的数据赋值给 data 变量。如果请求失败，则捕获错误并在控制台输出错误信息。
5. 返回数据：最后将 data 返回，这样可以在模板中直接使用这个响应式变量。

希望这段代码和解释对你有帮助！