公告烟雨平生笔记 —— 内容持续更新,欢迎指正。

JavaScript 异步编程的常见模式

2026-10-17 代码实践 0 阅读

JavaScript 异步编程的常见模式

JavaScript 作为一种广泛应用于前端开发的脚本语言,其异步编程模式是其核心特性之一。异步编程允许JavaScript在等待某些操作完成时继续执行其他任务,从而提高程序的响应性和效率。以下是一些JavaScript异步编程的常见模式:

1. 回调函数(Callbacks)

回调函数是最基础的异步编程模式。它允许我们在某个异步操作完成时执行一个函数。

“`javascript

function fetchData(callback) {

// 模拟异步操作

setTimeout(() => {

const data = ‘异步获取的数据’;

callback(data);

}, 1000);

}

function handleData(data) {

console.log(data);

}

fetchData(handleData);

“`

2. Promise 对象

Promise 对象是ES6引入的一个新的异步编程模式,它提供了一种更强大、更灵活的异步处理方式。

“`javascript

function fetchData() {

return new Promise((resolve, reject) => {

// 模拟异步操作

setTimeout(() => {

const data = ‘异步获取的数据’;

resolve(data);

}, 1000);

});

}

fetchData()

.then(data => {

console.log(data);

})

.catch(error => {

console.error(error);

});

“`

3. 异步函数(Async/Await)

ES2017 引入了异步函数,这是一种更简洁、更易读的异步编程方式。

“`javascript

async function fetchData() {

try {

const data = await fetchData();

console.log(data);

} catch (error) {

console.error(error);

}

}

fetchData();

“`

4. 事件监听

JavaScript 中的事件监听机制也是一种常见的异步编程模式,常用于处理用户交互。

“`javascript

document.addEventListener(‘click’, function() {

console.log(‘点击事件触发’);

});

“`

5. 定时器

定时器(如 `setTimeout` 和 `setInterval`)是JavaScript中最简单的异步编程方式之一。

“`javascript

setTimeout(() => {

console.log(‘定时器触发’);

}, 1000);

“`

6. Promise.all

Promise.all 允许我们同时处理多个异步操作,并在所有操作都完成时执行回调。

“`javascript

function fetchData1() {

return new Promise((resolve) => {

setTimeout(() => {

resolve(‘数据1’);

}, 1000);

});

}

function fetchData2() {

return new Promise((resolve) => {

setTimeout(() => {

resolve(‘数据2’);

}, 1000);

});

}

Promise.all([fetchData1(), fetchData2()])

.then(values => {

console.log(values); // [‘数据1’, ‘数据2’]

});

“`

以上是JavaScript异步编程的常见模式,这些模式可以帮助开发者更高效地处理异步操作,提高程序的执行效率。

“`

推荐阅读

RELATED