Trae 使用技能全解析：从基础到实战避坑指南

6次阅读

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

Trae 是一个轻量级的 HTTP 客户端库，专为现代前端应用设计。它基于 fetch API 构建，提供了更简洁的 API 和更好的开发体验。Trae 特别适合需要频繁与后端 API 交互的应用程序，如单页应用 (SPA) 和渐进式 Web 应用(PWA)。

简洁的链式 API
请求 / 响应拦截器
自动转换 JSON 数据
超时处理
取消请求
全局配置

刚开始使用 Trae 时，开发者经常会遇到以下问题：

配置错误：基础 URL 设置不当导致请求发送到错误地址
性能问题：没有合理使用缓存策略，导致重复请求
错误处理不完善：未捕获网络错误和业务错误
类型混乱：TypeScript 类型定义不清晰
请求取消：不知道如何取消正在进行的请求

npm install trae --save

import trae from 'trae';

// 创建实例
const api = trae.create({
  baseUrl: 'https://api.example.com',
  timeout: 5000,
});

// 添加请求拦截器
api.before((config) => {
  // 添加认证 token
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

// 添加响应拦截器
after((response) => {
  // 统一处理错误
  if (response.status >= 400) {return Promise.reject(response);
  }
  return response;
});

// 错误处理
api.afterError((error) => {console.error('请求失败:', error);
  return Promise.reject(error);
});

全局实例：适合小型应用，配置简单
多实例：适合大型应用，不同模块可使用不同配置

全局拦截器：适用于所有请求
实例拦截器：只影响特定实例的请求
请求级拦截器：针对单个请求的特殊处理

// 封装错误处理函数
const handleError = (error) => {if (error.response) {
    // 服务器返回了响应但状态码不在 2xx 范围内
    console.error('服务器错误:', error.response.status);
  } else if (error.request) {
    // 请求已发出但没有收到响应
    console.error('网络错误:', error.message);
  } else {
    // 在设置请求时发生了错误
    console.error('请求配置错误:', error.message);
  }
};

// 使用示例
try {const response = await api.get('/users');
} catch (error) {handleError(error);
}

启用缓存：

api.get('/users', { cache: true});

批量请求：

// 使用 Promise.all 并行请求
const [users, posts] = await Promise.all([api.get('/users'),
  api.get('/posts')
]);

取消重复请求：

const source = api.CancelToken.source();

api.get('/users', {cancelToken: source.token});

// 取消请求
source.cancel('操作被用户取消');

// userApi.ts
import trae from 'trae';

const userApi = trae.create({
  baseUrl: 'https://api.example.com/users',
  timeout: 10000,
});

// 添加认证拦截器
userApi.before((config) => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

// API 方法
export const UserService = {
  // 获取用户列表
  async getUsers(params = {}) {
    try {const response = await userApi.get('/', { params});
      return response.data;
    } catch (error) {throw new Error('获取用户列表失败');
    }
  },

  // 创建用户
  async createUser(userData) {
    try {const response = await userApi.post('/', userData);
      return response.data;
    } catch (error) {throw new Error('创建用户失败');
    }
  },

  // 更新用户
  async updateUser(userId, userData) {
    try {const response = await userApi.patch(`/${userId}`, userData);
      return response.data;
    } catch (error) {throw new Error('更新用户失败');
    }
  },

  // 删除用户
  async deleteUser(userId) {
    try {const response = await userApi.delete(`/${userId}`);
      return response.data;
    } catch (error) {throw new Error('删除用户失败');
    }
  }
};