src/
└── http/
    └── core/
        ├── use-request.ts  // useRequest核心实现
        └── index.ts        // 统一导出入口

import type { WatchSource } from 'vue'
import type { AxiosRequestConfig } from 'axios'

/**
 * useRequest配置项类型
 * @template T 请求返回数据的类型
 */
export interface UseRequestOptions<T> {
  // 是否在组件挂载时自动请求，默认true
  auto?: boolean
  // 响应式依赖项，变化时自动重新请求
  deps?: WatchSource<any>[]
  // 请求的初始数据
  initialData?: T
  // 请求前的回调函数
  onBefore?: () => void
  // 请求成功的回调函数，接收返回数据
  onSuccess?: (data: T) => void
  // 请求失败的回调函数，接收错误信息
  onError?: (error: any) => void
  // 请求完成的回调函数（无论成功/失败都会执行）
  onFinally?: () => void
}

import type { Ref } from 'vue'
import type { AxiosRequestConfig } from 'axios'

/**
 * useRequest返回结果类型
 * @template T 请求返回数据的类型
 */
export interface UseRequestReturn<T> {
  // 请求返回的响应式数据
  data: Ref<T | undefined>
  // 请求加载状态，true表示加载中
  loading: Ref<boolean>
  // 请求错误信息，null表示无错误
  error: Ref<any | null>
  // 手动触发请求的方法，可传入Axios配置项
  run: (config?: AxiosRequestConfig) => Promise<T>
}

import { ref, watch } from 'vue'
import type { AxiosRequestConfig } from 'axios'
import type { UseRequestOptions, UseRequestReturn } from './type'

/**
 * Vue3通用网络请求Hook
 * @template T 请求返回数据的类型
 * @param requestFn 异步请求函数，需返回Promise
 * @param options 配置项，默认空对象
 * @returns 包含请求状态和方法的对象
 */
export function useRequest<T>(
  requestFn: (config?: AxiosRequestConfig) => Promise<T>,
  options: UseRequestOptions<T> = {}
): UseRequestReturn<T> {
  const {
    auto = true,
    deps = [],
    initialData,
    onBefore,
    onSuccess,
    onError,
    onFinally
  } = options

  const data = ref<T | undefined>(initialData)
  const loading = ref(false)
  const error = ref<any | null>(null)

  const executeRequest = async (config?: AxiosRequestConfig): Promise<T> => {
    try {
      onBefore?.()
      loading.value = true
      error.value = null
      const result = await requestFn(config)
      data.value = result
      onSuccess?.(result)
      return result
    } catch (err) {
      error.value = err
      onError?.(err)
      throw err
    } finally {
      loading.value = false
      onFinally?.()
    }
  }

  const run = (config?: AxiosRequestConfig): Promise<T> => {
    return executeRequest(config)
  }

  if (auto) {
    executeRequest()
  }

  if (deps.length > 0) {
    watch(deps, () => {
      executeRequest()
    }, { deep: true })
  }

  return {
    data,
    loading,
    error,
    run
  }
}

// 导出useRequest Hook及相关类型
export * from './use-request'

<template>
  <div class="list-page">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="error" class="error">请求失败：{{ error.message }}</div>
    <div v-else class="list">
      <ul>
        <li v-for="item in data?.list" :key="item.id">{{ item.title }}</li>
      </ul>
      <button @click="run" class="refresh-btn">刷新列表</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRequest } from '@/http/core'
import { demoService } from '@/services/demo-service'
import type { PageData, Demo } from '@/services/demo-service'

const { data, loading, error, run } = useRequest<PageData<Demo>>(() => 
  demoService.getList({ pageNum: 1, pageSize: 10 })
)
</script>

<template>
  <div class="detail-page">
    <h1>Demo详情</h1>
    <select v-model="demoId">
      <option value="1">Demo 1</option>
      <option value="2">Demo 2</option>
      <option value="3">Demo 3</option>
    </select>

    <div v-if="loading">加载中...</div>
    <div v-else-if="error">请求失败：{{ error.message }}</div>
    <div v-else class="detail">
      <h2>{{ data?.title }}</h2>
      <p>{{ data?.content }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRequest } from '@/http/core'
import { demoService } from '@/services/demo-service'
import type { Demo } from '@/services/demo-service'

const demoId = ref(1)
const demoIdRef = computed(() => demoId.value)

const { data, loading, error } = useRequest<Demo>(
  () => demoService.getDetail(Number(demoId.value)),
  { deps: [demoIdRef], auto: true }
)
</script>

<template>
  <div class="create-page">
    <h1>创建Demo</h1>
    <input v-model="title" placeholder="请输入标题" class="input" />
    <input v-model="content" placeholder="请输入内容" class="input" />
    <button @click="handleCreate" :disabled="loading" class="submit-btn">
      {{ loading ? '创建中...' : '立即创建' }}
    </button>

    <div v-if="error" class="error">创建失败：{{ error.message }}</div>
    <div v-if="data" class="success">创建成功：{{ data.title }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRequest } from '@/http/core'
import { demoService } from '@/services/demo-service'
import type { Demo } from '@/services/demo-service'

const title = ref('')
const content = ref('')

const { data, loading, error, run } = useRequest<Demo>(
  (params) => demoService.create(params),
  { auto: false }
)

const handleCreate = async () => {
  if (!title.value || !content.value) return
  await run({
    title: title.value,
    content: content.value,
    author: 'test',
    status: true,
    createTime: new Date().getTime()
  })
  title.value = ''
  content.value = ''
}
</script>