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

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

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

不复杂但容易忽略的关键点

• fetch 的 Response.body 是 ReadableStream，只能读一次；多次读取需用 res.clone()
• axios 默认 Content-Type 是 application/json，发表单要用 FormData 并手动设 header
• 两者都遵循 CORS 规则，服务端需正确配置 access-Control-Allow-Origin 等头
• vite / webpack 项目中，开发环境可配代理避免跨域，与请求库本身无关