JavaScript如何发起网络请求？fetch与axios区别解析

JavaScript发起网络请求最常用的是原生fetch和第三方库axios，二者虽目标一致，但设计理念与使用体验差异显著：fetch轻量简洁却需手动处理JSON解析、HTTP错误状态和Cookie携带等细节，适合追求极简依赖的轻量场景；而axios功能完备，自动解析响应、内置拦截器、超时控制、请求取消和更好的错误处理机制，大幅降低中大型项目中的重复开发成本。本文深入对比二者的核心特性、典型用法与适用边界，帮你根据项目规模、兼容性需求和团队规范做出更明智的技术选型。

JavaScript 实现网络请求最常用的是 fetch（原生 API）和 axios（第三方库），它们都能发起 HTTP 请求，但设计目标、使用方式和默认行为差异明显。

fetch 是浏览器原生支持的 Promise 风格 API

fetch 由浏览器原生提供，无需安装依赖，语法简洁，但默认不带 Cookie、不自动处理 JSON、4xx/5xx 状态码也不会 reject，需手动判断：

• 必须显式调用 .json()、.text() 等方法解析响应体
• 只有网络错误（如断网、DNS 失败）才会触发 catch；HTTP 错误状态（如 404、500）仍走 then，需检查 response.ok 或 response.status
• 默认不发送 Cookie，如需携带，要加 credentials: 'include'
• 没有内置请求/响应拦截、超时控制、取消请求（需配合 AbortController）

axios 是功能完备的 HTTP 客户端库

axios 基于 XMLHttpRequest（浏览器）或 http 模块（Node.js），开箱即用，对开发者更友好：

• 自动识别响应内容类型，JSON 响应默认解析为 JS 对象（无需手动 .json()）
• HTTP 状态码非 2xx 会直接进入 catch（可配置 validateStatus 修改规则）
• 默认携带 Cookie（同源下），也可统一配置 withCredentials
• 支持请求/响应拦截器，方便统一加 token、loading、错误提示等
• 内置超时（timeout）、取消请求（CancelToken 或 AbortController）、并发控制（axios.all）

基础用法对比（GET 请求示例）

fetch：

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

axios：

axios.get('/api/user', {
  withCredentials: true
})
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

选哪个？看场景

• 项目轻量、只需简单请求、想减少依赖 → 优先用 fetch，搭配 AbortController 和封装工具函数即可补足短板
• 中大型项目、需要统一拦截、token 管理、错误重试、上传进度、TypeScript 支持更好 → axios 更省心
• Node.js 环境（无 fetch）或需兼容旧浏览器（IE）→ 只能选 axios

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript如何发起网络请求？fetch与axios区别解析》文章吧，也可关注golang学习网公众号了解相关技术文章。