JavaScript 异步编程

JavaScript 是一种单线程语言,这意味着只有一个线程可以在同一时间执行 JavaScript 代码。在 JavaScript 中,异步编程是一种编写不阻塞代码的方式,它可以在不影响页面响应的情况下执行长时间运行的操作。

JavaScript 中有几种常用的异步编程模型,如回调函数、Promise 和 async/await。

回调函数是最常用的异步编程模型,它允许在某个操作完成时调用一个函数。

Promise 是 ECMAScript 6 中引入的异步编程模型,它允许在将来的某个时间执行某个操作。

async/await 是 ECMAScript 2017 中引入的异步编程模型,它允许在同步代码中使用异步操作。

选择使用哪种异步编程模型取决于具体的场景和需求。回调函数是最简单和最基础的异步编程模型,适用于简单的异步操作。Promise 和 async/await 提供了更多的控制和灵活性,适用于复杂的异步操作。

举个例子,在浏览器中请求一个网络资源,可以使用回调函数来实现:

// 回调函数
function fetchData(callback) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.send();
}
fetchData(function(data) {
console.log(data);
});

使用Promise:

// Promise
function fetchData() {
return new Promise(function (resolve, reject) {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText);
} else if (xhr.readyState === 4) {
reject(xhr.status);
}
};
xhr.send();
});
}
fetchData()
.then(function (data) {
console.log(data);
})
.catch(function (error) {
console.log(error);
});
使用async/await:
// async/await
async function fetchData() {
try {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
return xhr.responseText;
} else if (xhr.readyState === 4) {
throw xhr.status;
}
};
xhr.send();
} catch (error) {
console.log(error);
}
}
let data = await fetchData();
console.log(data);
从上面的例子可以看出,使用Promise和async/await可以使代码更加简洁,并且更易于维护和阅读。
需要注意的是,使用async/await需要在一个async函数中,并且需要使用await来等待异步操作的完成。
 
此外,还有其他的一些异步编程方式,比如使用 setTimeout, setInterval,requestAnimationFrame 等函数来实现异步编程。
例如,使用setTimeout可以实现延迟执行某个操作:
setTimeout(() => {
console.log('Hello World!');
}, 2000);

使用setInterval可以实现重复执行某个操作:

setInterval(() => {
console.log('Hello World!');
}, 2000);

使用requestAnimationFrame可以实现在浏览器重绘时执行某个操作:

function animate() {
console.log('Hello World!');
requestAnimationFrame(animate);
}
animate();

使用setTimeout, setInterval,requestAnimationFrame 这些方法时需要注意,如果不取消定时器,它们会一直运行下去,可能会导致性能问题。

 

JavaScript 中有多种异步编程模型可供选择,可以根据项目的需求来选择最合适的方式来实现。

posted @   飞仔FeiZai  阅读(51)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示