前端请求之ajax、axios、fetch

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);
  },
});

优点

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

缺点

1. 重量级
   • 引入 jQuery 仅为使用 Ajax 显得冗余，尤其在小型项目中不合适。
2. 基于 XHR
   • XHR（XMLHttpRequest）接口复杂，架构较为笨重，操作繁琐。
3. 不符合现代开发趋势
   • 随着 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);
  });

优点

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

缺点

1. 额外依赖
   • 需要引入第三方库，增大项目体积。
2. 现代性限制
   • 对不支持 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);
}

优点

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

缺点

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

功能对比总结

适用场景分析

1. 使用 Ajax 的场景

   • 需要兼容性强，且已有 jQuery 作为基础框架的项目。
   • 小型项目中，不依赖现代化开发工具链。

2. 使用 Axios 的场景

   • 使用现代框架（如 Vue、React）的项目。
   • 需要频繁处理拦截器、取消请求或高级配置的业务场景。

3. 使用 Fetch 的场景

   • 现代项目中，优先考虑轻量化和直接使用浏览器原生能力的场景。
   • 不需要复杂功能，仅用于简单的网络请求。

结论

• Ajax 是旧时代的解决方案，适用于传统项目，但在现代开发中逐渐被替代。
• Axios 功能强大且易用，是现代框架开发中的首选工具。
• Fetch 简单轻便，但功能有限，适合对请求管理需求较低的场景。