Trae是一个轻量级的JavaScript HTTP客户端，体积仅为Axios的四分之一，更适合对bundle体积有要求的项目。它拥有极简的API，基于Promise原生，并支持拦截器，提供类似于Axios的请求/响应处理能力。虽然Trae由社区维护，Node.js支持有限，但对于前端SPA项目或追求Promise风格API的开发者来说，是一个不错的选择。文章还对比了Trae和Axios在功能、体积、TypeScript支持等方面的差异，并给出了选择建议。

🚀 **体积小巧:** Trae仅约3KB，相比Axios的13KB，大大减少了bundle体积，更适合对性能有要求的项目。

✨ **API简洁易用:** Trae拥有更精简的API，配置更少，上手更快，降低了学习成本。

🔄 **拦截器支持:** Trae支持请求和响应拦截器，可以方便地添加token、处理错误等，功能与Axios类似。

🔀 **原生Promise支持:** Trae完全基于现代Promise，避免了回调地狱，代码更易读、易维护。

🚦 **AbortController取消请求:** Trae使用AbortController来取消请求，这是现代的API，比Axios的CancelToken更先进。

为什么选择 Trae？

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

Trae 的核心优势：

✅ 极简 API - 比 Axios 更少的配置
✅ 轻量级 - 仅 3KB（gzipped）
✅ Promise 原生 - 完全基于现代 Promise
✅ 拦截器支持 - 类似 Axios 的请求/响应拦截
✅ TypeScript 友好 - 社区维护的类型定义

---

1. 安装 Trae

浏览器 / Webpack / Vite

npm install trae# 或yarn add trae

CDN（浏览器直接使用）

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

---

2. 基本使用

2.1 创建实例

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

2.2 发送 GET 请求

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

2.3 发送 POST 请求

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

2.4 并发请求（Promise.all）

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

---

3. 高级功能

3.1 拦截器（Interceptors）

// 请求拦截器（添加 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）

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

3.3 超时设置

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？