api-http-patterns.mdc 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. # API 和 HTTP 请求规范
  2. ## HTTP 请求封装
  3. - 可以使用 `简单http` 或者 `alova` 或者 `@tanstack/vue-query` 进行请求管理
  4. - HTTP 配置在 [src/http/](mdc:src/http/) 目录下
  5. - `简单http` - [src/http/http.ts](mdc:src/http/http.ts)
  6. - `alova` - [src/http/alova.ts](mdc:src/http/alova.ts)
  7. - `vue-query` - [src/http/vue-query.ts](mdc:src/http/vue-query.ts)
  8. - 请求拦截器在 [src/http/interceptor.ts](mdc:src/http/interceptor.ts)
  9. - 支持请求重试、缓存、错误处理
  10. ## API 接口规范
  11. - API 接口定义在 [src/api/](mdc:src/api/) 目录下
  12. - 按功能模块组织 API 文件
  13. - 使用 TypeScript 定义请求和响应类型
  14. - 支持 `简单http`、`alova` 和 `vue-query` 三种请求方式
  15. ## 示例代码结构
  16. ```typescript
  17. // API 接口定义
  18. export interface LoginParams {
  19. username: string
  20. password: string
  21. }
  22. export interface LoginResponse {
  23. token: string
  24. userInfo: UserInfo
  25. }
  26. // alova 方式
  27. export const login = (params: LoginParams) =>
  28. http.Post<LoginResponse>('/api/login', params)
  29. // vue-query 方式
  30. export const useLogin = () => {
  31. return useMutation({
  32. mutationFn: (params: LoginParams) =>
  33. http.post<LoginResponse>('/api/login', params)
  34. })
  35. }
  36. ```
  37. ## 错误处理
  38. - 统一错误处理在拦截器中配置
  39. - 支持网络错误、业务错误、认证错误等
  40. - 自动处理 token 过期和刷新
  41. ---
  42. globs: src/api/*.ts,src/http/*.ts
  43. ---