如何通过 Class 封装底层的 Web API

用Class封装Web API的核心是抽离重复逻辑，通过BaseHTTP类统一处理请求、错误、鉴权和配置，再按模块继承生成业务API类，实现配置集中化、调用简洁化与维护解耦化。

直接用 Class 封装 Web API，核心是把重复的请求逻辑、错误处理、身份校验、基础配置抽离成可复用的对象，让业务层只关心“要什么”，而不是“怎么发”。

明确 Base URL 和全局配置
每个项目都有统一的接口前缀（比如 https://api.example.com/v1），把它单独拎出来，避免硬编码散落在各处。

• 在 config.js 或 constants.ts 里定义：

  export const API_CONFIG = {  baseURL: 'https://api.example.com/v1',  timeout: 10000,  headers: { 'Content-Type': 'application/json' }};

封装一个基础 HTTP 类
这个类负责发起真实请求，处理通用流程：拦截器、loading 状态、统一错误码解析、自动重试（可选）。

• 它不直接调用具体业务接口，而是提供 get、post、put 等通用方法；
• 所有请求都自动拼接 baseURL，并带上默认 header；
• 对响应做初步判断：状态码非 2xx、后端返回 code !== 0 都触发统一错误处理。

按模块拆分业务 API 类
继承基础 HTTP 类，每个模块（如 user、order、product）对应一个子类，只写本模块专属接口：

• 构造时传入路径前缀（如 /user），后续方法自动补全；
• 每个方法返回 Promise，类型明确（例如 Promise<UserInfo>）；
• 参数校验、token 注入、数据格式转换都在这一层完成。
  例如：

  class UserAPI extends BaseHTTP {constructor() {  super('/user');}async login(data: LoginParams) {  return this.post('/login', data);}async profile() {  return this.get('/profile');}}

在页面或服务中直接使用实例
不需要每次都 new，推荐单例或依赖注入方式管理实例：

• 页面里 const userAPI = new UserAPI()；
• 调用 userAPI.login({ phone, pwd })，返回值直接 await；
• 错误由基础类统一抛出，业务层只需 catch 并提示用户，不用管 token 过期重刷或网络重试逻辑。

这样一层一层剥离后，接口变更只需改基础类或某个模块类，业务代码几乎不动。