<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="loading">加载中...</div>
    <div v-else>{{ data }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import request from '@/utils/request' // 根据项目路径调整

const data = ref(null)
const loading = ref(false)

// GET 请求示例
const fetchData = async () => {
  loading.value = true
  try {
    // 1. 基本 GET 请求
    const res = await request.get('/api/users')
    data.value = res

    // 2. 带参数的 GET 请求
    const params = { page: 1, limit: 10 }
    const paginatedData = await request.get('/api/users', params)

    // 3. 自定义配置的请求
    const config = { headers: { 'X-Custom-Header': 'token' } }
    const specialData = await request.get('/api/special', null, config)
  } catch (error) {
    console.error('请求失败:', error)
  } finally {
    loading.value = false
  }
}

// POST 请求示例
const createItem = async () => {
  try {
    const payload = { name: '新项目', status: 'active' }
    const res = await request.post('/api/items', payload)
    console.log('创建成功:', res)
  } catch (error) {
    console.error('创建失败:', error)
  }
}
</script>
