前端基础面试题

摘要：最近，看了下慕课2周刷完n道面试题，记录下...

1.请说明Ajax、Fetch、Axios三者的区别

三者都用于网络请求，但维度不同：

Ajax（Asynchronous Javascript ang XML），是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术。
Fetch，浏览器原生API，用于网络请求，和XMLHttpRequest一个级别；Fetch语法更简介易用，且支持Promise。
Axios最常用的网络请求lib库（随着Vue火爆起来），内部可用XMLHttpRequest和Fetch来实现，官网：

Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jshttps://www.axios-http.cn/ 使用原生的 XMLHttpRequest 对象实现 Ajax 请求，需要编写大量的冗余代码，而且不能支持 Promise 和 async/await 等现代 JavaScript 特性。Fetch 提供了一组丰富的 API，可以配置请求头、请求体、响应类型等参数，也可以取消请求、处理跨域请求等复杂场景。但是，Fetch 也存在一些限制，例如无法中止请求、不支持进度监视等。

使用XmlHttpRequest实现Ajax

//1. 创建XMLHttpRequest对象 
var xmlhttp; // 用于保存创建好的对象 
/** 
* XMLHttpRequest是Ajax的核心 
* 它是一个构造函数，可以通过new关键字来调用 
* Ajax使用该对象发起请求、接收响应 
* 语法：var 变量名 = new XMLHttpRequest(); 
* XMLHttpRequest并不是W3C的标准，不同浏览器的创建方式不同 
* 例如：Chrome、Firefox、IE7+、Opera、Safari等浏览器使用的是XMLHttpRequest 
* 注意：IE5和IE6不支持该对象，它们使用ActiveXObject 
*/ 
// 判断浏览器是否支持该对象 
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } 
else { // IE5和IE6使用的是ActiveXObjectxmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} /** 
* 先创建请求，open()方法，指定请求类型和URL 
* 语法：xmlhttp.open("请求类型","请求的URL",是否异步) * 参数：请求类型，表示请求的类型，例如GET、POST等 
* 请求的URL，表示请求的地址，可以是相对地址，也可以是绝对地址 
* 是否异步，表示是否采用异步方式，如果为true，表示异步，如果为false，表示同步 
* 例如：xmlhttp.open("GET","/content",true); 
* 注意：该方法并不会真正发送请求，而只是启动一个请求以备发送 
* 然后调用send()方法，发送请求 
*/ 
// 2. 配置请求信息
xmlhttp.open("GET", "/content");
// 3. 发送Ajaxxmlhttp.send(); 
// 4. 处理服务器响应 
/** 
* XMLHttpRequest.onreadystatechange()是一个事件处理函数，当XMLHttpRequest对象的 
* readyState属性值发生变化时，该函数将被触发。* 以下是readyState属性的值说明： 
* 0：表示XMLHttpRequest对象正在初始化，尚未发送请求。 
* 1：表示请求已经发送，但尚未收到响应。 
* 2：表示请求已经发送，并且服务器已经处理请求，正在等待服务器响应。 
* 3：表示请求已经发送，并且服务器已经处理请求，并且响应已经就绪，但尚未读取。 
* 4：表示请求已经发送，并且服务器已经处理请求，并且响应已经就绪，并且响应的内容已经读取完毕。 */ 
xmlhttp.onreadystatechange = function () { 
// 响应已被接受且服务器处理成功时才执行（响应状态码200） 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 获取响应体的文本 var t = xmlhttp.responseText; console.log(t);             document.getElementById("divContent").innerHTML = document.getElementById("divContent").innerHTML + "
" + t; } 
}

使用Fetch实现Ajax

// 创建一个函数来发送 Fetch 请求
function fetchData(url) {fetch(url).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json(); // 解析 JSON 数据}).then(data => {console.log(data); // 输出获取到的数据}).catch(error => {console.error('There was a problem with your fetch operation:', error);});
}// 调用函数发送 Fetch 请求
fetchData('https://jsonplaceholder.typicode.com/posts/1');

2. 节流和防抖

防抖是指在连续触发事件后，等待一定时间间隔（例如 200ms）后再执行函数。如果在等待时间间隔内再次触发了事件，则重新计时，直到等待时间间隔内没有再次触发事件，才最终执行函数。这样可以确保函数在连续触发事件后等待一段时间再执行，避免频繁触发导致函数多次执行。如下图

防抖函数实现

function debounce(func, delay=200) {let timerId = 0return function (...args) {if (timerId) clearTimeout(timerId)timerId = setTimeout(() => {func.apply(this, args);   //透传this和参数timerId = 0}, delay);};
}

节流是指在一定时间间隔内最多执行一次函数。当事件触发时，如果距离上次执行函数的时间小于指定的时间间隔，则不会执行该函数；如果距离上次执行函数的时间大于等于指定的时间间隔，则会执行该函数。这样可以确保函数在一定时间间隔内最多只被执行一次。

节流函数实现

function throttle(func, delay) {let timerId = 0return function (...args) {if (timerId) returntimerId = setTimeout(() => {func.apply(this, args);   //透传this和参数timerId = 0}, delay);};
}

总结起来，节流是限制执行频率，有节奏的执行；防抖是限制执行次数，多次密集的触发值执行一次，节流关注过程，防抖关注结果。节流的使用场景包括：元素拖拽、滚动事件、窗口调整大小、按钮点击、搜索框输入等；防抖的使用场景包括：输入框输入、表单验证、文本编辑器、窗口缩放等。

实际工作中通常使用lodash中的节流和防抖函数。