TypeScript 的 HTTP 客户端：顶级库

TypeScript 的 HTTP 客户端：顶级库全面概览

在现代 TypeScript 网页开发中，与远程 API 的交互是一项基本任务。选择合适的 HTTP 客户端会直接影响性能、代码可读性和调试的便利性。在本文中，我们将探讨五个用于在 TypeScript 中执行 HTTP 请求的最佳库、它们的特点、使用示例以及选择建议。

1. Axios — 通用标准

Axios 仍然是 TypeScript 生态中最流行的 HTTP 客户端。它提供了基于 Promise 的便捷 API、自动 JSON 转换以及内置的拦截器支持。

主要特点：

开箱即用地支持浏览器和 Node.js
自动解析 JSON 响应
通过 CancelToken 或 AbortController 取消请求
XSRF 防护
对 TypeScript 的完整类型支持

TypeScript 使用示例：

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  const response: AxiosResponse<User> = await axios.get<User>(    `https://jsonplaceholder.typicode.com/users/${id}`  );  return response.data;}

// 使用fetchUser(1).then(user => console.log(user.name));

Axios 非常适合需要精细配置请求和错误处理的大型项目。

2. Fetch API — 原生方法

现代 Fetch API 内置于所有浏览器和 Node.js（从版本 18 开始）。它轻量、无需安装额外包，但需要手动处理错误和解析。

优点：

无依赖
支持流和 Service Workers
通过泛型与 TypeScript 原生集成

TypeScript 示例：

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

async function getPost(id: number): Promise<Post> {  const response = await fetch(    `https://jsonplaceholder.typicode.com/posts/${id}`  );  if (!response.ok) {    throw new Error(`HTTP error! status: ${response.status}`);  }  return response.json() as Promise<Post>;}

getPost(1).then(post => console.log(post.title));

推荐用于小型项目或需要最小化包体积时。

3. Ky — 极简与便捷

Ky 是 Fetch API 的一个轻量级封装，由 Sindre Sorhus 团队创建。它添加了便捷功能：重试、超时、自动 JSON 解析和便捷的错误管理。

特点：

大小仅约 ~2 KB（gzip）
网络错误时自动重试
支持 AbortController
完全支持 TypeScript

代码示例：

import ky from 'ky';

interface Product {  id: number;  title: string;  price: number;}

async function getProduct(id: number): Promise<Product> {  const product = await ky    .get(`https://fakestoreapi.com/products/${id}`)    .json<Product>();  return product;}

getProduct(1).then(product => console.log(product.title));

Ky 非常适合注重性能和简洁性的现代网页应用。