带你读《现代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执行机制决定了微任务比宏任务优先执行。


相关文章
|
20小时前
|
JavaScript 前端开发
JavaScript高级四、高阶技巧
JavaScript高级四、高阶技巧
|
14天前
|
Web App开发 JavaScript 前端开发
跨平台的JavaScript运行环境:Node.js
Node.js是一个跨平台的JavaScript运行环境,使开发者可以搭建服务器端的JavaScript应用程序 作用:使用Node.js编写服务器端程序
18 3
|
14天前
|
前端开发 JavaScript
JavaScript异步编程:Promise与async/await的深入探索
【7月更文挑战第9天】Promise和async/await是JavaScript中处理异步编程的两大利器。Promise为异步操作提供了统一的接口和链式调用的能力,而async/await则在此基础上进一步简化了异步代码的书写和阅读。掌握它们,将使我们能够更加高效地编写出清晰、健壮的异步JavaScript代码。
|
21天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
10 1
|
21天前
|
前端开发 JavaScript 测试技术
前端 JS 经典:Promise 详解
前端 JS 经典:Promise 详解
13 1
|
21天前
|
存储 JavaScript 前端开发
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
js/javascript 操作字符串【全】(含常用的操作字符串的lodash)
12 1
|
18天前
|
前端开发 JavaScript
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
js【详解】Promise(含 Promise 的三种状态及其变化,创建 Promise, Promise.all 语法、Promise.all 实战范例、手写 Promise.all)
26 0
|
19天前
|
监控 JavaScript 前端开发
JavaScript与Nest.js:打造高性能的服务器端应用
Nest.js是Node.js的渐进式框架,融合OOP、FP和FRP,提供模块化、装饰器和依赖注入,助建高性能服务器应用。选择Nest.js的原因包括模块化设计、简洁的装饰器API和高性能基础(如Express或Fastify)。开始使用需安装Node.js和`@nestjs/cli`,创建项目、编写控制器。深入学习涉及模块化、服务的依赖注入及中间件。安全性优化涵盖HTTPS、CORS策略、限流和性能监控。
17 0
|
20天前
|
消息中间件 前端开发 JavaScript
|
21天前
|
JavaScript 前端开发
js/javascript 操作对象【全】(含常用的操作对象的lodash)
js/javascript 操作对象【全】(含常用的操作对象的lodash)
8 0