Vue中的基本概念

---

一、Vue是什么？

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

二、Node.js是什么？

简单的说 Node.js 就是运行在服务端的 JavaScript；是一个基于 Chrome JavaScript 运行时建立的一个平台；是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。

三、Axios是什么？

Axios是一个常用的JavaScript库，用于从Web浏览器或Node.js环境中发起HTTP请求。它提供了一个简单易用的API来发送HTTP请求和处理响应。Axios可以在前端（浏览器）和后端（Node.js）应用程序中使用。

1. Axios在浏览器和Node.js中进行HTTP请求的一般过程：

• 浏览器中创建XMLHttpRequests
• 从node.js中创建http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

四、Promise是什么？

Promise（承诺）是JavaScript中的一种异步编程模式，它让你能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。这样使得异步方法可以像同步方法那样返回值：异步方法并不会立即返回最终的值，而是会返回一个 promise，以便在未来某个时候把值交给使用者。
一个Promise代表了一个异步操作的最终结果。

1、Promise的三种状态：

Pending（进行中）：初始状态，表示异步操作正在进行中，尚未完成。
Fulfilled（已完成）：表示异步操作成功完成，并返回一个值。
Rejected（已失败）：表示异步操作失败，可能由于错误或其他原因。

待定状态的 Promise 对象要么会通过一个值被兑现，要么会通过一个原因（错误）被拒绝。当这些情况之一发生时，我们用 promise 的 then 方法排列起来的相关处理程序就会被调用。如果 promise 在一个相应的处理程序被绑定时就已经被兑现或被拒绝了，那么这个处理程序也同样会被调用，因此在完成异步操作和绑定处理方法之间不存在竞态条件。
注：then()方法用于注册对Promise对象的成功回调函数。它接收两个参数：onFulfilled（可选）和onRejected（可选）。

五、Ajax是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。
XMLHttpRequest 只是实现 Ajax 的一种方式。

1、XMLHttpRequest

XMLHttpRequest 是一个内置对象，用于在浏览器中发送 HTTP 请求并获取响应。它是原始的 Ajax 技术的核心组成部分，用于实现异步通信。通过 XMLHttpRequest，可以使用 JavaScript 在客户端与服务器进行数据交换，而无需刷新整个页面。它支持各种 HTTP 方法，如 GET、POST、PUT、DELETE 等，并具有以下特点和功能：

• 异步通信：XMLHttpRequest 允许在发送请求后继续执行其他操作，无需等待响应返回。这样可以提高页面的响应性能，使用户能够进行其他操作而无需等待整个页面重新加载。
• 客户端和服务器数据交换：通过 XMLHttpRequest，可以向服务器发送请求并获取响应数据。这使得可以动态地更新页面内容，获取服务器端数据，处理表单提交等操作。
• 跨域请求：XMLHttpRequest 可以用于进行跨域请求，即在浏览器中从一个域名发送请求到另一个域名。在跨域请求中，需要注意浏览器的同源策略限制，并在服务器端设置适当的 CORS（跨源资源共享）头部以允许跨域请求。
• 事件驱动：XMLHttpRequest 发送和接收请求是基于事件的。可以注册事件处理程序来监听请求的不同阶段，如请求开始、请求成功、请求失败等。这样可以根据不同的事件状态进行相应的处理和操作。

2. Axios 和 Ajax的区别

都是用于发送 HTTP 请求的技术，但它们之间存在一些区别。

• 技术原理：Ajax（Asynchronous JavaScript and XML）是一种使用 JavaScript 和 XML（现在更常用 JSON）进行异步通信的技术。它使用浏览器内置的XMLHttpRequest 对象来发送和接收数据。而 Axios 是一个基于 Promise 的 HTTP 客户端，使用了 XMLHttpRequest（在浏览器中）或者 http 模块（在 Node.js 中）来发送 HTTP 请求。
• 库/工具：Ajax 并不是一个具体的库或工具，而是一种使用原生 JavaScript 实现的技术。开发人员可以直接使用原生的 XMLHttpRequest 对象来编写 Ajax 请求。相比之下，Axios 是一个独立的第三方库，提供了更简洁、易用和功能丰富的 API，用于发送 HTTP 请求。
• 语法和API：Ajax 使用原生的 JavaScript 语法和 XMLHttpRequest 对象来发送请求，需要编写更多的代码来处理不同的请求状态和异步操作。而 Axios 提供了一个更简洁、一致和易于使用的 API，支持各种请求方法（如 GET、POST、PUT 等），可以设置请求头、发送请求参数，并处理响应数据等。
• 功能特性：Axios 在功能上更加强大和全面。它提供了许多高级特性，如请求和响应拦截器、自动转换请求和响应数据、取消请求、并发请求等。这些功能使得开发人员能够更方便地处理复杂的网络请求场景，并提供更好的错误处理和调试能力。
• 跨域请求：Ajax 在进行跨域请求时，需要处理浏览器的同源策略限制，并使用 CORS（跨源资源共享）等技术来允许跨域请求。Axios 也需要处理跨域请求的问题，但它提供了更简单的配置选项和默认设置，可以更方便地处理跨域请求。

总的来说，Axios 是一个功能强大且易于使用的 HTTP 客户端库，提供了更方便的 API 和丰富的功能，适用于浏览器和 Node.js 环境。Ajax 是一种使用原生 JavaScript 和 XMLHttpRequest 对象进行异步通信的技术，需要更多的编码和处理来实现各种异步请求的功能。在现代的开发中，使用 Axios 可以更高效地处理 HTTP 请求，并提供更好的开发体验。