API Client Demo

Axios-based API client with full TypeScript support

📤 App 用户文件上传示例

支持服务器中转上传和预签名 URL 客户端直传两种方式，兼容 Cloudflare R2 / AWS S3

认证状态：初始化中...

服务器中转模式：文件先上传到后端服务器，服务器再转存到 S3/R2。适合需要在服务端处理（如校验、压缩、水印）的场景。支持上传进度回调。

支持 JPG, PNG, GIF, WebP 等图片格式

代码示例

import { appFileService } from '@/lib/api/app-file';

// 通过服务器中转上传
const result = await appFileService.upload(
  file,        // File 对象
  'image',     // 分类: general | image | avatar | document
  (percent) => console.log(`进度: ${percent}%`),
);

console.log(result.url);  // 文件访问 URL
console.log(result.md5);  // 文件 MD5
console.log(result.size); // 文件大小（字节）

客户端 API 示例

使用 React Query + Axios，支持自动缓存、重试、错误处理

API 特性

🔐 认证管理

• 自动添加 Authorization token
• Token 过期自动处理
• 支持服务端和客户端

🔄 请求管理

• 自动重试机制
• 请求超时控制
• 请求/响应拦截器

⚠️ 错误处理

• 统一错误类型 (APIError)
• 详细错误信息
• 可配置的错误提示

📝 类型安全

• TypeScript 完整支持
• 泛型响应类型
• 服务层封装

📤 文件操作

• 文件上传（进度监听）
• 文件下载
• 多文件批量上传

📊 日志记录

• 请求日志
• 错误日志
• 开发/生产环境区分

📚 使用文档

完整的 API 使用指南请查看项目根目录的 API_GUIDE.md 文件

客户端调用:

import { clientGet } from '@/lib/api';
const response = await clientGet<User[]>('/users');

服务端调用:

import { serverGet } from '@/lib/api';
const response = await serverGet<User[]>('/users');

使用服务层:

import { userService } from '@/lib/api/services';
const response = await userService.getUsers();