前端问答

1、什么是ajax，什么是axios？

AJAX

全称为“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

AJAX通常涉及以下几个关键组件和技术：
1)XMLHttpRequest对象：这是 AJAX 的基础，允许JavaScript向服务器发送异步HTTP请求，并处理响应。

2)JavaScript/DOM：用于处理用户交互、更新局部页面内容以及处理从服务器返回的数据。

3)CSS：用于定义和修改元素的样式，提升用户体验。

4)HTML：构成网页的基本结构，AJAX用来局部更新的部分。

5)JSON或XML：作为数据交换的格式，JSON更为常用。

通过AJAX，开发者能够创建响应更快、感觉更流畅的Web应用程序，比如实时搜索建议、无限滚动列表、动态内容加载等。

---

 Axios

是一个基于 Promise 的 HTTP 库，用于在浏览器和 Node.js 环境中发起网络请求。它提供了一系列方便的方法来执行常见的 HTTP 操作，如 GET、POST、PUT、DELETE 等，使得前后端的通信变得更加简单和高效。由于其易用性、灵活性和全面的功能集，Axios 成为了许多现代 Web 开发项目中的首选 HTTP 请求库，尤其是在 Vue.js 和 React 等前端框架的项目中被广泛推荐使用。

Axios 的主要特点包括：
1）跨平台使用：Axios 设计为能够在浏览器环境和 Node.js 环境下无缝工作，这得益于它的 isomorphic（同构）设计。

2）基于 Promise：利用 Promise API，Axios 允许你以链式调用的方式来组织异步操作，这简化了异步代码的编写，使得错误处理更加统一和简洁。

3）拦截器：Axios 允许你在请求被发送前或响应被接收前进行拦截，这对于添加通用的 headers、处理错误或统一数据格式非常有用。

4）转换请求与响应数据：可以自定义数据转换器，自动将请求数据转换为适合发送的格式，或将响应数据转换为你需要的格式，如自动解析 JSON。

5）取消请求：Axios 提供了取消令牌机制，可以在请求发出后取消它，这对于管理并发请求和提升用户体验很有帮助。

6）自动转换JSON：Axios 能够自动处理 JSON 数据的序列化和反序列化，使得与 RESTful API 的交互更加直接。

7）XSRF防护：提供了配置选项来自动添加防止跨站请求伪造(XSRF)的 tokens，增加了应用的安全性。

---

2、前台项目如何整合axios？

对于 React 项目

1）安装 Axios：首先，你需要在你的 React 项目中安装 Axios。打开终端，进入项目目录，然后运行以下命令：

pnpm install axios

2）引入 Axios：在你需要发起网络请求的组件文件中，通过 import 语句引入 Axios。

import axios from 'axios';

3)发起请求：在组件的生命周期方法、事件处理器或自定义函数中，使用 Axios 发起 GET、POST 等类型的请求。

componentDidMount() {
  axios.get('https://api.example.com/data')
    .then(response => {
      console.log(response.data);
      // 处理响应数据
    })
    .catch(error => {
      console.error('Error fetching data:', error);
      // 处理错误
    });
}

4)配置 Axios 实例（可选）：为了方便管理和复用配置（如基础 URL、超时时间、headers 等），你可以创建一个 Axios 实例。

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 使用实例发起请求
api.get('/data').then(response => {/*...*/});

---

对于 Vue 项目

1)安装 Axios：同样地，首先确保 Axios 安装在你的 Vue 项目中。

pnpm install axios

2)全局注册 Axios（可选）：为了让所有 Vue 组件都能访问 Axios，你可以在 main.js 文件中将其作为 Vue 的原型属性进行全局注册。这样，在任何 Vue 组件中，你都可以通过 this.$http 来访问 Axios。

import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$http = axios;

3)在组件中使用：

export default {
  mounted() {
    this.$http.get('https://api.example.com/data')
      .then(response => {
        console.log(response.data);
        // 处理响应数据
      })
      .catch(error => {
        console.error('Error fetching data:', error);
        // 处理错误
      });
  }
};

4)配置 Axios 实例（同上）：创建并配置一个 Axios 实例，然后在 Vue 中使用这个实例进行请求。

---

3、生成主键策略有哪些？什么是uuid？什么是雪花算法 Snowflake？

 1)自动递增（Auto-Increment/Auto-Incr/Identity）这是最常见的策略，特别是在MySQL、SQL Server等数据库中。数据库自动为每条新插入的记录生成一个唯一的整数，通常从1开始递增。

 2)序列（Sequence）在Oracle、PostgreSQL等数据库中，可以使用序列（Sequence）对象来生成唯一数值。序列独立于表存在，可以在插入记录前获取下一个值并赋给主键字段。

 3)UUID/GUIDUUID（Universally Unique Identifier）或GUID（Globally Unique Identifier）是一种128位的数字，几乎可以确保全球唯一性。它可以是随机生成的，UUID的生成不保证顺序性，这在某些情况下可能是缺点，但在分布式系统中有利于分散写压力，也可以基于时间和其他因素生成，适用于分布式系统，不需要依赖数据库的特定功能，适用于需要高度唯一性的场景，如分布式数据库的记录标识、文件唯一标识等。

 4)哈希函数将多个字段的组合通过哈希函数转换为一个固定长度的值作为主键。这种方式可以确保一定的唯一性，但需要谨慎选择哈希函数并考虑冲突处理。

 5)时间戳+随机数/计数器结合当前时间戳与一个随机数或递增计数器生成主键。这种方法简单且能保证在高并发下的唯一性，但可能不如UUID全局唯一。

 6)雪花算法（Snowflake）雪花算法是由Twitter开源的一种分布式ID生成算法，雪花算法在保持全局唯一的同时，还提供了趋势递增的特性，更适合那些需要高效且有序ID生成的场景。比如特别适合需要高吞吐量生成ID的分布式系统，如大型网站、微服务架构中的订单ID、消息ID生成等。它结合了时间戳、数据中心ID、机器ID和序列号，特别适合分布式系统中的主键生成。主要由以下几个部分组成：
1位符号位（始终为0，表示正数）
41位时间戳（毫秒级，起始时间通常是某个固定的日期，比如2014年）
10位数据中心ID
10位机器ID
12位序列号

 7)数据库特定方法如MongoDB的ObjectId，它结合了时间戳、机器标识符和进程ID及自增计数器，天生具备唯一性和一定程度的时间有序性。

---

4、vue的ref和reactive的区别？

Vue.js框架中，ref 和 reactive 是用于处理响应式数据的两个不同方法，它们各自有不同的用途和适用场景。下面是两者的主要区别：

ref

1. 基本用途：ref 主要用于包裹基本类型值（如字符串、数字、布尔值等），使其成为响应式的。当基础类型的值被ref包裹后，它会返回一个对象，该对象具有.value属性来访问和修改底层的值。这对于需要在模板中直接绑定简单值或者在Composition API中处理简单数据非常有用。

2. 访问方式：使用时，你需要通过.value来读取或设置值，例如 myRef.value = newValue。

3. 应用场景：适用于简单的数据属性，或者是需要在模板中直接使用的单个值，比如表单输入的双向绑定。

   ---

reactive

1. 基本用途：reactive 则用于使一个对象的所有属性变为响应式的。当你有一个包含多个属性的对象时，使用reactive可以让对象的所有层级都变得可响应，无需通过.value访问。这意味着对于对象的任何属性更改都会自动触发视图更新。

2. 访问方式：直接通过属性名访问和修改，如 reactiveObj.property = newValue。

3. 应用场景：适合复杂的数据结构，如包含多个子属性的对象，它允许你在组件内部直接操作这些属性，而不需要额外的.value访问层。

   ---

总结

• 数据类型：ref 更适用于基本数据类型，而 reactive 适合对象或数组这样的复杂数据结构。
• 访问便捷性：reactive 提供更直接的属性访问方式，而 ref 需要通过 .value 访问。
• 选择依据：根据数据的复杂度和使用场景来决定。如果你需要跟踪单一变量的变化，使用 ref；如果你需要整个对象或数组及其内部属性都是响应式的，则选择 reactive。