JavaScript 笔记五：同步、异步、Promise

都是本人理解，笔记大致概念，不详细也并非完全正确，所以仅供参考。

---

同步、异步

JS 代码的执行，可以理解为任务的执行，则其中有同步任务和异步任务。

同步任务是指在主线程上的任务，只有前面一个执行完毕，才会再执行下一个。
同步任务好理解，异步任务的执行主要是以下步骤：

1. 主线程任务进行，若发现异步任务，将其移入任务队列
2. 主线程任务结束，开始执行任务队列的异步任务
3. 任务队列任务进行，若发现异步任务，将其移入任务队列后
4. 重复步骤3直至没有任务队列没有任务，结束。

---

Promise

都知道异步任务的 callback 的循环嵌套会让人抓狂，所以就有了 Promise，Promise主要解决了JS异步任务代码的可读性问题。

Promise 的三种状态

• pending：初始状态，非成功或失败
• fulfilled：操作成功完成
• rejected：操作失败

Promise 的状态的改变是不可逆的，所以它只会有：

• pending -> fulfilled
• pending -> rejected

---

同步、异步、Promise 的执行顺序

有个问题，Promise 是不是异步操作？先看代码：

setTimeout(() => {
  console.log(1);
}, 0);
new Promise(resolve => {
  console.log(2);
  resolve();
  console.log(3);
}).then(res => {
  console.log(4);
});
console.log(5);

正确结果是：2、3、5、4、1 ，来一一解析。

先忽略1和5，如果说 Promise 是同步的，那么应该是 2、4、3，但结果为什么是2、3、4？
猜想是 Promise 将 resolve(); 的方法加了某种延迟，这种延迟不加入任务队列，而仅仅是等待 Promise 初始化函数结束而开始执行，所以结果是 2、3、4。

实际上，这种操作是存在的，称之为微任务，微任务的执行顺序介于主线程和任务队列之间。
PS：任务队列的任务也称之为宏任务

所以，在上述代码中，1被插入任务队列等待，而 Promise 初始函数先输出 2，再因为 resolve(); 为微任务而先输出3，然后因为微任务的执行顺序低于主线程，所以输出 5，最后微任务执行完毕，执行 then 输出 4，最后才执行到任务队列，输出 1，所以最后的结果是：2、3、5、4、1。

如果宏任务包含微任务，那么先后顺序是？
答案：执行宏任务 > 执行包含的微任务 > 执行下一个宏任务。

new Promise(resolve1 => {
  console.log(1);
  setTimeout(() => {
    resolve1();
  }, 0);
  setTimeout(() => {
    console.log(2);
  }, 0);
})
  .then(() => {
    return new Promise(resolve2 => {
      resolve2();
      console.log(3);
    });
  })
  .then(() => {
    console.log(4);
  });
console.log(5);

答案？1、5、3、4、2

解析一下：主线程进行，Promise 初始化函数里输出 1，将宏任务 setTimeout - resolve1(); 和setTimeout - 2 放入队列，输出 5，主线程结束，执行宏任务setTimeout - resolve1(); ，执行宏任务下的微任务 resolve1() > then，新的 Promise 的执行函数中，输出 3，发现微任务 resolve2()，执行 then 输出4，此宏任务结束，下一个宏任务 setTimeout - 2 ，输出 2，结束。

总结

Promise并非异步的，仅仅因为resolve和reject方法为微操作，所以会先执行初始函数体，进而再执行then，所以会让人误以为是异步的。

---

ES5 写 Promise

贴代码总觉得不够深层，写一下自己的理解，参照 Promise 的三种状态，可以知道有这些属性。

• 状态：记录 Promise 的状态
• 成功值：成功后的返回值
• 失败值：失败后的返回值
• 成功回调方法：成功后的执行方法，即 then
• 失败回调方法：失败后的执行方法，即 catch
• resolve方法：切换状态至成功，并执行成功回调方法
• reject方法：切换状态至失败，并执行失败回调方法
• then方法：传入成功回调方法和失败函数方法，将此存储Promise中，切换状态时进行对应调用。

过程

• 当 new 一个 Promise 时，将初始函数执行，然后将 then 或 catch 的回调函数存储，当切换状态成功或切换状态失败函数时，取出存储的成功回调或失败回调进行执行。
• 像 then 的链式调用，实质是返回一个新的 Promise 即可。
• then 的支持传入成功和失败回调，而 catch 实际上是执行 then 且仅传入失败回调。