TypeScript 的 HTTP 客户端：Web 开发顶级库

TypeScript 的 HTTP 客户端：网络交互顶级库

在现代 TypeScript Web 开发中，选择合适的 HTTP 客户端对于性能、类型安全和代码可维护性至关重要。让我们来看看执行 HTTP 请求的最佳库、它们的特点以及使用示例。

1. Axios — 通用标准

Axios 凭借其丰富的 API 和对 TypeScript 的内置支持，仍然是最流行的 HTTP 客户端。该库为 GET、POST、PUT、DELETE 请求提供了便捷的方法，自动 JSON 转换和请求取消功能。

import axios from 'axios';

interface User {  id: number;  name: string;  email: string;}

async function getUser(id: number): Promise<User> {  const response = await axios.get<User>(`/api/users/${id}`);  return response.data;}

// 发送数据示例const newUser: Partial<User> = { name: '伊万', email: 'ivan@example.com' };axios.post('/api/users', newUser).then(({ data }) => console.log(data));

优势：

• 与 TypeScript 深度集成（响应的泛型）
• 用于日志记录和错误处理的拦截器
• 内置 XSS 防护和自动序列化
• 支持文件上传进度

2. Ky — 轻量且现代

Ky 是一个极简库（仅约 5KB），构建于 Fetch API 之上。非常适合注重加载速度和简单性的项目。完全使用 TypeScript 进行类型化。

import ky from 'ky';

interface Post {  userId: number;  id: number;  title: string;}

const posts = await ky.get('https://jsonplaceholder.typicode.com/posts').json<Post[]>();

// 使用自定义标头发送const response = await ky.post('https://api.example.com/data', {  json: { key: 'value' },  headers: { 'X-API-Key': 'secret' },});

关键特性：

• 自动处理 HTTP 错误（4xx/5xx 状态码）
• 内置重试支持（失败时自动重试）
• 通过扩展类轻松自定义
• 可在浏览器和 Node.js 中运行（通过适配器）

3. Got — 强大的 Node.js 工具

Got 是一个功能齐全的 HTTP 客户端，适用于 TypeScript 服务器端。支持流、缓存、代理和复杂的身份验证场景。

import got from 'got';

interface ApiResponse {  success: boolean;  data: Record<string, unknown>;}

const result = await got.get('https://api.example.com/resource', {  responseType: 'json',  headers: {    authorization: `Bearer ${process.env.TOKEN}`  }}).json<ApiResponse>();

// 带进度条的文件下载got.stream('https://example.com/file.zip')  .on('downloadProgress', ({ percent }) => {    console.log(`已下载 ${(percent * 100).toFixed(0)}%`);  })  .pipe(fs.createWriteStream('./file.zip'));

何时选择 Got：

• 用于高负载的服务器端应用程序
• 需要处理数据流时
• 用于复杂的缓存和重试场景
• 通过装饰器与 TypeScript 集成

4. Fetch API — 原生选择

现代 Fetch API 内置于浏览器和 Node.js（从 18 版本开始）。TypeScript 通过泛型添加类型化，使其成为一个完整的工具。

interface Config {  baseURL: string;  token?: string;}

async function fetchData<T>(endpoint: string, config: Config): Promise<T> {  const response = await fetch(`${config.baseURL}${endpoint}`, {    headers: {      'Content-Type': 'application/json',      ...(config.token && { Authorization: `Bearer ${config.token}` })