17370845950

fetch是浏览器原生API，轻量简洁但需手动处理cookie、错误、JSON序列化等；axios是功能完备的第三方库，内置拦截器、超时、自动JSON处理等，适合复杂需求。

JavaScript 发送 HTTP 请求主要靠 fetch（原生 API）和 axios（第三方库），两者都能发 GET/POST 等请求，但设计思路、默认行为和使用体验差别不小。

fetch 是浏览器原生支持的轻量 API

fetch 是现代浏览器内置的标准方法，无需安装，语法简洁：

• 返回 Promise，必须用 .then() 或 async/await 处理
• 默认不带 cookie，要加 credentials: 'include' 才能传凭证
• 400/500 状态码不会自动 reject，需手动检查 response.ok
• 没有内置请求/响应拦截、超时控制、取消请求（得靠 AbortController）
• 上传文件时需手动构造 FormData，JSON 数据要自己 JSON.stringify() 并设 Content-Type

axios 是功能更全的封装库

axios 基于 XMLHttpRequest（或 Node.js 的 http 模块），在浏览器和 Node 环境都可用：

• 默认携带 cookie（可配置 withCredentials）
• 网络错误或 4xx/5xx 状态码都会触发 catch，更符合直觉
• 内置请求/响应拦截器，方便统一加 token、日志、错误处理
• 支持超时设置（timeout: 5000）、取消请求（CancelToken 或 AbortController）、自动 JSON 序列化/反序列化
• 上传文件更简单：axios.post(url, formData) 直接支持

什么时候选 fetch，什么时候选 axios？

项目轻量、只跑浏览器、需求简单（比如查个公开 API），用 fetch 足够，没额外依赖；需要登录态管理、错误统一处理、文件上传、兼容老环境或团队已有 axios 生态，选 axios 更省心。Vue 3 官方推荐 fetch，React 社区两者都常见。

一个小对比示例：发一个带 token 的 POST 请求

fetch 写法：

const res = await fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxx'
  },
  body: JSON.stringify({ name: 'Alice' })
});
if (!res.ok) throw new Error('请求失败');
const data = await res.json();

axios 写法：

const res = await axios.post('/api/user', { name: 'Alice' }, {
  headers: { Authorization: 'Bearer xxx' }
});
const data = res.data;

基本上就这些。不复杂，但容易忽略细节。