Trae封装技能入门指南：从零开始构建高效HTTP客户端

5次阅读

没有评论

共计 1946 个字符，预计需要花费 5 分钟才能阅读完成。

在日常开发中，我们经常遇到这样的场景：

每个请求都需要手动添加 Authorization 头
响应数据需要重复进行 JSON 解析
错误处理分散在各处，无法统一管理
接口变更时需要修改多处代码

使用原生 http 模块或直接调用 axios 虽然能完成任务，但随着项目规模增长，这些问题会越来越明显。这就是我们需要封装 HTTP 客户端的原因。

Trae 和 Axios 都是优秀的 HTTP 客户端库，但 Trae 有几个独特优势：

更灵活的中间件系统 – Trae 的 middleware 机制允许更细粒度的控制
更好的可组合性 – 可以轻松创建多个实例并复用配置
TypeScript 友好 – 类型推断更精确

首先安装 Trae:

npm install trae

然后创建基础实例:

import trae from 'trae';

const api = trae.create({
  baseUrl: 'https://api.example.com',
  headers: {'Content-Type': 'application/json',}
});

请求拦截器示例(处理 JWT):

api.before((request) => {const token = localStorage.getItem('token');
  if (token) {request.headers.Authorization = `Bearer ${token}`;
  }
  return request;
});

api.after((response) => {
  // 统一处理响应数据
  return response.data;
});

分层错误处理策略:

api.after((response) => {if (response.status >= 400) {
    // 业务错误
    throw new BusinessError(response.data.message);
  }
  return response;
}, (error) => {
  // 网络错误
  if (error.message === 'Network Error') {throw new NetworkError();
  }
  throw error;
});

import trae, {TraeInstance} from 'trae';

type ApiResponse<T> = {
  data: T;
  code: number;
  message?: string;
};

class ApiClient {
  private instance: TraeInstance;

  constructor(baseURL: string) {this.instance = trae.create({ baseURL});
    this.setupInterceptors();}

  private setupInterceptors() {
    // 请求拦截器
    this.instance.before((config) => {
      // 添加认证头
      const token = this.getToken();
      if (token) {config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    });

    // 响应拦截器
    this.instance.after((response) => {
        // 成功响应处理
        return response.data;
      },
      (error) => {
        // 错误处理
        if (error.response?.status === 401) {this.handleUnauthorized();
        }
        return Promise.reject(error);
      }
    );
  }

  public async get<T>(url: string): Promise<ApiResponse<T>> {return this.instance.get(url);
  }

  // 其他 HTTP 方法实现...
}