React中类实现网络逻辑与Context依赖注入的优势及API最佳实践咨询

实现代码 #

HttpClientService #

export class HttpClientService {
  private baseURL: string;
  tokenRepository: LocalTokenRepository;
  instance: AxiosInstance;

  constructor(baseURL: string, tokenRepository: LocalTokenRepository) {
    this.tokenRepository = tokenRepository;
    this.baseURL = baseURL;
    this.instance = axios.create({
      baseURL: this.baseURL,
      headers: { Authorization: this.tokenRepository.get() }
    });

    this.handleInterceptor();
  }
  private handleInterceptor = () => {
    this.instance.interceptors.response.use(
      this.handleResponse,
      this.handleError
    );
  };

  private handleResponse = ({ data }: AxiosResponse) => data;

  protected handleError = (error: any) => Promise.reject(error);
}

AuthService #

export class AuthService {
  private httpClient: HttpClientService;
  private tokenRepository: LocalTokenRepository;
  constructor(
    httpClient: HttpClientService
    // tokenRepository: LocalTokenRepository
  ) {
    this.httpClient = httpClient;
    this.tokenRepository = this.httpClient.tokenRepository; 
  }

  async signup(email: string, password: string) {
    const accessTOKEN = (await this.httpClient.instance.post(
      'data',
      { email, password },
      { params: '' }
    )) as string;
    this.tokenRepository.save(accessTOKEN);
  }

  async singin(email: string, password: string): Promise<any> {
    console.log(email, password, 'signIn?');
    // return await this.httpClient.instance.get('products', { params: '' });
  }

  signout() {
    this.tokenRepository.remove();
  }
}

API Context配置 #

export const apiContext = createContext<APIType | null>(null);

const tokenRepository = new LocalTokenRepository();
const httpClient = new HttpClientService('baseurl', tokenRepository);
const productService = new ProductService(httpClient);
const authService = new AuthService(httpClient);

export const ApiProvider = ({ children }: { children: React.ReactNode }) => {
  return (
    <apiContext.Provider value={{ productService, authService }}>
      {children}
    </apiContext.Provider>
  );
};

疑问解答 #

1. 在React中使用Context API注入依赖来管理网络逻辑有什么优势？ #

首先，它彻底解决了prop drilling的麻烦——你不用把API服务实例一层一层通过props往下传递，任何需要用到这些服务的组件，都能直接通过useContext获取，代码更简洁，组件层级也不会因为传参变得臃肿不堪。

其次，它提供了统一的依赖管理入口。所有API服务的实例化都集中在ApiProvider里，后续如果要更换服务实现（比如把Axios换成Fetch，或者给HttpClient加新的拦截器），只需要修改Provider里的代码，不用去每个组件里找调用的地方，维护成本低很多。

另外，它让测试变得更简单。你可以轻松在测试环境中提供一个Mock的API服务实例，通过Context注入给组件，不用修改组件内部代码就能完成单元测试，隔离性更好。

最后，它能保证服务实例的单例性——整个应用里只会有一份HttpClient、AuthService的实例，避免重复创建实例导致的资源浪费，也能保证token这类状态的一致性。

2. 采用类编写网络逻辑具备哪些优势？我尚未明确其与直接使用Axios的区别； #

直接用Axios的话，你可能会在各个组件里重复写axios.post('/api/signup', ...)、设置headers、处理拦截器这些代码，冗余度极高。而用类封装的优势非常明显：

• 封装复用性：把Axios的实例配置、拦截器、通用的响应/错误处理都封装在HttpClientService里，所有业务服务（比如AuthService、ProductService）都可以复用这个基础客户端，不用重复写相同的配置逻辑。比如你要给所有请求加Authorization头，只需要在HttpClient的构造里设置一次就行，不用每个请求都手动加。

• 业务逻辑聚合：像AuthService把登录、注册、登出这些和认证相关的API调用都集中在一起，组件里只需要调用authService.signup(email, password)就行，不用关心具体的请求路径、参数格式，代码更清晰，也方便后续修改业务逻辑（比如换个登录接口地址，只需要改AuthService里的代码）。

• 可扩展性：如果后续需要给HttpClient加新功能，比如请求重试、缓存机制，直接在类里加方法或者修改拦截器就行，所有依赖它的业务服务都会自动受益。而直接用Axios的话，你得去每个调用的地方改，非常麻烦。

• 类型安全（TypeScript场景下）：类可以定义清晰的类型，比如handleResponse明确返回AxiosResponse的data部分，AuthService的方法参数也有类型约束，比零散的Axios调用更不容易出错。

3. React中处理API逻辑的最佳方式是什么？目前业内最常用的方法是哪种？ #

目前业内常用的方法主要有几种，没有绝对的“最佳”，得根据项目规模和团队习惯选择：

• 封装类/函数式服务 + Context注入：就是你现在用的这种方式，适合中型到大型项目。它把API逻辑和UI组件解耦，维护性和扩展性都不错，而且Context能方便地在组件间共享服务实例。很多团队会结合TypeScript来增强类型安全。

• React Query/SWR：这两个是目前非常流行的库，专门用来处理数据获取、缓存、同步、重新请求这些场景。它们比手动封装Axios更上层，自带缓存、背景刷新、错误重试、加载状态管理等功能，能大幅减少你自己写的样板代码。比如用React Query的话，你不用手动管理loading、error状态，也不用自己写缓存逻辑，它会帮你处理好。适合大部分数据驱动的应用，尤其是需要频繁和API交互的项目。

• 自定义Hook：把API调用封装成自定义Hook，比如useSignup、useProducts，在组件里直接调用。这种方式比较轻量，适合小型项目或者不需要复杂服务层的场景。它的优势是Hook能直接访问组件的状态和生命周期，比如根据组件的挂载状态取消请求，避免内存泄漏。

如果要说最常用的，React Query/SWR现在的普及率非常高，因为它们解决了很多手动封装Axios时的痛点，比如状态管理、缓存、并发请求处理等。而封装服务+Context的方式则更适合需要高度自定义API逻辑的场景，比如复杂的权限控制、自定义拦截器逻辑等。很多大型项目会把两者结合起来：用React Query处理数据获取和缓存，用自定义服务封装底层的API调用逻辑，再通过Context或者直接导出服务实例来使用。

内容的提问来源于stack exchange，提问作者Jeong