49 lines
1.2 KiB
Vue
49 lines
1.2 KiB
Vue
<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>
|