17370845950

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

JavaScript 中发起网络请求最常用的是 fetch（原生 API）和 axios（第三方库），两者都能发 GET/POST 等请求，但设计目标、默认行为和使用体验差异明显。

fetch 是浏览器原生支持的 Promise 接口

fetch 由浏览器提供，无需安装，语法简洁：

示例：GET 请求

fetch('/api/users')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

注意点：

• 默认不带 cookie，需显式加 { credentials: 'include' }
• 400/500 状态码不会自动 reject，要手动检查 res.ok 或 res.status
• 不支持请求超时、取消（需配合 AbortController）
• 不支持 progress 事件（如上传进度）

axios 是功能更全的 HTTP 客户端库

axios 基于 XMLHttpRequest（浏览器）或 http 模块（Node.js），开箱即用更多实用特性：

示例：POST 请求 + 自动错误处理

axios.post('/api/login', { username: 'a', password: 'b' })
  .then(res => console.log(res.data))
  .catch(err => {
    // err.response 有 status/statusText/data
    // err.request 是原生 XMLHttpRequest 实例
    console.error(err.response?.data?.message || err.message);
  });

优势包括：

• 默认携带 cookie（可配置 withCredentials）
• HTTP 错误状态（如 404、500）自动进入 catch
• 内置请求/响应拦截器，方便统一加 token、日志、错误提示
• 支持超时（timeout: 5000）、取消请求（CancelToken 或 AbortController）
• 自动序列化 JSON 请求体、自动解析 JSON 响应

选哪个？看场景

项目轻量、只需基础请求 → 用 fetch，减少依赖，现代浏览器兼容良好（IE 不支持，需 polyfill）。

需要统一错误处理、拦截逻辑、上传下载进度、兼容老环境或团队已有规范 → axios 更省心。

React/Vue 项目中，两者都常见；Next.js / SSR 场景下，fetch 可服务端复用（Node.js 18+ 原生支持），而 axios 需额外适配。

小提醒：别忽略错误边界

无论用哪个，都要处理网络异常（断网、跨域失败、DNS 错误等）——这些通常触发 catch，但不会返回 response 对象。建议区分判断：

• err.name === 'TypeError' && err.message.includes('fetch') → 网络层失败
• err.response 存在 → HTTP 层错误（如 401）
• err.request 存在但 err.response 为空 → 请求发出但无响应