十. DOM操作详解
1、DOM简介
文档对象模型（DOM，Document Object Model）是JavaScript与网页内容交互的接口。它将HTML文档表示为一种树状结构（DOM树），其中每个节点代表文档的一部分（例如元素、文本、注释等）。通过DOM，JavaScript可以动态地访问和操作网页的内容、样式和结构。
DOM的作用：
- 动态修改网页内容（文本、图片等）。
- 更改元素的样式（颜色、布局等）。
- 添加或删除页面元素。
- 响应用户事件（点击、悬停、输入等）。
DOM结构示例：
<html>
<head> <title>DOM示例</title>
</head>
<body> <h1>标题</h1> <p>这是一个段落。</p>
</body>
</html>
DOM树结构如下：
- html - head - title - body - h1 - p
2、 DOM节点
在DOM中，所有内容都被表示为节点。常见的节点类型包括：
-
元素节点：
-
对应HTML标签，如
<div>、<p>等。 -
例如：
const div = document.querySelector('div'); // 获取一个<div>元素节点
-
-
文本节点：
-
元素中的文本内容。
-
例如：
<p>这是一个段落。</p>上述段落的文本节点是“这是一个段落。”。
-
-
属性节点：
-
元素的属性，如
id、class、href等。 -
例如：
<a href="https://www.example.com">链接</a>href是元素的属性节点。
-
-
注释节点：
-
HTML注释内容。
-
例如：
<!-- 这是一个注释 -->
-
-
文档节点：
-
整个文档的根节点。
-
例如：
const documentNode = document; // 获取文档节点
-
3、 DOM操作方法
DOM提供了多种方法来操作节点和元素。以下是一些常用的操作方法：
1. 选择元素
-
document.getElementById(id)：
通过元素的id属性获取单个元素。<div id="container">内容</div>const container = document.getElementById('container'); -
document.querySelector(selector)：
根据CSS选择器获取第一个匹配的元素。<div class="box">内容</div>const box = document.querySelector('.box'); // 选择class为"box"的元素 -
document.querySelectorAll(selector)：
根据CSS选择器获取所有匹配的元素，返回一个NodeList集合。const boxes = document.querySelectorAll('.box'); boxes.forEach(box => { console.log(box); });
2. 创建和添加元素
-
document.createElement(tagName)：
创建一个新的HTML元素。const newDiv = document.createElement('div'); newDiv.textContent = '这是一个新创建的div元素'; -
element.appendChild(child)：
将一个节点添加到指定元素的末尾。const container = document.getElementById('container'); container.appendChild(newDiv); -
element.insertBefore(newNode, referenceNode)：
在指定的子节点前插入新的节点。const referenceNode = document.getElementById('reference'); container.insertBefore(newDiv, referenceNode);
3. 删除元素
-
element.removeChild(child)：
删除指定元素的子节点。const container = document.getElementById('container'); container.removeChild(container.firstChild); -
element.remove()：
删除元素本身及其所有子节点。const elementToRemove = document.getElementById('remove'); elementToRemove.remove();
4. 修改内容
-
element.textContent：
获取或设置元素的纯文本内容，不包含HTML标签。const paragraph = document.querySelector('p'); paragraph.textContent = '这是新的段落内容'; -
element.innerHTML：
获取或设置元素的HTML内容，包括标签。const container = document.getElementById('container'); container.innerHTML = '<strong>这是<strong>新的<strong>内容</strong></strong>';
5. 修改样式
-
element.style.property：
修改元素的内联样式属性。const box = document.querySelector('.box'); box.style.backgroundColor = 'blue'; box.style.width = '200px'; -
element.classList：
添加、移除或切换类名。const box = document.querySelector('.box'); box.classList.add('active'); // 添加类 box.classList.remove('box'); // 移除类 box.classList.toggle('visible'); // 切换类 -
element.style.cssText：
一次性修改多个样式属性。const box = document.querySelector('.box'); box.style.cssText = 'background-color: blue; width: 200px; height: 100px;';
6. 属性操作
-
element.getAttribute(attributeName)：
获取元素的某个属性值。const link = document.querySelector('a'); const href = link.getAttribute('href'); console.log(href); // 输出链接地址 -
element.setAttribute(attributeName, value)：
设置元素的某个属性值。const link = document.querySelector('a'); link.setAttribute('href', 'https://www.example.com'); -
element.hasAttribute(attributeName)：
检查元素是否具有某个属性。const link = document.querySelector('a'); if (link.hasAttribute('href')) { console.log('该链接具有href属性'); } -
element.removeAttribute(attributeName)：
删除元素的某个属性。const link = document.querySelector('a'); link.removeAttribute('href');
7. 遍历节点
-
element.childNodes：
返回元素的所有子节点（包括元素节点、文本节点和注释节点）。const container = document.getElementById('container'); const childNodes = container.childNodes; childNodes.forEach(node => { console.log(node); }); -
element.children：
返回元素的所有子元素节点（只包括元素节点）。const container = document.getElementById('container'); const children = container.children; children.forEach(child => { console.log(child); }); -
element.firstChild 和 element.lastChild：
获取元素的第一个子节点或最后一个子节点。const container = document.getElementById('container'); const firstChild = container.firstChild; const lastChild = container.lastChild; -
element.nextElementSibling 和 element.previousElementSibling：
获取元素的下一个兄弟元素节点或上一个兄弟元素节点。const element = document.querySelector('div'); const nextSibling = element.nextElementSibling; const previousSibling = element.previousElementSibling; -
element.parentElement：
获取元素的父元素节点。onst element = document.querySelector('div'); const parent = element.parentElement;
4、 DOM事件
1. 添加事件监听器
-
element.addEventListener(eventType, callback)：
添加事件监听器，监听特定事件类型。const button = document.querySelector('button'); button.addEventListener('click', function() { console.log('按钮被点击了！'); }); -
element.on[eventType]：
通过on属性添加事件监听器。const button = document.querySelector('button'); button.onclick = function() { console.log('按钮被点击了！'); };
2. 事件类型
常见的事件类型包括：
- 鼠标事件：
click：鼠标点击。dblclick：鼠标双击。mousedown：鼠标按下。mouseup：鼠标释放。mousemove：鼠标移动。mouseover：鼠标悬停。mouseout：鼠标移出。
- 键盘事件：
keydown：键盘按下。keyup：键盘释放。keypress：键盘按下并释放（已废弃）。
- 表单事件：
submit：表单提交。reset：表单重置。change：表单元素值改变。input：输入字段内容变化。
- 文档和窗口事件：
load：页面加载完成。unload：页面卸载。resize：窗口大小调整。scroll：页面滚动。
3. 事件对象
当事件发生时，事件监听器会接收到一个事件对象（event object），该对象包含事件相关的信息。
- event.type：事件的类型。
- event.target：触发事件的目标元素。
- event.currentTarget：事件的当前目标（考虑事件代理）。
- event.preventDefault()：阻止事件的默认行为。
- event.stopPropagation()：停止事件的冒泡传播。
const link = document.querySelector('a');
link.addEventListener('click', function(event) { event.preventDefault(); // 阻止链接跳转 console.log('点击了链接:', event.target.getAttribute('href'));
});
5、添加和删除元素
1. 创建元素
// 创建一个新的<div>元素
const newDiv = document.createElement('div');
newDiv.textContent = '这是一个新创建的div元素';
newDiv.style.backgroundColor = 'lightblue';
newDiv.style.padding = '10px';
2. 添加元素
// 获取容器元素
const container = document.getElementById('container');
// 将新创建的div元素添加到容器中
container.appendChild(newDiv);
3. 删除元素
// 获取要删除的元素
const elementToRemove = document.getElementById('remove');
// 删除该元素
elementToRemove.remove();
6、样式操作
1. 修改内联样式
const box = document.querySelector('.box');
box.style.width = '300px';
box.style.height = '200px';
box.style.backgroundColor = 'lightblue';
2. 切换类名
const box = document.querySelector('.box');
box.classList.add('active'); // 添加类
box.classList.remove('box'); // 移除类
box.classList.toggle('visible'); // 切换类
3. 动态修改样式表
const styleSheet = document.createElement('style');
styleSheet.textContent = ` .box { background-color: yellow; } .box.active { background-color: green; }
`;
document.head.appendChild(styleSheet);
7、 示例：动态更新网页内容
以下是一个综合示例，展示了如何通过DOM操作动态修改网页内容。
<!DOCTYPE html>
<html>
<head> <title>DOM操作示例</title> <style> .container { width: 80%; margin: 0 auto; padding: 20px; } .box { border: 1px solid #ccc; padding: 10px; margin: 10px 0; } .box.active { background-color: lightblue; } </style>
</head>
<body> <div class="container"> <h1 id="title">DOM操作示例</h1> <button onclick="addNewBox()">添加新框</button> <div id="content"></div> </div> <script> function addNewBox() { // 创建一个新的<div>元素 const newBox = document.createElement('div'); newBox.className = 'box'; newBox.textContent = `这是第${getBoxCount()}个新增的框`; // 获取容器元素 const container = document.getElementById('content'); // 将新元素添加到容器中 container.appendChild(newBox); // 更新标题 const title = document.getElementById('title'); title.textContent = `DOM操作示例（共${getBoxCount()}个框）`; // 为新添加的框添加点击事件 newBox.addEventListener('click', function() { this.classList.toggle('active'); console.log('点击了第', this.textContent, '个框'); }); } function getBoxCount() { const container = document.getElementById('content'); return container.children.length; } </script>
</body>
</html>
示例功能：
- 点击“添加新框”按钮时，会动态创建一个新的
<div>元素，并添加到页面中。 - 新增的
<div>元素会显示其序号（例如：“这是第1个新增的框”）。 - 点击每个
<div>框时，会切换其“active”类名，改变背景颜色。 - 标题会动态更新，显示当前页面中新增的框的数量。
8、总结
DOM操作是JavaScript与网页内容交互的核心。通过DOM，我们可以动态地添加、删除和修改页面元素、样式和内容，同时可以响应用户事件。掌握DOM操作方法（如选择元素、创建节点、修改样式和属性等）是前端开发的基础技能。随着对DOM的深入理解和实践，开发者可以创建更动态、交互性更强的Web页面。
十一、JavaScript事件处理详解
JavaScript的事件处理是前端开发的核心部分之一。事件是用户与网页交互的方式，例如点击按钮、输入文本、滚动页面等。通过事件处理，我们可以响应这些交互，并执行相应的操作。本节将详细讲解JavaScript事件处理的各个方面。
1. 事件的基本概念
1.1 什么是事件？
事件是指用户与网页之间发生的某种互动行为，例如：
- 鼠标事件：点击（
click）、双击（dblclick）、悬停（mouseover）等。 - 键盘事件：按下键（
keydown）、释放键（keyup）等。 - 表单事件：提交表单（
submit）、改变内容（change）等。 - 文档事件：加载完成（
load）、卸载（unload）等。
1.2 事件驱动模型
JavaScript是事件驱动的语言。事件驱动模型的核心思想是：当某个事件发生时，执行特定的代码。
示例：
<button onclick="alert('按钮被点击了！')">点击我</button>
1.3 事件的三个阶段
事件在传播过程中会经历三个阶段：
- 捕获阶段（Capturing Phase）：事件从
document开始，向目标元素的祖先节点传播。 - 目标阶段（Target Phase）：事件到达目标元素。
- 冒泡阶段（Bubbling Phase）：事件从目标元素向上传播，回到
document。
2. 事件处理方法
2.1 内联事件处理
通过HTML标签的on-属性直接定义事件处理函数。
示例：
<button onclick="alert('按钮被点击了！')">点击我</button>
缺点：
- 嵌入HTML中，代码不易维护。
- 只能绑定一个事件处理函数。
2.2 传统事件绑定方法
通过JavaScript方法绑定事件处理函数。
语法：
element.addEventListener(eventType, callback[, useCapture])
eventType：事件类型（如'click'）。callback：事件处理函数。useCapture：布尔值，表示是否在捕获阶段触发事件（默认为false，即冒泡阶段）。
示例：
const button = document.querySelector('button');
button.addEventListener('click', function() { console.log('按钮被点击了！');
});
2.3 事件处理的不同写法
-
DOM Level 0（传统方式）：
button.onclick = function() { console.log('按钮被点击了！'); }; -
DOM Level 2（推荐方式）：
button.addEventListener('click', function() { console.log('按钮被点击了！'); }, false); -
箭头函数：
button.addEventListener('click', () => { console.log('按钮被点击了！'); });
3. 常见的事件类型
3.1 鼠标事件
| 事件类型 | 描述 | 示例 |
|---|---|---|
click | 鼠标点击元素 | <button onclick="alert('点击了！')"> |
dblclick | 鼠标双击元素 | |
mousedown | 鼠标按下 | |
mouseup | 鼠标释放 | |
mousemove | 鼠标移动 | |
mouseover | 鼠标悬停在元素上 | |
mouseout | 鼠标离开元素 |
3.2 键盘事件
| 事件类型 | 描述 | 示例 |
|---|---|---|
keydown | 键盘按下 | |
keyup | 键盘释放 | |
keypress | 键盘按下并释放（已废弃） |
3.3 表单事件
| 事件类型 | 描述 | 示例 |
|---|---|---|
submit | 表单提交 | <form onsubmit="alert('表单提交！')"> |
reset | 表单重置 | |
change | 表单元素值改变 | |
input | 输入字段内容变化 |
3.4 文档和窗口事件
| 事件类型 | 描述 | 示例 |
|---|---|---|
load | 页面加载完成 | <body onload="alert('页面加载完成！')"> |
unload | 页面卸载 | |
resize | 窗口大小调整 | |
scroll | 页面滚动 |
3.5 其他事件
| 事件类型 | 描述 | 示例 |
|---|---|---|
focus | 元素获取焦点 | |
blur | 元素失去焦点 | |
contextmenu | 右键点击 |
4. 事件对象
当事件发生时，事件处理函数会接收到一个event对象，该对象包含了事件相关的信息。
4.1 常见的事件对象属性和方法
| 属性/方法 | 描述 | 示例用法 |
|---|---|---|
type | 事件类型 | console.log(event.type); |
target | 事件的目标元素 | console.log(event.target); |
currentTarget | 事件的当前目标元素 | console.log(event.currentTarget); |
preventDefault() | 阻止事件的默认行为 | event.preventDefault(); |
stopPropagation() | 停止事件的进一步传播 | event.stopPropagation(); |
stopImmediatePropagation() | 立即停止事件的传播 | event.stopImmediatePropagation(); |
示例：
document.querySelector('a').addEventListener('click', function(event) { event.preventDefault(); // 阻止链接跳转 console.log('点击了链接:', event.target.getAttribute('href'));
});
5. 事件流（Event Propagation）
5.1 事件流的三个阶段
- 捕获阶段（Capturing Phase）：
- 事件从
document开始，向目标元素的祖先节点传播。
- 事件从
- 目标阶段（Target Phase）：
- 事件到达目标元素。
- 冒泡阶段（Bubbling Phase）：
- 事件从目标元素向上传播，回到
document。
- 事件从目标元素向上传播，回到
5.2 控制事件传播
event.stopPropagation()：防止事件在DOM树中继续传播。event.stopImmediatePropagation()：立即停止事件的传播，并阻止其他事件处理函数执行。
示例：
<div id="container"> <button>点击我</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.querySelector('button'); button.addEventListener('click', function(event) { console.log('按钮的click事件触发'); event.stopPropagation(); // 防止事件冒泡到container
}); container.addEventListener('click', function(event) { console.log('container的click事件触发');
});
</script>
6. 事件委托（Event Delegation）
6.1 什么是事件委托？
事件委托是一种通过将事件监听器绑定到父元素，而不是每个子元素来提高效率的技术。其核心思想是利用事件冒泡的特性。
6.2 事件委托的好处
- 减少事件监听器的数量：只绑定一次事件监听器，即可处理多个子元素的事件。
- 提升性能：减少内存的占用，尤其是在处理大量动态元素时。
- 方便管理：便于动态添加或删除子元素， 无需频繁添加或移除事件监听器。
6.3 示例：通过事件委托实现动态添加的子元素也能响应事件
<ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list'); list.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { console.log('点击了列表项:', event.target.textContent); // 可以执行其他操作，例如删除该列表项 event.target.remove(); }
}); // 动态添加新列表项
const newItem = document.createElement('li');
newItem.textContent = 'Item 4';
list.appendChild(newItem);
</script>
7. 自定义事件（Custom Events）
7.1 什么是自定义事件？
自定义事件是开发者创建的、不属于原生事件的事件类型。通过自定义事件，可以实现更复杂的应用逻辑。
7.2 创建和触发自定义事件
- new CustomEvent(type[, options])：
type：事件类型（字符串）。options：可选参数，包括detail属性，可以附带自定义数据。
- dispatchEvent(event)：
- 触发自定义事件。
示例：
// 创建自定义事件
const customEvent = new CustomEvent('userLogin', { detail: { username: 'Alice', loginTime: new Date() }
}); // 绑定事件监听器
document.addEventListener('userLogin', function(event) { console.log('用户登录事件触发:', event.detail);
}); // 触发自定义事件
document.dispatchEvent(customEvent);
8. 跨浏览器兼容性问题
8.1 事件绑定方法
- IE8及以下版本：使用
attachEvent()方法。 - 现代浏览器：使用
addEventListener()方法。
示例：
function addEvent(element, eventType, callback) { if (element.addEventListener) { element.addEventListener(eventType, callback, false); } else { element.attachEvent('on' + eventType, callback); }
}
8.2 事件对象的差异
- 现代浏览器：事件目标是
event.target。 - IE8及以下版本：事件目标是
event.srcElement。
示例：
function getEventTarget(event) { return event.target || event.srcElement;
}
9. 实际应用场景
9.1 表单验证
const form = document.getElementById('myForm');
const usernameInput = document.getElementById('username'); usernameInput.addEventListener('input', function(event) { const value = this.value; if (value.length < 6) { console.log('用户名长度必须至少为6个字符！'); this.style.backgroundColor = 'pink'; } else { this.style.backgroundColor = 'white'; }
}); form.addEventListener('submit', function(event) { event.preventDefault(); const username = usernameInput.value.trim(); if (username === '') { alert('请输入用户名！'); return; } // 提交表单 console.log('表单提交:', username);
});
9.2 无限加载（Infinite Scroll）
const container = document.getElementById('container');
const threshold = 100; // 距离底部的阈值（像素） window.addEventListener('scroll', function(event) { const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const windowHeight = document.documentElement.clientHeight || document.body.clientHeight; const contentHeight = container.offsetHeight; if (contentHeight - (scrollTop + windowHeight) < threshold) { // 加载更多内容 console.log('加载更多内容...'); // Simulate loading data setTimeout(function() { const newItem = document.createElement('div'); newItem.textContent = `加载项${Math.random()}`; container.appendChild(newItem); }, 1000); }
});
10. 总结
JavaScript事件处理是实现交互式Web页面的核心技术。通过事件处理，我们可以响应用户的行为，动态更新页面内容，并实现复杂的交互逻辑。掌握事件的基础知识（如事件类型、事件对象、事件流、事件委托等）是前端开发的基础技能。在实际开发中，结合事件处理和DOM操作，可以创建出更动态、更用户友好的Web应用程序。
十二. 异步编程与Promise详解
JavaScript中的异步编程是处理I/O操作（如网络请求、定时器等）的一种方式，避免了阻塞主线程，提升用户体验。本节将详细介绍回调函数、Promise、async/await以及AJAX与Fetch API的使用。
1、回调函数（Callback Functions）
回调函数是一种将函数作为参数传递给另一个函数，并在某些操作完成后由另一个函数调用（“回调”）的技术。它是JavaScript中最早用于处理异步操作的方式。
1.1 回调函数的基本用法
setTimeout(function() { console.log('3秒后执行');
}, 3000);
setTimeout是接受一个回调函数和时间参数的函数。- 当设定的时间过去后，JavaScript引擎会执行回调函数。
1.2 回调函数的缺点
-
嵌套地狱：多个异步操作需要嵌套使用多个回调函数，导致代码难以阅读和维护。
setTimeout(function() { console.log('3秒后执行'); setTimeout(function() { console.log('再3秒后执行'); setTimeout(function() { console.log('再再3秒后执行'); }, 3000); }, 3000); }, 3000); -
错误处理困难：在嵌套多层回调时，处理错误和异常变得复杂，容易导致memory leak或其他问题。
2、 Promise
Promise是ES6引入的用于处理异步操作的新方式。它通过封装异步操作的结果，使得代码更易于编写和维护。
2.1 Promise的基本概念
Promise代表一个未来才会知道结果的值。它有三种状态：
- Pending（等待）：初始状态，既没有成功也没有失败。
- Fulfilled（已完成）：操作成功，
resolve函数被调用。 - Rejected（已失败）：操作失败，
reject函数被调用。
2.2 创建和使用Promise
创建Promise：
const promise = new Promise(function(resolve, reject) { // 异步操作 if (/* 判断是否成功 */ ) { resolve(/* 成功的结果 */); } else { reject(/* 失败的原因 */); }
});
使用Promise：
promise.then(function(result) { console.log('成功处理:', result);
}).catch(function(error) { console.error('处理失败:', error);
});
2.3 Promise的链式操作
Promise允许使用.then()和.catch()进行链式调用，简化异步流程的处理。
fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log('获取的数据:', data)) .catch(error => console.error('获取数据失败:', error));
2.4 Promise.all() 和 Promise.race()
-
Promise.all(iterable)：
等待所有Promise都完成，返回一个新的Promise。const promises = [ new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')), new Promise(resolve => setTimeout(resolve, 3000, '任务2完成')) ]; Promise.all(promises).then(results => { console.log('所有任务完成:', results); }); -
Promise.race(iterable)：
等待第一个完成的Promise，返回其结果。const promises = [ new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')), new Promise(resolve => setTimeout(resolve, 3000, '任务2完成')) ]; Promise.race(promises).then(result => { console.log('第一个完成的任务:', result); });
3、 Async/await
async/await是ES2017引入的语法糖，用于简化Promise的使用。它通过将异步代码写法转换为类似同步代码的方式，提升代码的可读性。
3.1 async函数的基本用法
async function DelayedLog() { try { const result = await new Promise(resolve => setTimeout(resolve, 2000, '完成')); console.log(result); } catch (error) { console.error('发生错误:', error); }
}
DelayedLog();
- async关键字：用于声明一个异步函数。
- await关键字：用于等待Promise的完成，并暂停函数的执行，直到Promise返回结果。
- try…catch块：用于处理异步操作中的错误。
3.2 在Promise链中使用async/await
async function processData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log('处理的数据:', data); } catch (error) { console.error('处理数据失败:', error); }
}
processData();
3.3 处理多个异步操作
-
顺序执行：
async function sequentialTasks() { const task1 = await new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')); const task2 = await new Promise(resolve => setTimeout(resolve, 3000, '任务2完成')); console.log('所有任务完成:', [task1, task2]); } sequentialTasks(); -
并行执行：
async function parallelTasks() { const promises = [ new Promise(resolve => setTimeout(resolve, 2000, '任务1完成')), new Promise(resolve => setTimeout(resolve, 3000, '任务2完成')) ]; const results = await Promise.all(promises); console.log('所有任务完成:', results); } parallelTasks();
4、 AJAX与Fetch API
AJAX（Asynchronous JavaScript and XML）是一种在网页加载后，向服务器请求数据并更新网页内容的技术。Fetch API是现代浏览器中用于发送HTTP请求的标准API。
4.1 Fetch API的基本用法
fetch('https://api.example.com/data') .then(response => { console.log('响应对象:', response); return response.json(); // 解析响应为JSON格式 }) .then(data => { console.log('获取的数据:', data); }) .catch(error => { console.error('获取数据失败:', error); });
4.2 使用async/await调用Fetch API
async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('HTTP错误，状态码：' + response.status); } const data = await response.json(); console.log('获取的数据:', data); } catch (error) { console.error('获取数据失败:', error); }
}
fetchData();
4.3 发送POST请求
async function sendData(data) { try { const response = await fetch('https://api.example.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data) }); const result = await response.json(); console.log('提交数据结果:', result); } catch (error) { console.error('提交数据失败:', error); }
}
sendData({ name: 'Alice', age: 30 });
5、 总结
JavaScript中的异步编程通过回调函数、Promise、async/await以及Fetch API等技术，实现了高效的非阻塞I/O操作处理。Promise和async/await进一步简化了异步代码的编写，提升了代码的可读性和维护性。在实际应用中，掌握这些技术可以帮助开发者更高效地处理复杂的异步逻辑，提升Web应用的响应速度和用户体验。
