Bulletproof React项目中的API层设计最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00363/article/details/148328286

Bulletproof React项目中的API层设计最佳实践

bulletproof-react 一个简单、可扩展且功能强大的架构，用于构建生产就绪的 React 应用程序。项目地址: https://gitcode.com/gh_mirrors/bu/bulletproof-react

为什么需要专门的API层

在现代前端开发中，与后端API的交互是不可避免的核心功能。Bulletproof React项目提出了一套完整的API层设计方案，旨在解决以下常见问题：

API请求分散在组件中难以维护
缺乏统一的错误处理和配置
类型安全难以保证
缓存策略不一致

单一API客户端实例

设计理念

Bulletproof React推荐使用单一API客户端实例，这种做法有诸多优势：

统一配置基础URL、请求头、拦截器等
避免重复创建客户端带来的性能开销
集中管理认证令牌等全局配置
便于实现统一的错误处理机制

实现方式

可以使用原生fetch或流行库如axios、graphql-request等创建客户端。示例配置通常包括：

const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
});

// 添加请求拦截器
apiClient.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 添加响应拦截器
apiClient.interceptors.response.use(
  (response) => response.data,
  (error) => {
    // 统一错误处理
    return Promise.reject(error);
  }
);

声明式API请求管理

结构化请求声明

Bulletproof React建议将API请求声明为独立模块，每个请求应包含：

类型定义：清晰的TypeScript接口定义请求和响应数据结构
验证模式：使用如Zod等库定义数据验证规则
获取函数：封装实际API调用逻辑
React Hook：基于react-query等库提供组件级访问

查询请求示例

// 类型定义
interface Discussion {
  id: string;
  title: string;
  content: string;
}

interface GetDiscussionsParams {
  page?: number;
  limit?: number;
}

// 获取函数
export const getDiscussions = async (params: GetDiscussionsParams) => {
  const response = await apiClient.get<Discussion[]>('/discussions', { params });
  return response.data;
};

// React Query Hook
export const useDiscussions = (params: GetDiscussionsParams) => {
  return useQuery(['discussions', params], () => getDiscussions(params));
};

变更请求示例

interface CreateDiscussionDto {
  title: string;
  content: string;
}

export const createDiscussion = async (data: CreateDiscussionDto) => {
  const response = await apiClient.post<Discussion>('/discussions', data);
  return response.data;
};

export const useCreateDiscussion = () => {
  const queryClient = useQueryClient();
  
  return useMutation(createDiscussion, {
    onSuccess: () => {
      queryClient.invalidateQueries('discussions');
    },
  });
};