当前位置: 首页 > news >正文

34、web前端开发之JavaScript(三)

十. 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中,所有内容都被表示为节点。常见的节点类型包括:

  1. 元素节点

    • 对应HTML标签,如<div><p>等。

    • 例如:

      const div = document.querySelector('div'); // 获取一个<div>元素节点  
      
  2. 文本节点

    • 元素中的文本内容。

    • 例如:

      <p>这是一个段落。</p>  
      

      上述段落的文本节点是“这是一个段落。”。

  3. 属性节点

    • 元素的属性,如idclasshref等。

    • 例如:

      <a href="https://www.example.com">链接</a>  
      

      href是元素的属性节点。

  4. 注释节点

    • HTML注释内容。

    • 例如:

      <!-- 这是一个注释 -->  
      
  5. 文档节点

    • 整个文档的根节点。

    • 例如:

      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>  
示例功能:
  1. 点击“添加新框”按钮时,会动态创建一个新的<div>元素,并添加到页面中。
  2. 新增的<div>元素会显示其序号(例如:“这是第1个新增的框”)。
  3. 点击每个<div>框时,会切换其“active”类名,改变背景颜色。
  4. 标题会动态更新,显示当前页面中新增的框的数量。

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 事件的三个阶段

事件在传播过程中会经历三个阶段:

  1. 捕获阶段(Capturing Phase):事件从document开始,向目标元素的祖先节点传播。
  2. 目标阶段(Target Phase):事件到达目标元素。
  3. 冒泡阶段(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 事件流的三个阶段
  1. 捕获阶段(Capturing Phase)
    • 事件从document开始,向目标元素的祖先节点传播。
  2. 目标阶段(Target Phase)
    • 事件到达目标元素。
  3. 冒泡阶段(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代表一个未来才会知道结果的值。它有三种状态:

  1. Pending(等待):初始状态,既没有成功也没有失败。
  2. Fulfilled(已完成):操作成功,resolve函数被调用。
  3. 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应用的响应速度和用户体验。

http://www.dtcms.com/a/108880.html

相关文章:

  • 将图表和表格导出为PDF的功能
  • ThreadLocalMap的作用和特点
  • cobbler自动最小化安装centos,并配置地址
  • springboot+easyexcel实现下载excels模板下拉选择
  • Spring Boot 的配置文件
  • 网络空间安全(50)JavaScript基础语法
  • C#:重构(refactoring)
  • 【Spring Cloud Alibaba】:Nacos 使用全详解
  • CExercise04_1位运算符_1 用位运算符判断某个整数是否为奇数
  • 购物车(V2装饰器)
  • 算法:优选(1)
  • RK3568驱动 SPI主/从 配置
  • 基于微信小程序的医院挂号预约系统设计与实现
  • Apache Doris 2025 Roadmap:构建 GenAI 时代实时高效统一的数据底座
  • WRF-Chem 中出现real.exe错误(psfc 计算问题)- MOZART
  • Apache BookKeeper Ledger 的底层存储机制解析
  • 配置单区域OSPF
  • ARM—LED,看门狗关闭,按钮,时钟,PWM定时器,蜂鸣器
  • 【前端扫盲】postman介绍及使用
  • 走向多模态AI之路(三):多模态 AI 的挑战与未来
  • 【家政平台开发(12)】家政平台数据库设计:从MySQL到MyBatis-Plus实战
  • 多个参考文献插入、如何同时插入多个参考文献:如[1,2]、[1-3]格式
  • 搬砖--贪心+排序的背包
  • 请谈谈分治算法,如何应用分治算法解决大规模问题?
  • Pico4 Pro VR 和HTC Vivi 哪个好些
  • ngx_getpid() ngx_parent = ngx_getppid()
  • [C语言笔记]09、指针
  • 代码随想录Day31
  • 作用域与上下文:JavaScript魔法森林探秘
  • Python每日一题(14)