怎样进行JavaScript网络请求_Fetch和Axios有何区别-js教程-PHP中文网

怎样进行JavaScript网络请求_Fetch和Axios有何区别

夢幻星辰

发布： 2025-12-23 19:15:43

原创

857人浏览过

fetch是浏览器原生API，轻量但需手动处理错误、Cookie、超时等；axios是第三方库，开箱即用，内置拦截器、自动JSON序列化、超时控制等功能，适合中大型项目。

怎样进行javascript网络请求_fetch和axios有何区别

JavaScript 中发起网络请求最常用的是 fetch 和 axios，两者都能发 HTTP 请求，但设计目标、默认行为和使用体验差异明显。选哪个不取决于“谁更好”，而要看项目需求、团队习惯和是否需要额外功能。

fetch 是浏览器原生 API，轻量但需手动处理细节

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

示例：

fetch('/api/users')
  .then(res => {
    if (!res.ok) throw new Error('网络响应失败');
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

登录后复制

但它有几点必须注意：

论小文

可靠的论文写作助手，包含11种学术写作类型，万字论文一键生成，可降重降AIGC，参考文献真实可标注，图表代码均可自定义添加。

435

查看详情

立即学习“Java免费学习笔记（深入）”；

不会自动抛出网络错误：HTTP 状态码如 404、500 不会触发 catch，需手动检查 res.ok 或 res.status
默认不带 Cookie：跨域请求需显式设置 credentials: 'include'
不支持请求/响应拦截、超时控制、取消请求（需 AbortController）
没有内置的请求体序列化（如自动转 JSON）或响应数据预处理

axios 是第三方库，开箱即用，封装更友好

axios 是基于 XMLHttpRequest（或 Node.js 的 http 模块）封装的库，需通过 npm 安装：npm install axios。它把常见痛点都做了默认处理：

HTTP 错误自动 reject：4xx / 5xx 响应直接进 catch
默认携带 Cookie（同域），跨域也只需配置 withCredentials: true
内置请求/响应拦截器：方便统一加 token、loading、错误提示等
天然支持超时、取消请求（CancelToken 已弃用，推荐用 AbortController）、自动序列化/反序列化 JSON
在 Node.js 环境也能用（fetch 在纯 Node 中不可用，需靠 polyfill 或替代方案）

示例：

axios.get('/api/users', {
  timeout: 5000,
  withCredentials: true
})
.then(res => console.log(res.data))
.catch(err => {
  if (err.code === 'ECONNABORTED') console.log('请求超时');
});

登录后复制

适用场景建议

小项目、学习、或只做简单 GET 请求 → fetch 足够，无额外依赖
中大型应用、需统一管理请求逻辑（鉴权、错误、日志）→ axios 更省心
需要兼容老版本 IE（fetch 不支持）→ 只能用 axios 或 XMLHttpRequest
使用 TypeScript 且重视类型推导 → 两者都支持良好，但 axios 的响应泛型更直观（axios.get<user>(...)</user>）