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

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

1. 原生 Fetch API

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

示例：

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 简洁。

• 适用场景：

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

示例：

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 管理。

示例：

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 环境兼容较好。

示例：

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。

示例：

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）：

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	轻量，无依赖
中大型项目 / 全局拦截器	Axios	拦截器、取消请求、并发、社区成熟
Node.js 环境	Axios / Got / superagent	可兼容服务器环境
GraphQL 后端	graphql-request	专用工具，语法直观
前端数据缓存 / 轮询	SWR / SWRV / vue-query	自动缓存、轮询、重试

💡 建议：

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