（JavaScript）ajax、axios、fetch 的区别

killerQueen2023-11-03 13:55

1. 前言：一些概念介绍

这里会先介绍一些概念，如果你全都知道可以直接跳到后面的内容

XML

XML（Extensible Markup Language）是一种用于描述数据的可扩展标记语言。它是一种纯文本格式，用于在计算机系统之间传输和存储结构化数据。XML 最初设计用于表示文档结构和内容，但后来广泛用于数据交换和配置文件等各种应用领域。

XHR

XHR 是 XMLHttpRequest 的缩写，它是一个用于在客户端（通常是浏览器）和服务器之间进行异步数据交换的 JavaScript API。XMLHttpRequest 对象允许你发起HTTP请求，接收服务器的响应并处理这些响应数据，而无需刷新整个页面。

XMLHttpRequest 最初设计用于处理 XML 数据，但它后来也广泛用于处理其他数据格式，如 JSON、HTML 和纯文本。因此，虽然它的名字中包含 "XML"，但它并不限制于 XML 数据。

XHR 的主要用途包括：

  • 发送HTTP请求（GET、POST、PUT、DELETE等）以获取或提交数据。
  • 处理服务器响应，包括解析响应数据。
  • 在页面加载后动态加载内容，而无需重新加载整个页面（AJAX）。

MVC

MVC 是一种软件架构模式，用于组织和管理应用程序的结构和代码。MVC 指的是 Model-View-Controller，它将应用程序的不同部分分为三个主要组件，以实现松耦合和分离关注点的目标。这个模式的主要目标是提高代码的可维护性、可重用性和可扩展性。

下面是 MVC 架构的三个主要组件及其职责：

  1. Model（模型）：

    • Model 表示应用程序的数据和业务逻辑。
    • 它负责管理数据的状态、验证、存储和检索数据。
    • Model 通常不关心用户界面（View）或用户交互（Controller）。

  2. View（视图）：

    • View 是用户界面的部分，负责将数据呈现给用户。
    • 它通常是应用程序的可视化部分，如网页、图形界面或移动应用的界面。
    • View 不处理数据或业务逻辑，它只负责显示数据。

  3. Controller（控制器）：

    • Controller 充当 Model 和 View 之间的中介。
    • 它接收用户的输入和操作，处理用户请求，并更新 Model 和 View。
    • Controller 负责将用户输入映射到相应的 Model 操作，并更新 View 以反映数据的变化。
    • Controller 通常包含应用程序的业务逻辑和控制流。

MVVM

MVVM 是一种软件架构模式，用于组织和管理应用程序的结构和代码，特别适用于构建用户界面和处理用户交互。MVVM 指的是 Model-View-ViewModel，它是基于MVC（Model-View-Controller）模式的演化和扩展。

MVVM 模式的三个主要组件及其职责如下：

  1. Model（模型）：

    • Model 表示应用程序的数据和业务逻辑，与传统的MVC模式中的Model相似。
    • 它负责管理数据的状态、验证、存储和检索数据。
    • Model 通常不关心用户界面（View）或用户交互（ViewModel）。

  2. View（视图）：

    • View 是用户界面的部分，负责将数据呈现给用户，与MVC模式中的View相似。
    • 它通常是应用程序的可视化部分，如网页、图形界面或移动应用的界面。
    • View 不处理数据或业务逻辑，它只负责显示数据。

  3. ViewModel（视图模型）：

    • ViewModel 是 MVVM 模式的核心，它充当 Model 和 View 之间的中介，负责处理用户界面的逻辑和数据绑定。
    • ViewModel 通常包含与用户界面相关的业务逻辑、数据状态和数据转换。
    • 它将 Model 中的数据适配为适用于 View 的形式，并通过双向数据绑定将数据自动同步到 View 中。
    • ViewModel 通常暴露命令（Command）和触发器（Triggers），以处理用户的交互操作。

关注分离

关注分离（Separation of Concerns，SoC）是软件工程中的一个重要原则，其核心思想是将一个复杂的系统分解成相互独立的模块或组件，每个模块或组件专注于解决一个特定的关注点或责任，从而提高代码的可维护性、可重用性和可扩展性。这个原则有助于降低系统的复杂度，减少代码耦合，使代码更易理解和维护。

Cookie（复数形式为Cookies）是一种在客户端（通常是Web浏览器）和服务器之间进行数据交换的小型文本文件。Cookie通常由服务器发送到客户端，并在客户端的本地计算机上存储，以便在以后的HTTP请求中将这些数据传回服务器。Cookies通常用于跟踪和识别用户、维护用户的会话状态、存储用户首选项等。

2. Ajax：

Ajax（Asynchronous JavaScript and XML）（异步 JavaScript 和XML）是一种传统的用于创建异步网络请求的技术。它通常使用 XMLHttpRequest 对象 来发送请求和接收响应。Ajax 可以用于传输各种数据格式，不仅限于 XML，尽管它的名字中包含了 XML。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

优点：

  • 原生浏览器支持，不需要额外的库或框架。
  • 可以处理各种响应数据类型。
  • 相对成熟，广泛使用。

缺点：

  • 需要编写相对复杂的代码来处理请求和响应。
  • 回调地狱问题，容易导致嵌套回调函数，降低代码可读性。
  • 不提供拦截请求和响应的便捷方式。
  • 本身是针对 MVC 编程，不符合前端 MVVM 的浪潮
  • 基于原生 XHR 开发，XHR 本身的架构不清晰
  • 不符合关注分离（Separation of Concerns）的原则
js 复制代码 
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

xhr.send();

这是一个使用原生Ajax的GET请求示例，它在请求完成后解析响应数据并将其打印到控制台。

3. Axios：

Axios 是一个基于 Promise 的 HTTP 客户端库，专门用于在浏览器和 Node.js 中发起 HTTP 请求。它提供了更简单的 API，使网络请求更容易管理和处理。

优点：

  • 支持 Promise，提供更清晰和可读的异步代码。
  • 提供拦截器（interceptors），允许对请求和响应进行全局的拦截和处理。
  • 支持取消请求、自动转换响应数据为 JSON 等方便功能。
  • 可以轻松处理错误和异常。

缺点：

  • 需要引入额外的库，相对于原生的 Ajax 有一些额外的依赖。
js 复制代码 
// 首先，需要安装 Axios：npm install axios
// 然后，使用 Axios 发起请求
const axios = require('axios');

axios.get('https://api.example.com/data')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

这是一个使用Axios的GET请求示例，它使用Promise来处理请求和响应，并提供了错误处理功能。

4. Fetch：

Fetch 是 JavaScript 原生的 API，用于进行网络请求。它是现代浏览器提供的标准方式，使用 Promise 来处理异步操作。Fetch 通常使用在 web 开发中，尤其在 React 和 Vue.js 等框架中常见。

Fetch 号称是 AJAX 的替代品，是在 ES6 出现的，使用了 ES6 中的promise 对象。Fetch 是基于 promise 设计的。Fetch 的代码结构比起 ajax 简单多。fetch 不是 ajax 的进一步封装，而是原生 js，没有使用 XMLHttpRequest 对象。

优点：

  • 基于 Promise，提供了更简单的异步编程模型。
  • 是浏览器原生支持的标准API，不需要引入额外的库。
  • 使用 JSON 作为默认的数据格式，简化了数据的处理。
  • 提供了更灵活的请求和响应对象，可以更容易地处理和转换数据。

缺点：

  • 在处理错误和异常时可能需要更多的代码，相对于 Axios 提供的错误处理更为简洁。fetch 只对网络请求报错，对 400，500 都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请 求不能完成时，fetch 才会被 reject。
  • fetch 默 认 不 会 带 cookie ， 需 要 添 加 配 置 项 ： fetch(url,{credentials: 'include'})
  • 某些旧版本的浏览器可能不支持 Fetch，需要使用 polyfill 进行支持。
  • fetch 不 支 持 abort ， 不 支 持 超 时 控 制 ， 使 用 setTimeout 及Promise.reject 的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
  • fetch 没有办法原生监测请求的进度，而 XHR 可以
js 复制代码 
fetch('https://api.example.com/data')
  .then(function (response) {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(function (data) {
    console.log(data);
  })
  .catch(function (error) {
    console.error(error);
  });

这是一个使用Fetch的GET请求示例。它也使用Promise来处理请求和响应，并提供了错误处理功能。Fetch 默认使用JSON作为数据格式，因此不需要额外的转换步骤。

总结

综上所述，选择使用哪种网络请求工具取决于项目的需求和开发环境。如果你需要更高级的功能和更好的代码可读性，Axios 是一个不错的选择。如果你希望使用原生浏览器支持的标准API，Fetch 是一个好选项。Ajax 作为传统方式，也可以使用，但在现代项目中，它通常不是首选。

相关推荐
小小竹子4 分钟前
前端vue-实现富文本组件
前端·vue.js·富文本
万物得其道者成12 分钟前
React Zustand状态管理库的使用
开发语言·javascript·ecmascript
小白小白从不日白13 分钟前
react hooks--useReducer
前端·javascript·react.js
下雪天的夏风25 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系，如何在TS 中使用 JS 不报错
前端·javascript·typescript
diygwcom37 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
volodyan40 分钟前
electron react离线使用monaco-editor
javascript·react.js·electron
^^为欢几何^^1 小时前
lodash中_.difference如何过滤数组
javascript·数据结构·算法
Hello-Mr.Wang1 小时前
vue3中开发引导页的方法
开发语言·前端·javascript
WG_171 小时前
C++多态
开发语言·c++·面试
鱼跃鹰飞1 小时前
Leetcode面试经典150题-130.被围绕的区域
java·算法·leetcode·面试·职场和发展·深度优先
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习