前端JS中的异步编程与Promise

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

一、JavaScript的异步编步机制


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


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


二、事件循环(Event Loop)和任务队列(Task Queue)


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


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


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


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


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

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


三、宏任务和微任务


在任务队列中,任务被分为两类:宏任务(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执行机制决定了微任务比宏任务优先执行。


四、requestAnimationFrame


requestAnimationFrame是一个优化动画效果的函数,也有它在事件循环中的位置。


requestAnimationFrame 的调用是有频率限制的,在大多数浏览器里,这个频率是60Hz,也就是说,每一次刷新间隔为1000/60≈16.7ms。requestAnimationFrame 的执行时机是在下一次重绘之前,而不是立即执行。


requestAnimationFrame 的优点是由系统来决定回调函数的执行时机。如果系统忙到一定程度,可能会两次“刷新”之间多次执行回调函数,这时就可以省略掉一些回调函数的执行。这种机制可以有效节省 CPU 开销,提高系统的性能。


requestAnimationFrame 的位置在事件循环中的具体位置是视浏览器的实现而定,但一般来说,它在宏任务执行完,渲染之前,这使得其可以获取到最新的布局和样式信息。


五、Promise的发展


Promise 对象代表一个异步操作的最终完成(或失败)及其结果值。一个 Promise 处于以下状态之一:


pending: 初始状态,既不是成功,也不是失败状态。

fulfilled: 意味着操作成功完成。

rejected: 意味着操作失败。

一个 promise 必须处于一种状态:fulfilled、rejected 或 pending。一个 promise 的状态在 settle 之后就不能再改变。


Promise起初是由社区提出并实现的,最早的版本是由 Kris Kowal 提出的 Q 库,后来被 ES6 正式接受,并成为了浏览器的原生对象。


Promise 主要解决了两类问题:


异步操作的一致性问题:无论异步操作是同步完成还是异步完成,使用 Promise 对象的 then 方法都可以以同样的方式进行处理。

回调地狱问题:回调地狱指的是多层嵌套的回调函数,导致代码难以维护和理解。Promise 可以通过链式调用的方式,解决回调地狱问题。

我们可以通过下面的代码示例来看一下 Promise 是如何工作的:

let promise = new Promise(function(resolve, reject) {
  // 异步处理
  // 处理结束后、调用resolve 或 reject
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});


Promise 的状态一旦改变,就会一直保持那个状态,不会再次改变。这个特性可以让我们有序地处理异步操作的结果,避免出现复杂的状态判断。


以上是关于 JavaScript 中异步编程、事件循环、任务队列、宏任务、微任务,以及requestAnimationFrame在事件循环的位置,Promise 的发展和如何解决回调地狱的详细介绍。对于 JavaScript 的异步编程机制,我们应该有了全面深入的了解。

相关文章
|
11天前
|
前端开发 JavaScript
用JavaScript 实现一个简单的 Promise 并打印结果
用 JavaScript 实现一个简单的 Promise 并打印结果
|
11天前
|
JSON 前端开发 JavaScript
在 JavaScript 中,如何使用 Promise 处理异步操作?
通过以上方式,可以使用Promise来有效地处理各种异步操作,使异步代码更加清晰、易读和易于维护,避免了回调地狱的问题,提高了代码的质量和可维护性。
|
14天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
14天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
24 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
16天前
|
JSON 前端开发 JavaScript
浅谈JavaScript中的Promise、Async和Await
【10月更文挑战第30天】Promise、Async和Await是JavaScript中强大的异步编程工具,它们各自具有独特的优势和适用场景,开发者可以根据具体的项目需求和代码风格选择合适的方式来处理异步操作,从而编写出更加高效、可读和易于维护的JavaScript代码。
22 1
|
19天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
28 1
|
6月前
|
前端开发 JavaScript
如何处理 JavaScript 中的异步操作和 Promise?
如何处理 JavaScript 中的异步操作和 Promise?
65 1
|
6月前
|
前端开发 JavaScript
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
在JavaScript中,什么是promise、怎么使用promise、怎么手写promise
99 4
|
6月前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程:Promise 和 Async/Await
在现代的 JavaScript 开发中,异步编程是至关重要的。本文将介绍 JavaScript 中的异步编程概念,重点讨论 Promise 和 Async/Await 这两种常见的处理异步操作的方法。通过本文的阐述,读者将能够更好地理解和应用这些技术,提高自己在 JavaScript 开发中处理异步任务的能力。
|
5月前
|
前端开发 JavaScript 开发者
JavaScript进阶-Promise与异步编程
【6月更文挑战第20天】JavaScript的Promise简化了异步操作,从ES6开始成为标准。Promise有三种状态:pending、fulfilled和rejected。基本用法涉及构造函数和`.then`处理结果,如: ```javascript new Promise((resolve, reject) => { setTimeout(resolve, 2000, '成功'); }).then(console.log); // 输出: 成功
86 4