Trae 入门指南：一个更简单、更现代的 HTTP 请求库

为什么选择 Trae？

在 JavaScript 生态中，Axios 一直是 HTTP 客户端的首选，但它逐渐变得臃肿（~13KB）。如果你想要一个 更轻量、更现代 的替代方案，Trae（仅 ~3KB）可能更适合你！

Trae 的核心优势：

✅ 极简 API - 比 Axios 更少的配置

✅ 轻量级 - 仅 3KB（gzipped）

✅ Promise 原生 - 完全基于现代 Promise

✅ 拦截器支持 - 类似 Axios 的请求/响应拦截

✅ TypeScript 友好 - 社区维护的类型定义

1. 安装 Trae

浏览器 / Webpack / Vite

bash 复制代码

npm install trae
# 或
yarn add trae

CDN（浏览器直接使用）

html 复制代码

<script src="https://unpkg.com/trae/dist/trae.min.js"></script>

2. 基本使用

2.1 创建实例

javascript 复制代码

import trae from 'trae';

// 可选的全局配置
const api = trae.create({
  baseUrl: 'https://api.example.com',
  headers: { 'Content-Type': 'application/json' }
});

2.2 发送 GET 请求

javascript 复制代码

api.get('/users')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

2.3 发送 POST 请求

javascript 复制代码

api.post('/users', { name: 'Alice', age: 25 })
  .then((res) => console.log('User created:', res.data));

2.4 并发请求（Promise.all）

javascript 复制代码

Promise.all([
  api.get('/users/1'),
  api.get('/posts?userId=1')
]).then(([user, posts]) => {
  console.log(user.data, posts.data);
});

3. 高级功能

3.1 拦截器（Interceptors）

javascript 复制代码

// 请求拦截器（添加 token）
api.interceptors.request.use((config) => {
  config.headers.Authorization = 'Bearer xxx';
  return config;
});

// 响应拦截器（统一错误处理）
api.interceptors.response.use(
  (res) => res,
  (err) => {
    if (err.response.status === 401) {
      alert('请登录！');
    }
    return Promise.reject(err);
  }
);

3.2 取消请求（AbortController）

javascript 复制代码

const controller = new AbortController();

api.get('/data', { signal: controller.signal })
  .catch((err) => {
    if (err.name === 'AbortError') {
      console.log('请求被取消');
    }
  });

// 取消请求
controller.abort();

3.3 超时设置

javascript 复制代码

api.get('/slow-api', { timeout: 3000 }) // 3秒超时
  .catch((err) => console.log(err.message)); // "Timeout exceeded"

Trae vs Axios 功能对比

功能	Trae	Axios
体积	🟢 ~3KB (轻量)	🟡 ~13KB (较重)
拦截器	✅ 基本支持	✅ 完整支持
取消请求	✅ `AbortController` (现代API)	✅ `CancelToken` (旧式API)
Node.js 支持	❌ 仅浏览器	✅ 完整支持
TypeScript	⚠️ 社区类型	✅ 官方完善支持
学习曲线	🟢 极简易用	🟡 中等复杂度
扩展性	🟡 一般	✅ 强大
维护状态	🟡 社区维护	✅ 官方维护

特性对比饼图（组合方案）

pie title Trae 优势分布 "体积小" : 40 "API简洁" : 30 "现代AbortController" : 20 "其他" : 10

pie title Axios 优势分布 "功能全面" : 35 "Node支持" : 25 "TS官方支持" : 20 "生态成熟" : 20

选择建议：

前端SPA项目 → 推荐 Trae
全栈/复杂应用 → 推荐 Axios
教学/原型开发 → 两者皆可

5. 总结

Trae 是一个 更轻量、更现代 的 HTTP 客户端，适合：

小型/中型前端项目
需要极致精简 bundle 的场景
喜欢 Promise 风格 API 的开发者

你现在在用 Axios 还是 Trae？