用于 TypeScript 的 HTTP 客户端 Axios

什么是 Axios？

Axios 是一个基于 Promise 的流行 HTTP 客户端，适用于浏览器和 Node.js，使用 TypeScript 编写。它提供了便捷且强大的接口来执行 HTTP 请求，支持拦截器、JSON 数据的自动转换以及 CSRF 保护。该库非常适合需要灵活使用 REST API 的现代 Web 应用。

为什么需要 Axios？

与内置的 fetch 不同，Axios 会自动解析 JSON，将 HTTP 状态错误（例如 404 或 500）作为异常处理，支持取消请求和上传/下载进度条。对于 TypeScript 项目，Axios 提供了严格的请求和响应类型定义，从而简化开发并减少 bug 数量。如果您使用 TypeScript 编写代码并与 API 交互，Axios 是标准选择。

安装

npm install axios

对于 TypeScript 项目，类型已包含在包中，无需额外安装 @types/axios。

主要功能

支持所有 HTTP 方法： GET、POST、PUT、DELETE、PATCH 等。
自动数据转换： 响应自动解析为 JSON，请求对象自动序列化。
拦截器： 可以在发送请求前或接收响应后添加逻辑（例如，添加授权令牌）。
取消请求： 通过 CancelToken 或 AbortController。
超时与进度： 设置超时时间并监控上传/下载进度。
严格类型定义： 支持使用泛型来定义响应体的类型。

TypeScript 代码示例

import axios, { AxiosResponse } from 'axios';

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

async function fetchUser(id: number): Promise<User> {  try {    const response: AxiosResponse<User> = await axios.get<User>(`https://api.example.com/users/${id}`);    return response.data;  } catch (error) {    if (axios.isAxiosError(error)) {      console.error('Axios 错误:', error.message);    } else {      console.error('意外错误:', error);    }    throw error;  }}

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

何时使用 Axios

Axios 非常适合任何需要与 HTTP 服务器交互的 TypeScript 项目：从简单的 SPA 到复杂的 Node.js 服务端应用。当需要高级错误处理、自动数据序列化或与多个 API 交互时，它尤其有用。如果您使用 React、Vue 或 Angular，Axios 凭借其对拦截器和请求取消的支持，可以轻松集成到这些框架中。

该库得到积极维护，拥有庞大的社区，并被数千个项目所使用。Axios 是一个成熟且稳定的解决方案，无需额外的依赖项。