useFetch

一个强大的数据获取 Hook，提供了完整的请求状态管理、错误处理、重试机制等功能。

基础用法

📋 用户列表

⏳ 正在加载用户数据...

显示代码

手动执行请求

🔍 用户查询

用户ID:

💡 请输入用户ID进行查询

显示代码

POST 请求示例

👤 创建新用户

姓名:

邮箱:

显示代码

带重试和超时的请求

🔄 不稳定的 API 请求

💡 点击"发起请求"开始测试不稳定的 API

显示代码

数据转换和缓存

📊 数据转换示例

显示代码

API 参考

useFetch

function useFetch<T = any>(url: string | (() => string), options?: UseFetchOptions<T>): UseFetchReturn<T>;

配置选项

参数	类型	默认值	说明
method	string	'GET'	请求方法
immediate	boolean	true	是否立即执行请求
timeout	number	0	请求超时时间(ms)
retry	number	0	重试次数
retryDelay	number	1000	重试延迟(ms)
transform	Function	-	数据转换函数
beforeRequest	Function	-	请求前钩子
afterRequest	Function	-	请求后钩子
onError	Function	-	错误处理钩子
onRetry	Function	-	重试钩子
cache	boolean	false	是否启用缓存
cacheTime	number	300000	缓存时间(ms)

返回值

返回一个数组，包含以下元素：

索引	类型	说明
[0]	ComputedRef<T | null>	响应数据（只读）
[1]	Ref<boolean>	加载状态
[2]	Ref<FetchError | null>	错误信息
[3]	Object	控制函数和状态对象，包含以下属性： • status: 请求状态 (idle/loading/success/error/canceled) • execute: 手动执行请求函数 • cancel: 取消当前请求函数 • refresh: 刷新请求函数（重新执行）

类型定义

/**
 * 请求状态枚举
 */
enum FetchStatus {
  IDLE = "idle",
  LOADING = "loading",
  SUCCESS = "success",
  ERROR = "error",
  CANCELED = "canceled",
}

/**
 * 请求错误接口
 */
interface FetchError {
  message: string;
  status?: number;
  statusText?: string;
  isTimeout: boolean;
  isCancel: boolean;
  isNetwork: boolean;
}

/**
 * 执行函数类型
 */
type ExecuteFunction = () => Promise<void>;

/**
 * 取消函数类型
 */
type CancelFunction = () => void;

/**
 * 刷新函数类型
 */
type RefreshFunction = () => Promise<void>;

/**
 * useFetch 返回值类型（数组形式）
 */
type UseFetchReturn<T> = [
  /** 响应数据（只读） */
  ComputedRef<T | null>,
  /** 加载状态 */
  Ref<boolean>,
  /** 错误信息 */
  Ref<FetchError | null>,
  /** 控制函数和状态对象 */
  {
    /** 请求状态 */
    status: Ref<FetchStatus>;
    /** 执行请求函数 */
    execute: ExecuteFunction;
    /** 取消请求函数 */
    cancel: CancelFunction;
    /** 刷新请求函数 */
    refresh: RefreshFunction;
  },
];

/**
 * 数据获取钩子
 * @param url 请求 URL 或返回 URL 的函数
 * @param options 配置选项
 * @returns UseFetchReturn
 * @example
 * const [data, loading, error] = useFetch('/api/users');
 */
function useFetch<T = any>(url: string | (() => string), options?: UseFetchOptions<T>): UseFetchReturn<T>;

/**
 * 创建可复用的 fetch 实例
 * @param config 全局配置
 * @returns useFetch 函数
 * @example
 * const useApi = createFetch({ baseUrl: 'https://api.example.com' });
 */
function createFetch(config: CreateFetchConfig): typeof useFetch;

注意事项

1. 取消请求 - 组件卸载时会自动取消进行中的请求
2. 错误处理 - 提供详细的错误信息和类型判断
3. 重试机制 - 支持自定义重试次数和延迟
4. 数据转换 - 可以在获取数据后进行转换
5. 类型安全 - 完整的 TypeScript 类型支持
6. 缓存策略 - 可以通过 beforeRequest 钩子实现缓存

使用场景

• RESTful API 调用
• 表单数据提交
• 文件上传下载
• 实时数据获取
• 分页数据加载
• 搜索和过滤
• 数据同步