带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(1)

简介: 带你读《现代Javascript高级教程》二十六、JS中的异步编程与Promise(1)

二十六、JS中的异步编程与Promise

1.  JavaScript的异步编步机制

在了解JavaScript的异步机制之前,我们首先需要理解JavaScript是一种单线程语言。单线程就意味着所有的任务需要按照顺序一次执行,如果前一个任务没有完成,后一个任务就无法开始。这个特性在执行大量或耗时任务时可能会导致阻塞或者界面卡死,这显然是不可取的。

 

为了解决这个问题,JavaScript引入了异步编程的机制。简单地说,异步就是你现在发出了一个“命令”,但是并不等待这个“命令”完成,而是继续执行下一个“命令”。只有在“听到”之前的那个“命令”完成了的消息时,才会回过头来处理这个“命令”的结果。这就是所谓的异步编程。

2. 事件循环(Event Loop)和任务队列(Task Queue)

这种异步的机制是如何实现的呢?关键在于事件循环(Event Loop)和任务队列(Task Queue)。

 

事件循环是 JavaScript 内部的一个处理过程,系统会在此处不断地循环等待,检查任务队列中是否有任务,如果有,就处理它。

 

而任务队列,就是一个存储待处理任务的队列,当我们使用 setTimeout、setInterval、ajax等API时,实际上是向任务队列中添加了一个任务。

 

当主线程空闲时(也就是同步任务都执行完毕),便会去看任务队列里有没有任务,如果有,便将其取出执行;没有的话,则继续等待。

 

这个模型可以简单地用下面的代码表示:

 

while (true) {
  let task = taskQueue.pop();
  execute(task);}

3. 宏任务和微任务

在任务队列中,任务被分为两类:宏任务(MacroTask)和微任务(MicroTask)。两者的区别在于,宏任务在下一轮事件循环开始时执行,微任务在本轮事件循环结束时执行。这意味着微任务的优先级高于宏任务。

 

常见的宏任务有:script全文(可以看作一种宏任务)、setTimeout、setInterval、setImmediate(Node.js 环境)、I/O、UI渲染。

 

常见的微任务有:Promise、process.nextTick(Node.js环境)、MutationObserver(html5新特性)。

 

事件循环的顺序,决定了 JavaScript 代码的执行顺序。过程如下:

  • 执行同步代码,这属于宏任务
  • 执行栈为空,查询是否有微任务需要执行
  • 执行所有微任务
  • 必要的话渲染UI
  • 然后开始下一轮 Event loop,执行宏任务中的异步代码

代码示例如下:

console.log('script start');  // 宏任务
setTimeout(function() {
  console.log('setTimeout');  // 宏任务}, 0);
Promise.resolve().then(function() {
  console.log('promise1');    // 微任务}).then(function() {
  console.log('promise2');    // 微任务});
console.log('script end');    // 宏任务

 

输出顺序为:script start -> script end -> promise1 -> promise2 -> setTimeout。这是因为JavaScript执行机制决定了微任务比宏任务优先执行。


相关文章
|
3天前
|
JavaScript 前端开发 Go
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
动态加载与异步加载 JavaScript 详解:加载远程js,加载成功后执行回调函数
|
5天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
13 3
|
5天前
|
JSON 前端开发 JavaScript
【JavaScript技术专栏】JavaScript异步编程:Promise、async/await解析
【4月更文挑战第30天】JavaScript中的异步编程通过Promise和async/await来解决回调地狱问题。Promise代表可能完成或拒绝的异步操作,有pending、fulfilled和rejected三种状态。它支持链式调用和Promise.all()、Promise.race()等方法。async/await是ES8引入的语法糖,允许异步代码以同步风格编写,提高可读性和可维护性。两者结合使用能更高效地处理非阻塞操作。
|
2天前
|
前端开发 JavaScript
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
JavaScript新科技:PostCSS的安装和使用,2024年最新2024网易Web前端高级面试题总结
|
2天前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
2天前
|
前端开发 JavaScript
前端 js 经典:Promise
前端 js 经典:Promise
10 1
|
5天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
5天前
|
前端开发 Go
Golang深入浅出之-Go语言中的异步编程与Future/Promise模式
【5月更文挑战第3天】Go语言通过goroutines和channels实现异步编程,虽无内置Future/Promise,但可借助其特性模拟。本文探讨了如何使用channel实现Future模式,提供了异步获取URL内容长度的示例,并警示了Channel泄漏、错误处理和并发控制等常见问题。为避免这些问题,建议显式关闭channel、使用context.Context、并发控制机制及有效传播错误。理解并应用这些技巧能提升Go语言异步编程的效率和健壮性。
30 5
Golang深入浅出之-Go语言中的异步编程与Future/Promise模式
|
5天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
27 0