“从回调函数到 Async/Await：JavaScript 异步编程进阶指南“

最新推荐文章于 2023-06-25 21:54:31 发布

桃宝护卫队

最新推荐文章于 2023-06-25 21:54:31 发布

阅读量239

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_36463299/article/details/130043273

版权

本文介绍了JavaScript异步编程的概念，包括回调函数、Promise、Async/Await、事件监听器、观察者模式和发布/订阅模式。通过实例详细解释了各种异步编程方式的用法，帮助开发者深入理解并掌握JavaScript异步编程。

摘要由CSDN通过智能技术生成

什么是异步编程

假设你要洗一堆衣服，每件衣服需要10分钟，总共需要洗10件衣服，如果你采用同步编程，你需要一件一件的洗衣服，那么你需要连续洗衣服100分钟。但是如果你采用异步编程，你可以同时把衣服放在洗衣机里，然后去做别的事情，等到洗衣机完成了任务，它会通知你。这样你就可以节约时间，不必一直等待。在异步编程中，你可以把某个任务交给异步函数，然后去做别的事情，当异步函数完成任务后，它会返回一个结果或者触发一个回调函数，这样你就可以继续处理异步函数的结果了。

javascript异步编程分类

在 JavaScript 中，异步编程可以分为以下几类：

回调函数（Callback）：在异步任务完成后，将回调函数作为参数传递给异步函数，异步函数完成任务后执行回调函数。
Promise：Promise 是一种异步编程的解决方案，它是对回调函数的一种封装，通过 Promise 可以更好地处理异步操作，避免回调函数嵌套带来的问题。
Async/Await：Async/Await 是基于 Promise 的一种异步编程方式，它通过将异步操作包装在一个 Promise 对象中，然后使用 async/await 关键字来处理异步操作，让代码更加简洁易读。
事件监听器（Event Listener）：通过注册事件监听器来实现异步编程，当事件触发时，执行对应的回调函数。
观察者模式（Observer）：通过观察者模式来实现异步编程，当被观察对象发生变化时，通知所有的观察者进行相应的操作。
发布/订阅模式（Publish/Subscribe）：发布/订阅模式也是一种异步编程方式，它通过发布消息和订阅消息来实现异步操作。当有消息发布时，所有订阅了该消息的对象都会收到通知，并执行相应的操作。

回调函数

以下是一个使用回调函数的 JavaScript 异步编程案例：

 // 异步获取数据的函数
 function getData(callback) {
   setTimeout(function() {
     const data = { name: "John", age: 30 };
     callback(data); // 回调函数将数据作为参数传递给调用者
   }, 2000); // 模拟异步获取数据
 }
 
 // 回调函数
 function displayData(data) {
   console.log(`Name: ${data.name}, Age: ${data.age}`);
 }
 
 // 调用函数，将回调函数作为参数传递
 getDa