前端vue3请求数据

在Vue 3中，我们通常使用axios库或其他HTTP客户端来处理数据请求。以下是一个基础示例，展示如何在组件内部发送GET请求：

<template>
  <div v-if="loading">加载中...</div>
  <ul v-for="(item, index) in items" :key="index">
    <li>{{ item.name }}</li>
  </ul>
</template>

<script setup>
import axios from 'axios';

const apiUrl = 'https://api.example.com/data'; // 替换为你实际的API地址

let loading = false;
let items = [];

async function fetchData() {
  try {
    loading = true;
    const response = await axios.get(apiUrl);
    items = response.data; // 假设响应的数据结构是数组，包含name属性
  } catch (error) {
    console.error('Error fetching data:', error);
  } finally {
    loading = false;
  }
}

// 在组件挂载时初始化数据
fetchData();

// 当需要更新数据时调用
useEffect(() => {
  // 比如当路由改变时再次获取数据
  // 或者定时刷新数据
}, []);

</script>

在这个例子中，`fetchData`函数封装了异步请求，并通过`useEffect`钩子在组件挂载后或者满足特定条件时执行。`v-if`指令用于显示加载状态，直到数据加载完成。