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 架构的三个主要组件及其职责：

Model（模型）：

Model 表示应用程序的数据和业务逻辑。

它负责管理数据的状态、验证、存储和检索数据。

Model 通常不关心用户界面（View）或用户交互（Controller）。

View（视图）：

View 是用户界面的部分，负责将数据呈现给用户。

它通常是应用程序的可视化部分，如网页、图形界面或移动应用的界面。

View 不处理数据或业务逻辑，它只负责显示数据。

Controller（控制器）：

Controller 充当 Model 和 View 之间的中介。

它接收用户的输入和操作，处理用户请求，并更新 Model 和 View。

Controller 负责将用户输入映射到相应的 Model 操作，并更新 View 以反映数据的变化。

Controller 通常包含应用程序的业务逻辑和控制流。

MVVM

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

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

Model（模型）：

Model 表示应用程序的数据和业务逻辑，与传统的MVC模式中的Model相似。

它负责管理数据的状态、验证、存储和检索数据。

Model 通常不关心用户界面（View）或用户交互（ViewModel）。

View（视图）：

View 是用户界面的部分，负责将数据呈现给用户，与MVC模式中的View相似。

它通常是应用程序的可视化部分，如网页、图形界面或移动应用的界面。

View 不处理数据或业务逻辑，它只负责显示数据。

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 作为传统方式，也可以使用，但在现代项目中，它通常不是首选。

（JavaScript）ajax、axios、fetch 的区别