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

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

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

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

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

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

示例：

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

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

但它有几点必须注意：

不会自动抛出网络错误：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>）