前端请求之ajax、axios、fetch_fetch ajax axios-CSDN博客

本文链接：https://blog.csdn.net/JimmyHeat/article/details/143894030

Ajax、Axios、Fetch 的详细讲解和比较

本人在学习js中一直很对请求的方式不是很理解，因此也做了一篇请求的总结，希望对大家有帮助

在现代 Web 开发中，进行 HTTP 网络请求的三种常见方式分别是 Ajax（基于 jQuery）、Axios（第三方库）和 Fetch（原生 API）。以下是对它们的详细分析，结合代码实现和各自的优缺点。

1. Ajax

实现代码

$.ajax({
  type: "POST",
  url: "/api/data",
  data: { key: "value" },
  dataType: "json",
  success: function (response) {
    console.log("Success:", response);
  },
  error: function (err) {
    console.log("Error:", err);
  },
});

优点

成熟性
- 基于 jQuery，使用方便，支持大部分主流浏览器。
功能丰富
- 支持进度监控、错误处理、同步/异步配置等功能。
生态广泛
- jQuery 社区庞大，配套文档和插件丰富。

缺点

重量级
- 引入 jQuery 仅为使用 Ajax 显得冗余，尤其在小型项目中不合适。
基于 XHR
- XHR（XMLHttpRequest）接口复杂，架构较为笨重，操作繁琐。
不符合现代开发趋势
- 随着 MVVM 框架（如 Vue、React）的流行，jQuery 的使用逐渐减少。

2. Axios

实现代码

axios({
  method: "post",
  url: "/api/data",
  data: {
    key: "value",
  },
})
  .then((response) => {
    console.log("Success:", response.data);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

优点

简洁性
- 语法清晰，使用 Promise 方式处理异步请求，代码更加直观。
功能丰富
- 支持拦截器（Interceptor）对请求和响应进行预处理。
- 内置 JSON 数据转换功能，无需手动解析。
- 支持取消请求、超时设置等高级功能。
多环境支持
- 在浏览器和 Node.js 环境均可使用。
默认携带 Cookie
- 在跨域请求中自动附带 Cookie，便于处理身份验证。

缺点

额外依赖
- 需要引入第三方库，增大项目体积。
现代性限制
- 对不支持 ES6 的旧浏览器环境，需要额外的 Polyfill（如 Babel）支持。

3. Fetch

实现代码

try {
  const response = await fetch("/api/data", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ key: "value" }),
  });
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  const data = await response.json();
  console.log("Success:", data);
} catch (error) {
  console.error("Error:", error);
}

优点

原生支持
- 不依赖任何库，浏览器原生提供，支持现代语法（如 Promise 和 async/await）。
链式调用
- 利用 Promise，可以方便地实现链式操作，异步逻辑更清晰。
跨平台性
- 内置于浏览器，无需安装额外库，体积更轻。

缺点

功能不完整
- 不支持请求拦截、取消请求、超时设置等功能，需要手动封装。
错误处理复杂
- 网络错误会触发 catch，但 HTTP 错误（如 400、500）不会抛出异常，需要手动检查 response.ok。
Cookie 处理需配置
- 默认不会携带 Cookie，需要通过 { credentials: "include" } 显式开启。
进度监控缺失
- 无法直接监控上传和下载进度。

功能对比总结

特性	Ajax	Axios	Fetch
语法简洁性	较繁琐	简洁	简洁
兼容性	IE9+	IE9+	IE10+
错误处理	回调函数	Promise 支持，较友好	手动处理 HTTP 状态码
拦截器支持	无	请求和响应均支持	无
请求取消	无	支持	需要手动封装
JSON 自动处理	无	自动	需要手动解析
携带 Cookie	默认支持	默认支持	手动配置
进度监控	支持	支持	不支持
体积影响	依赖 jQuery，较大	额外依赖 axios，适中	原生，最轻