# 前端 HTTP 请求工具大盘点：Axios、fetch、ky 等对比与推荐

URL: https://caijiao.org/posts/22
Source: docs/posts/22.md
Description: 本文全面分析了前端常用的 HTTP 请求工具，包括 Axios、fetch、ky、superagent、SWR/Vue-query 等，比较优缺点和适用场景，帮助前端开发者选择合适的请求方案。

在现代前端开发中，HTTP 请求是必不可少的环节。除了流行的 [Axios](/axios/)，还有许多其他工具可以选择。本文将系统梳理前端常用的请求工具，比较优缺点，并给出适用场景建议。

## 1. 原生 Fetch API

- **说明**：浏览器自带的 API，现代浏览器几乎都支持。
- **特点**：
  - 返回 `Promise`，支持链式调用和 `async/await`。
  - 不需要额外依赖。
- **缺点**：
  - 不支持请求和响应拦截器，需要自己封装。
  - 对错误处理不够直观（非 2xx 状态不会抛错）。

**示例**：

```js
async function getData() {
  try {
    const response = await fetch('/api/data', { method: 'GET' });
    if (!response.ok) throw new Error('Network response was not ok');
    const data = await response.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}
````

## 2. ky

- **说明**：基于 Fetch 封装的轻量级 HTTP 请求库。
- **特点**：

  - 体积小 (~1kb gzip)。
  - 内置重试、超时、JSON 处理。
  - 可链式调用，API 简洁。
- **适用场景**：

  - 轻量级前端项目或组件库。
  - 需要简单配置重试和超时机制。

**示例**：

```js
import ky from 'ky';

async function getData() {
  const data = await ky.get('/api/data').json();
  console.log(data);
}
```

## 3. Axios

- **说明**：最流行的前端请求库，支持浏览器和 Node.js。
- **特点**：

  - 支持 **请求/响应拦截器**，统一处理 token、loading、错误。
  - 支持取消请求、并发请求。
  - 社区成熟，插件丰富。
- **适用场景**：

  - 中大型项目。
  - 需要全局拦截器、统一错误处理、token 管理。

**示例**：

```js
import axios from 'axios';

const service = axios.create({
  baseURL: '/api',
  timeout: 10000,
});

service.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

service.interceptors.response.use(
  res => res.data,
  err => Promise.reject(err)
);

export default service;
```

## 4. superagent

- **说明**：链式调用风格的经典 HTTP 请求库。
- **特点**：

  - 支持浏览器和 Node.js。
  - 链式调用，代码简洁。
- **适用场景**：

  - 需要简单链式请求控制。
  - 对 Node.js 环境兼容较好。

**示例**：

```js
import request from 'superagent';

request.get('/api/data')
  .then(res => console.log(res.body))
  .catch(err => console.error(err));
```

## 5. GraphQL 请求库：graphql-request

- **说明**：专门针对 GraphQL API 的轻量请求工具。
- **特点**：

  - 支持浏览器和 Node.js。
  - 查询语法与 GraphQL 完全一致。
- **适用场景**：

  - 项目后端是 GraphQL API。

**示例**：

```js
import { request, gql } from 'graphql-request';

const query = gql`{ user(id: "1") { name } }`;

request('/graphql', query).then(data => console.log(data));
```

## 6. React/Vue 数据请求增强工具

- **SWR / SWRV / React Query / vue-query**

  - **特点**：数据自动缓存、轮询、重试，减少重复请求。
  - **适用场景**：前端频繁请求数据且需要缓存或状态管理。

**示例（SWR）**：

```js
import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

function MyComponent() {
  const { data, error } = useSWR('/api/data', fetcher);

  if (error) return <div>Error</div>;
  if (!data) return <div>Loading...</div>;
  return <div>{data.message}</div>;
}
```

## 7. XMLHttpRequest

- **说明**：老牌浏览器 API，fetch 的前身。
- **特点**：

  - 支持 IE。
  - 可做低层级请求控制。
- **缺点**：

  - API 繁琐，Promise 不原生支持。
  - 现代开发中几乎不用，除非兼容老项目。

## 总结与推荐

| 场景            | 推荐工具                     | 备注               |
| ------------- | ------------------------ | ---------------- |
| 小型项目 / 轻量请求   | fetch / [ky](/ky/)               | 轻量，无依赖           |
| 中大型项目 / 全局拦截器 | [Axios](/axios/)                    | 拦截器、取消请求、并发、社区成熟 |
| Node.js 环境    | Axios / Got / superagent | 可兼容服务器环境         |
| GraphQL 后端    | graphql-request          | 专用工具，语法直观        |
| 前端数据缓存 / 轮询   | SWR / SWRV / vue-query   | 自动缓存、轮询、重试       |

💡 **建议**：

- 如果只是简单请求，小型项目可以直接使用 **fetch 或 ky**。
- 对于复杂项目，尤其是有 token、全局错误处理需求，**Axios 最稳妥**。
- 前端需要缓存和自动轮询时，可以配合 **SWR、vue-query** 或 **React Query** 使用底层请求库。