乐趣区

关于前端:现代JavaScript高级教程JS中的异步编程与Promise

jiezi
点击在线浏览，体验更好 链接
古代 JavaScript 高级小册 链接
深入浅出 Dart 链接
古代 TypeScript 高级小册 链接

JS 中的异步编程与 Promise

一、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 的异步编程机制，咱们应该有了全面深刻的理解。

参考资料

  1. MDN 文档 – 应用 Promises
  2. MDN 文档 – Window.requestAnimationFrame()
退出移动版