前端知识笔记（二十五）———JS中的异步编程与Promise

本文介绍: 这意味着微任务的优先级高于宏任务。requestAn i mat ionFram e 的位置在事件循环中的具体位置是视浏览器的实现而定，但一般来说，它在宏任务执行完，渲染之前，这使得其可以获取到最新的布局和样式信息。而任务队列，就是一个存储待处理任务的队列，当我们使用 setTi m e out、setIn t er val、ajax等API时，实际上是向任务队列中添加了一个任务。Pro m i se起初是由社区提出并实现的，最早的版本是由 Kri s Ko wal 提出的 Q 库，后来被 ES6 正式接受，并成为了浏览器的原生对象。

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

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

二、事件循环（Even t Loop）和任务队列（Ta sk Que ue）
这种异步的机制是如何实现的呢？关键在于事件循环（Even t Loop）和任务队列（Ta sk Que ue）。

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

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

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

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

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');    // 宏任务

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

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});