template-10550/docs/REQUEST_USAGE.md

Request 工具使用说明

概述

src/utils/request.ts 已经适配了后台生成的 API 代码格式，支持两种使用方式：

1. 标准方式（适配后台生成代码）

后台生成的代码使用 request.get<ApiResult> 格式，返回完整的 ApiResult 响应：

// 后台生成的代码格式
export async function pageCmsNavigation(params: CmsNavigationParam) {
  const res = await request.get<ApiResult<PageResult<CmsNavigation>>>(
    '/cms/cms-navigation/page',
    params
  );
  if (res.code === 0) {
    return res.data;
  }
  return Promise.reject(new Error(res.message));
}

2. 便捷方式（自动提取数据）

如果你想要自动提取 data 字段，可以使用 getData 系列方法：

import request from '@/utils/request';

// 自动提取 data 字段
const data = await request.getData<CmsNavigation[]>('/cms/cms-navigation');

// 等价于
const res = await request.get<ApiResult<CmsNavigation[]>>('/cms/cms-navigation');
const data = res.data;

可用方法

标准方法（返回完整 ApiResult）

• request.get<T>(url, params?, config?)
• request.post<T>(url, data?, config?)
• request.put<T>(url, data?, config?)
• request.del<T>(url, data?, config?)
• request.patch<T>(url, data?, config?)

便捷方法（自动提取 data）

• request.getData<T>(url, params?, config?)
• request.postData<T>(url, data?, config?)
• request.putData<T>(url, data?, config?)
• request.delData<T>(url, data?, config?)

配置选项

interface RequestConfig {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  data?: any;
  header?: Record<string, string>;
  timeout?: number;
  retry?: number;
  showLoading?: boolean;
  showError?: boolean;
  returnRaw?: boolean; // 内部使用，控制返回格式
}

错误处理

所有请求都会自动处理：

• 网络错误
• 超时错误
• 认证错误（自动清除登录信息并跳转）
• 业务错误（显示错误提示）

注意事项

1. 后台生成的代码无需修改，直接使用 request.get<ApiResult> 格式
2. 新写的代码可以选择使用 getData 系列方法来简化代码
3. 所有方法都支持自动重试、错误处理、认证等功能