前言

在上篇我已经讲过了JS世界是如何诞生的，但是如何才能让世界有条不紊的运转起来呢？

本文将从 万物初始 讲起JS世界的运转规则，也就是 事件循环 ，在这个过程中你就能明白为什么需要这些规则。有了规则JS世界才能稳稳的运转起来，所以这些规则非常重要，但是你真的了解它们了吗？

阅读本文前可以思考下面几个问题：

• 你理解中的事件循环是怎样的？
• 有宏任务了，为什么还要有微任务，它们又有什么关系？
• promise 非常重要，你可以手撕 promise/A+ 规范了吗？
• async/await 底层实现原理是什么？

本文将会由浅入深的解答这些问题

万物初始

本文基于 chromium 内核 V8 引擎讲解

刚开始让万物运转是件挺容易的事情，毕竟刚开始嘛，也没什么复杂事，比如有如下一系列任务：

• 任务1：1 + 2
• 任务2：3 / 4
• 任务3：打印出 任务1 和 任务2 结果

把任务转换成JS代码长这样：

function MainThread() {
    let a = 1 + 2;
    let b = 3 / 4;
    console.log(a + b)
}

JS世界拿到这个任务一看很简单啊：首先建一条流水线（一个单线程），然后依次处理这三个任务，最后执行完后撤掉流水线（线程退出）就行了。

现在咱们的事件循环系统很容易就能处理这几个任务了，可以得出：

• 单线程解决了处理任务的问题 ：如果有一些确定好的任务，可以使用一个单线程来 按照顺序 处理这些任务。

但是有一些问题：

• 但并不是所有的任务都是在执行之前统一安排好的，很多时候，新的任务是在线程运行过程中产生的
• 在线程执行过程中，想加入一个新任务，但是现在这个线程执行完当前记录的任务就直接退出了

世界循环运转

要想解决上面的问题，就需要引入 循环机制 ，让线程持续运转，再来任务就能执行啦

转换成代码就像这样

function MainThread() {
    while(true){
        ······
}

现在的JS的事件循环系统就能持续运转起来啦：

• 循环机制解决了不能循环执行的问题 ：引入了循环机制，通过一个 while 循环语句，线程会一直循环执行

不过又有其他问题出现了：

• 别的线程要交给我这个主线程任务，并且还可能短时间内交给很多的任务。这时候该如何优化来处理这种情况呢？

任务放入队列

交给主线程的这些任务，肯定得按一定顺序执行，并且还要得主线程空闲才能做这些任务，所以就需要先将这些任务按顺序存起来，等着主线程有空后一个个执行。

但是如何按顺序存储这些任务呢？

很容易想到用 队列 ，因为这种情况符合队列“ 先进先出 ”的特点，也就是说 要添加任务的话，添加到队列的尾部；要取出任务的话，从队列头部去取。

有了队列之后，主线程就可以从消息队列中读取一个任务，然后执行该任务，主线程就这样一直循环往下执行，因此只要消息队列中有任务，主线程就会去执行。

我们要注意的是：

• JavaScript V8引擎是在 渲染进程 的 主线程 上工作的

结果如下图所示：

其实渲染进程会有一个IO线程： IO线程负责和其它进程IPC通信，接收其他进程传进来的消息 ，如图所示：

咱们现在知道页面主线程是如何接收外部任务了：

• 如果其他进程想要发送任务给页面主线程，那么先通过 IPC 把任务发送给渲染进程的 IO 线程，IO 线程再把任务发送给页面主线程

到现在，其实已经完成 chromium内核 基本的事件循环系统了：

• JavaScript V8引擎 在 渲染进程 的 主线程 上工作
• 主线程有 循环机制 ，能在线程运行过程中，能接收并执行新的任务
• 交给主线程执行的任务会先放入 任务队列 中，等待主线程空闲后依次调用
• 渲染进程会有一个IO线程： IO线程负责和其它进程IPC通信，接收其他进程传进来的消息

完善运转规则

现在已经知道：页面线程所有执行的任务都来自于任务队列。任务队列是“先进先出”的，也就是说放入队列中的任务，需要 等待前面的任务被执行完，才会被执行 。

这就导致两个问题了：

• 如何处理高优先级的任务？
• 如何处理执行时间长的任务？

如何解决这两个问题呢？

处理高优先级的任务-微任务

以监听dom变化为例，如果dom变化则触发任务回调，但是如果将这个任务回调放到队列尾部，等到轮到它出队列，可能已经过去一段时间了，影响了监听的 实时性 。并且如果变化很频繁的话，往队列中插入了这么多的任务，必然也降低了 效率 。

所以需要一种既能兼顾实时性，又能兼顾效率的方法。

解决方案 V8引擎 已经给出了：在每个任务内部，开辟一个属于该任务的队列，把需要兼顾实时性和效率的任务，先放到这个任务内部的队列中等待执行，等到当前任务快执行完准备退出前，执行该任务内部的队列。咱们把放入到这个特殊队列中的任务称为 微任务 。

这样既不会影响当前的任务又不会降低多少实时性。

如图所示以 任务1 为例：

可以总结一下：

• 任务队列中的任务都是 宏观任务
• 每个宏观任务都有一个自己的微观任务队列
• 微任务在当前宏任务中的 JavaScript 快执行完成时，也就在 V8引擎 准备退出全局执行上下文并清空调用栈 的时候， V8引擎 会 检查全局执行上下文中的微任务队列 ，然后按照顺序执行队列中的微任务。
• V8引擎 一直循环执行微任务队列中的任务，直到队列为空才算执行结束。也就是说在执行微任务 过程中产生的新的微任务并不会推迟到下个宏任务中执行 ，而是在当前的宏任务中继续执行。

我们来看看 微任务 怎么产生？在现代浏览器里面，产生微任务 只有两种方式 。

• 第一种方式是使用 MutationObserver 监控某个DOM节点，然后再通过 JavaScript 来修改这个节点，或者为这个节点添加、删除部分子节点，当 DOM 节点发生变化时，就会产生 DOM 变化记录的微任务。
• 第二种方式是使用 Promise ，当调用 Promise.resolve() 或者 Promise.reject() 的时候，也会产生微任务。

而常见的 宏任务 又有哪些呢？

• 定时器类： setTimeout、setInterval、setImmediate
• I/O操作：比如读写文件
• 消息通道： MessageChannel

并且我们要知道：

• 宿主（如浏览器）发起的任务称为宏观任务
• JavaScript 引擎发起的任务称为微观任务

处理执行时间长的任务-回调

要知道 排版引擎 Blink 和 JavaScript引擎 V8 都工作在渲染进程的主线程上并且是互斥的。

在单线程中，每次只能执行一个任务，而其他任务就都处于等待状态。如果其中一个任务执行时间过久，那么下一个任务就要等待很长时间。

如果页面上有动画，当有一个 JavaScript 任务运行时间较长的时候（比如大于16.7ms），主线程无法交给 排版引擎 Blink 来工作，动画也就无法渲染来，造成卡顿的效果。这当然是非常糟糕的用户体验。想要避免这种问题，就需要用到 回调 来解决。

从底层看setTimeout实现

到现在已经知道了，JS世界是由 事件循环和任务队列 来驱动的。

setTimeout 大家都很熟悉，它是一个定时器，用来指定某个函数在多少毫秒后执行。那浏览器是怎么实现 setTimeout 的呢？

要搞清楚浏览器是怎么实现 setTimeout 就先要弄明白两个问题：

• setTimeout 任务存到哪了？
• setTimeout 到时间后怎么触发？
• 取消 setTimeout 是如何实现的？

setTimeout 任务存到哪了

首先要清楚，任务队列不止有一个，Chrome还维护着一个 延迟任务队列 ，这个队列维护了需要延迟执行的任务，所以当你通过 Javascript 调用 setTimeout 时，渲染进程会将该定时器的 回调任务 添加到 延迟任务队列 中。

回调任务的信息包含： 回调函数、当前发起时间、延迟执行时间

具体我画了个图：

setTimeout 到时间后怎么触发

当主线程执行完任务队列中的一个任务之后，主线程会对延迟任务队列中的任务， 通过当前发起时间和延迟执行时间计算出已经到期的任务，然后依次的执行这些到期的任务 ，等到期的任务全部执行完后，主线程就进入到下一次循环中。具体呢我也画了个图：

ps：为了讲清楚，画配图好累哦, 点个赞吧！

到这就清楚 setTimeout 是如何实现的了：

• setTimeout 存储到延迟任务队列中
• 当主线程执行完任务队列中的一个任务后，计算延迟任务队列中到期到任务，并执行所有到期任务
• 执行完所有到期任务后，让出主线程，进行下一次事件循环

手撕promise

promise 非常重要，新加入的原生api和前端框架都大量使用了 promise ， promise 已然成为前端的“水”和“电”。

promise解决了什么问题呢？promise解决的是 异步编码风格 的问题。

咱们来看，以前我们的异步代码长这样：

let fs = require('fs');
fs.readFile('./dellyoung.json',function(err,data){
  fs.readFile(data,function(err,data){
    fs.readFile(data,function(err,data){
      console.log(data)
})

层层嵌套，环环相扣，想拿到回调结果已经够费劲了，如果还想进行错误处理。。。那简直太难受了。

而promise出现后，这些问题迎刃而解：

let fs = require('fs');
function getFile(url){
  return new Promise((resolve,reject)=>{
    fs.readFile(url,function(error,data){
        if(error){
            reject(error)
        resolve(data)
getFile('./dellyoung.json').then(data=>{
    return getFile(data) 
}).then(data=>{
    return getFile(data)  
}).then(data=>{
    console.log(data)
}).catch(err=>{
    // 统一错误处理
    console.log(err)
})

简直好用了太多。

可以发现，使用 promise 解决了异步回调的 嵌套调用 和 错误处理 的问题。

大家已经知道 promise 非常重要了，但是如何完全学会 promise 呢？手撕一遍 promise 自然就贯通啦，咱们开始撕，在过程中抽丝剥茧。

promise/A+规范

我们现在想写一个 promise ，但是谁来告诉怎样才算一个合格的 promise ，不用担心，业界是通过一个规则指标来实现 promise 的，这就是 Promise / A+ ，还有一篇翻译可供参考 【翻译】Promises / A+规范 。

接下来就开始逐步实现吧！

同步的promise

先从一个最简单的promise实现开始

构造函数

先实现 promise 的地基：初始化用的构造函数

class ObjPromise {
    constructor(executor) {
        // promise状态
        this.status = 'pending';
        // resolve回调成功，resolve方法里的参数值
        this.successVal = null;
        // reject回调成功，reject方法里的参数值
        this.failVal = null;
        // 定义resolve函数
        const resolve = (successVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'resolve';
            this.successVal = successVal;
        // 定义reject
        const reject = (failVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'reject';
            this.failVal = failVal;
        try {
            // 将resolve函数给使用者
            executor(resolve, reject)
        } catch (e) {
            // 执行抛出异常时
            reject(e)
}

咱们先写一个 constructor 用来初始化 promise 。

接下来分析一下：

• 调用 ObjPromise 传入一个函数命名为 executor ， executor 函数接受两个参数resolve、reject，可以理解为分别代表成功时的调用和失败时的调用。 executor 函数一般长这样 (resolve,reject)=>{...}
• status 代表当前 promise 的状态，有三种 'pending'、'resolve'、'reject' （注：从状态机考虑的话还有一个额外的初始状态，表示 promise 还未执行）
• successVal 和 failVal 分别代表 resolve 回调和 reject 回调携带的参数值
• 函数resolve ：初始化的时候通过作为 executor 的参数传递给使用者，用来让使用者需要的时候调用，将 status 状态从 'pending' 改成 'resolve'
• 函数reject ：初始化的时候通过作为 executor 的参数传递给使用者，将 status 状态从 'pending' 改成 'reject'
• 你可能还发现了 函数resolve 和 函数reject 里面都有 if (this.status !== 'pending') {return;} ，这是因为 resolve 或 reject 只能调用一次，也就是 status 状态只能改变一次。

then 方法

then方法作用：拿到 promise 中的 resolve 或者 reject 的值。

1.基础版then方法

在 class 里面放上如下 then 方法：

then(onResolved, onRejected) {
    switch (this.status) {
        case "resolve":
            onResolved(this.successVal);
            break;
        case "reject":
            onRejected(this.failVal);
            break;
}

来分析一下：

• then方法可以传入两个参数，两个参数都是函数，俩函数就像这样 (val)=>{...}
• 当 status 状态为 'resolve' 则调用第一个传入的函数，传入的 val 为 successVal
• 当 status 状态为 'reject' 则调用第二个传入的函数，传入的 val 为 failVal

但是then方法还需要支持链式调用的 ，也就是说可以这样：

new Promise((resolve,reject)=>{
    resolve(1);
}).then((resp)=>{
    console.log(resp); // 1
}).then(()=>{
})

2.使then方法支持链式调用

其实支持链式核心就是then方法要返回一个新的 promise ，咱们来改造一下实现支持链式调用。

then(onResolved, onRejected) {
    // 要返回一个promise对象
    let resPromise;
    switch (this.status) {
        case "resolve":
            resPromise = new ObjPromise((resolve, reject) => {
                    // 传入的第一个函数
                    onResolved(this.successVal);
                    resolve();
                }catch (e) {
                    reject(e);
            break;
        case "reject":
            resPromise = new ObjPromise((resolve, reject) => {
                    // 传入的第二个函数
                    onRejected(this.failVal);
                    resolve();
                }catch (e) {
                    reject(e);
            break;
    return resPromise;
}

再分析一下：

• 当 status 为 'resolve' 时，将 promise 成功 resolve 的结果 successVal ，传递给第一个方法 onResolved() ，然后执行 onResolved(this.successVal) 函数
• 当 status 为 'reject' 时，过程一致，就不多说啦
• 重点看它们都会把新创建的 promise 赋值给 then 方法，执行完后 then 方法会返回这个新的 promise ，这样就能实现 then 的链式调用了

3.使then方法的链式调用可以传参

但是你没有发现一个问题，我 then 方法内的第一个参数，也就是 onResolved() 函数，函数内部的返回值应该是要能够传递给下面接着进行链式调用的 then 方法的，如下所示：

new Promise((resolve,reject)=>{
    resolve(1);
}).then((resp)=>{
    console.log(resp); // 1
    return 2; // <<< 关注这行
}).then((resp)=>{
   console.log(resp); // 2 接受到了参数2
})

这该如何实现呢？

其实很简单：

then(onResolved, onRejected) {
    // 定义这个变量保存要返回的promise对象
    let resPromise;
    switch (this.status) {
        case "resolve":
            resPromise = new ObjPromise((resolve, reject) => {
                    // 传入的第一个函数
                    let data = onResolved(this.successVal);
                    resolve(data);
                }catch (e) {
                    reject(e);
            break;
        case "reject":
            resPromise = new ObjPromise((resolve, reject) => {
                    // 传入的第二个函数
                    let data = onRejected(this.failVal);
                    resolve(data);
                }catch (e) {
                    reject(e);
            break;
    return resPromise;
}

很简单：

• 先保存函数执行的结果，也就是函数的返回值
• 然后，将返回值传递给新的用来返回的 promise 的 resolve() ，就可以将返回值保存到新的 promise 的 successVal
• 执行出错的话，当然要将错误传递给新的用来返回的 promise 的 reject() ，将错误保存到新的 promise 的 failVal

4.then传入参数处理

再看看这段常见的代码：

new Promise((resolve,reject)=>{
    resolve(1);
}).then((resp)=>{
    console.log(resp); // 1
    return 2; 
}).then((resp)=>{
   console.log(resp); // 2
})

可以看到，then方法的参数可以只传一个，继续来改造：

then(onResolved, onRejected) {
    const isFunction = (fn) => {
        return Object.prototype.toString.call(fn) === "[object Function]"
    onResolved = isFunction(onResolved) ? onResolved : (e) => e;
    onRejected = isFunction(onRejected) ? onRejected : err => {
        throw err
    ······
}

分析一下：

• 判断传入参数的类型是不是函数
• 传入类型是函数的话，那没毛病，直接用就行
• 传入类型不是函数的话，那糟糕啦，咱们得分别用 (e) => e 和 (err)=>{throw err} 来替换

到现在promise已经能正常运转啦，代码如下：

class ObjPromise {
    constructor(executor) {
        // promise状态
        this.status = 'pending';
        // resolve回调成功，resolve方法里的参数值
        this.successVal = null;
        // reject回调成功，reject方法里的参数值
        this.failVal = null;
        // 定义resolve函数
        const resolve = (successVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'resolve';
            this.successVal = successVal;
        // 定义reject
        const reject = (failVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'reject';
            this.failVal = failVal;
        try {
            // 将resolve函数给使用者
            executor(resolve, reject)
        } catch (e) {
            // 执行抛出异常时
            reject(e)
    then(onResolved, onRejected) {
        const isFunction = (fn) => {
            return Object.prototype.toString.call(fn) === "[object Function]"
        onResolved = isFunction(onResolved) ? onResolved : (e) => e;
        onRejected = isFunction(onRejected) ? onRejected : err => {
            throw err
        // 定义这个变量保存要返回的promise对象
        let resPromise;
        switch (this.status) {
            case "resolve":
                resPromise = new ObjPromise((resolve, reject) => {
                        // 传入的第一个函数
                        let data = onResolved(this.successVal);
                        resolve(data);
                    }catch (e) {
                        reject(e);
                break;
            case "reject":
                resPromise = new ObjPromise((resolve, reject) => {
                        // 传入的第二个函数
                        let data = onRejected(this.failVal);
                        resolve(data);
                    }catch (e) {
                        reject(e);
                break;
        return resPromise;
}

你可以在控制台运行下面这个测试代码：

new ObjPromise((resolve,reject)=>{
    resolve(1);
}).then((resp)=>{
    console.log(resp); // 1
    return 2; 
}).then((resp)=>{
   console.log(resp); // 2
})

控制台会依次打印出 1 2。

5.then返回值处理

到现在同步 promise 代码已经没问题啦，但是还不够，因为 Promise/A+ 规定： then方法 可以返回任何值，当然包括 Promise 对象，而如果是 Promise 对象，我们就需要将他拆解，直到它不是一个 Promise 对象，取其中的值。

因为status状态为 'resolve' 和 'reject' 时都需要进行这样的处理，所以我们就可以把处理过程封装成一个函数，代码如下：

then(onResolved, onRejected) {
    let resPromise;
    switch (this.status) {
        case "resolve":
            resPromise = new ObjPromise((resolve, reject) => {
                try {
                    // 传入的第一个函数
                    let data = onResolved(this.successVal);
                    this.resolvePromise(data, resolve, reject);
                } catch (e) {
                    reject(e);
            break;
        case "reject":
            resPromise = new ObjPromise((resolve, reject) => {
                try {
                    // 传入的第二个函数
                    let data = onRejected(this.failVal);
                    this.resolvePromise(data, resolve, reject);
                } catch (e) {
                    reject(e);
            break;
    return resPromise;
// data为返回值
// newResolve为新的promise的resolve方法
// newReject为新的promise的reject方法
resolvePromise(data, newResolve, newReject) {
    // 判断是否是promise，不是直接resolve就行
    if(!(data instanceof ObjPromise)){
        return newResolve(data)
    try {
        let then = data.then;
        const resolveFunction = (newData) => {
            this.resolvePromise(newData, newResolve, newReject);
        const rejectFunction = (err) => {
            newReject(err);
        then.call(data, resolveFunction, rejectFunction)
    } catch (e) {
        // 错误处理
        newReject(e);
}

分析一下：

• 判断返回值类型，当不是 promise 时，直接 resolve 就行
• 当是 promise 类型时，用 this.resolvePromise(newData, newResolve, newReject) 来递归的调用then方法，直到 data 不为 promise ，然后 resolve 结果就行啦

6.解决then返回值循环引用

现在又有问题了:

如果新的promise出现循环引用的话就永远也递归不到头了

看看执行下面这个代码：

let testPromise = new ObjPromise((resolve, reject) => {
    resolve(1);
let testPromiseB = testPromise.then((resp) => {
    console.log(resp); // 1
    return testPromiseB;
})

会报错栈溢出。

解决这个问题的方法就是：通过给 resolvePromise() 方法传递当前新的 promise 对象，判断当前 新的promise对象 和 函数执行返回值 不同就可以了

class ObjPromise {
    constructor(executor) {
        // promise状态
        this.status = 'pending';
        // resolve回调成功，resolve方法里的参数值
        this.successVal = null;
        // reject回调成功，reject方法里的参数值
        this.failVal = null;
        // 定义resolve函数
        const resolve = (successVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'resolve';
            this.successVal = successVal;
        // 定义reject
        const reject = (failVal) => {
            if (this.status !== 'pending') {
                return;
            this.status = 'reject';
            this.failVal = failVal;
        try {
            // 将resolve函数给使用者
            executor(resolve, reject)
        } catch (e) {
            // 执行抛出异常时
            reject(e)
    resolvePromise(resPromise, data, newResolve, newReject) {
        if (resPromise === data) {
            return newReject(new TypeError('循环引用'))
        if (!(data instanceof ObjPromise)) {
            return newResolve(data)
        try {
            let then = data.then;
            const resolveFunction = (newData) => {
                this.resolvePromise(resPromise, newData, newResolve, newReject);
            const rejectFunction = (err) => {
                newReject(err);
            then.call(data, resolveFunction, rejectFunction)
        } catch (e) {
            // 错误处理
            newReject(e);
    then(onResolved, onRejected) {
        const isFunction = (fn) => {
            return Object.prototype.toString.call(fn) === "[object Function]"
        onResolved = isFunction(onResolved) ? onResolved : (e) => e;
        onRejected = isFunction(onRejected) ? onRejected : err => {
            throw err
        // 定义这个变量保存要返回的promise对象
        let resPromise;
        switch (this.status) {
            case "resolve":
                resPromise = new ObjPromise((resolve, reject) => {
                    try {
                        // 传入的第一个函数
                        let data = onResolved(this.successVal);
                        this.resolvePromise(resPromise, data, resolve, reject);
                    } catch (e) {
                        reject(e);
                break;
            case "reject":
                resPromise = new ObjPromise((resolve, reject) => {
                    try {
                        // 传入的第二个函数
                        let data = onRejected(this.failVal);
                        this.resolvePromise(resPromise, data, resolve, reject);
                    } catch (e) {
                        reject(e);
                break;
        return resPromise;
}

可以在控制台中调用如下代码试试啦：

new ObjPromise((resolve, reject) => {
    resolve(1);
}).then((resp) => {
    console.log(resp); // 1
    return 2
}).then((resp) => {
    console.log(resp); // 2
    return new ObjPromise((resolve, reject) => {
        resolve(3)
}).then((resp) => {
    console.log(resp); // 3
});

控制台会一次打印出 1 2 3

异步的promise

现在咱们实现了同步版的 promise ，但是很多情况下， promise 的 resolve 或 reject 是被异步调用的，异步调用的话，执行到 then() 方法时，当前的 status 状态还是 'pending' 。这该如何改进代码呢？

思路其实很简单：

• 设置两个数组，分别存起来 then() 方法的回调函数 onResolved 和 onRejected
• 当等到调用了 resolve 或者 reject 时，执行对应数组内存入的回调函数即可
• 另外为了保证执行顺序,等待当前执行栈执行完成，咱们还需要给 constructor 的 resolve 和 reject 函数里面使用 setTimeout 包裹起来，避免影响当前执行的任务。

根据这个思路来改造一下 promise ：

class ObjPromise {
    constructor(executor) {
        // promise状态
        this.status = 'pending';
        // resolve回调成功，resolve方法里的参数值
        this.successVal = null;
        // reject回调成功，reject方法里的参数值
        this.failVal = null;
        // resolve的回调函数
        this.onResolveCallback = [];
        // reject的回调函数
        this.onRejectCallback = [];
        // 定义resolve函数
        const resolve = (successVal) => {
            setTimeout(()=>{
                if (this.status !== 'pending') {
                    return;
                this.status = 'resolve';
                this.successVal = successVal;
                //执行所有resolve的回调函数
                this.onResolveCallback.forEach(fn => fn())
        // 定义reject
        const reject = (failVal) => {
            setTimeout(()=>{
                if (this.status !== 'pending') {
                    return;
                this.status = 'reject';
                this.failVal = failVal;
                //执行所有reject的回调函数
                this.onRejectCallback.forEach(fn => fn())
        try {
            // 将resolve函数给使用者
            executor(resolve, reject)
        } catch (e) {
            // 执行抛出异常时
            reject(e)
    // data为返回值
    // newResolve为新的promise的resolve方法
    // newReject为新的promise的reject方法
    resolvePromise(resPromise, data, newResolve, newReject) {
        if (resPromise === data) {
            return newReject(new TypeError('循环引用'))
        if (!(data instanceof ObjPromise)) {
            return newResolve(data)
        try {
            let then = data.then;
            const resolveFunction = (newData) => {
                this.resolvePromise(resPromise, newData, newResolve, newReject);
            const rejectFunction = (err) => {
                newReject(err);
            then.call(data, resolveFunction, rejectFunction)
        } catch (e) {
            // 错误处理
            newReject(e);
    then(onResolved, onRejected) {
        const isFunction = (fn) => {
            return Object.prototype.toString.call(fn) === "[object Function]"
        onResolved = isFunction(onResolved) ? onResolved : (e) => e;
        onRejected = isFunction(onRejected) ? onRejected : err => {
            throw err
        // 定义这个变量保存要返回的promise对象
        let resPromise;
        switch (this.status) {
            case "resolve":
                resPromise = new ObjPromise((resolve, reject) => {
                    try {
                        // 传入的第一个函数
                        let data = onResolved(this.successVal);
                        this.resolvePromise(resPromise, data, resolve, reject);
                    } catch (e) {
                        reject(e);
                break;
            case "reject":
                resPromise = new ObjPromise((resolve, reject) => {
                    try {
                        // 传入的第二个函数
                        let data = onRejected(this.failVal);
                        this.resolvePromise(resPromise, data, resolve, reject);
                    } catch (e) {
                        reject(e);
                break;
            case "pending":
                resPromise = new ObjPromise((resolve, reject) => {
                    const resolveFunction = () => {
                        try {
                            // 传入的第一个函数
                            let data = onResolved(this.successVal);
                            this.resolvePromise(resPromise, data, resolve, reject);
                        } catch (e) {
                            reject(e);
                    const rejectFunction = () => {
                        try {
                            // 传入的第二个函数
                            let data = onRejected(this.failVal);
                            this.resolvePromise(resPromise, data, resolve, reject);
                        } catch (e) {
                            reject(e);
                    this.onResolveCallback.push(resolveFunction);
                    this.onRejectCallback.push(rejectFunction);
                break;
        return resPromise;
}

可以用下面代码测试一下：

new ObjPromise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
    }, 100)
}).then((resp) => {
    console.log(resp); // 1
    return 2
}).then((resp) => {
    console.log(resp); // 2
    return new ObjPromise((resolve, reject) => {
        resolve(3)
}).then((resp) => {
    console.log(resp); // 3
});

我们现在已经基本完成了 Promise 的 then 方法啦。

完善promise

到现在已经完成了 promise 最核心的两个方法： constructor 方法和 then 方法。不过 Promise/A+ 还规定了一些其他的方法，咱们继续来完成。

catch 方法

catch() 方法就是可以通过回调函数拿到 reject 的值，这个好办，其实 then 方法已经实现了，转接一下 then 方法就行了：

catch(onRejected) {
    return this.then(null, onRejected)
}

这样就实现了 catch() 方法

Promise.resolve()/reject() 方法

大家肯定都见过 Promise.resolve() 或者 Promise.resolve() 用法。其实作用就是返回一个新的promise，并且内部调用 resolve 或者 reject 。

ObjPromise.resolve = (val) => {
    return new ObjPromise((resolve, reject) => {
        resolve(val)
ObjPromise.reject = (val) => {
    return new ObjPromise((resolve, reject) => {
        reject(val)
};

通过这两种方法，咱们可以将现有的数据很方便的转换成 promise 对象

all 方法

all 方法也是很常用的方法，它可以传入 promise 数组，当全部 resolve 或者有一个 reject 时，执行结束，当然返回的也是 promise 对象,来实现一下。

ObjPromise.all = (arrPromise) => {
    return new ObjPromise((resolve, reject) => {
        // 传入类型必须为数组
        if(Array.isArray(arrPromise)){
            return reject(new TypeError("传入类型必须为数组"))
        // resp 保存每个promise的执行结果
        let resp = new Array(arrPromise.length);
        // 保存执行完成的promise数量
        let doneNum = 0;
        for (let i = 0; arrPromise.length > i; i++) {
            // 将当前promise
            let nowPromise = arrPromise[i];
            if (!(nowPromise instanceof ObjPromise)) {
                return reject(new TypeError("类型错误"))
            // 将当前promise的执行结果存入到then中
            nowPromise.then((item) => {
                resp[i] = item;
                doneNum++;
                if(doneNum === arrPromise.length){
                    resolve(resp);
            }, reject)
};

来分析一下：

• 传入 promise 数组，返回一个新的 promsie 对象
• resp 用来保存所有 promise 的执行结果
• 用 instanceof 来判断是否是 promise 类型
• 通过调用每个 promise 的then方法拿到返回值，并且要传入 reject 方法
• 用 doneNum 来保存执行完成的 promise 数量，全部执行完后，通过 resolve 传递执行结果 resp ，并且将当前 promise 状态改为 'resolve' ，后续就可以通过 then 方法取值

race 方法

race方法也偶尔会用到，它可以传入promise数组，当哪个promise执行完，则race就直接执行完，咱们来实现一下：

ObjPromise.race = (arrPromise) => {
    return new Promise((resolve, reject) => {
        for (let i = 0; arrPromise.length > i; i++) {
            // 将当前promise
            let nowPromise = arrPromise[i];
            if (!(nowPromise instanceof ObjPromise)) {
                return reject(new TypeError("类型错误"))
            nowPromise.then(resolve, reject);
};

来分析一下：

• 传入 promise 数组，返回一个新的 promsie 对象
• 用instance来判断是否是 promise 类型
• 调用每个 promise 的 then 方法，并传递 resolve、reject 方法，哪个先执行完就直接结束了，后续就可以通过 then 方法取值

OK,到现在已经实现了一个自己的 promise 对象！

从底层看async/await实现

手撕完 promise ，趁热再深入学习一下 ES7 的新特性 async/await 。 async/await 相当牛逼： 它是JavaScript 异步编程的一个重大改进，提供了在不阻塞主线程的情况下使用同步代码实现异步访问资源的能力，并且使得代码逻辑更加清晰 。接下来咱们就来深入了解下 async/await 为什么能这么牛逼。

async/await 使用了 Generator 和 Promise 两种技术， Promise 咱们已经掌握了，所以要再看一看 Generator 到底是什么。

生成器Generator

先了解一下生成器 Generator 是如何工作的，接着再学习 Generator 的底层实现机制—— 协程 （Coroutine）

如何工作

生成器函数： 生成器函数是一个带星号函数，而且是可以暂停执行和恢复执行的

先来看下面这段代码：

function* genFun() {
    console.log("第一段")
    yield 'generator 1'
    console.log("第二段")
    return 'generator 2'
console.log('begin')
let gen = genFun()
console.log(gen.next().value)
console.log('main 1')
console.log(gen.next().value)
console.log('main 2')

执行这段代码，你会发现 gen 并不是一次执行完的，而是全局代码和 gen 代码交替执行。这其实就是生成器函数的特性，它可以暂停执行，也可以恢复执行。

再来看下，它是具体是怎么暂停执行和恢复执行的：

• 在生成器函数内部执行一段代码，如果遇到 yield 关键字，那么 JavaScript引擎 将返回关键字后面的内容给外部，并暂停该函数的执行。
• 外部函数可以通过 next方法 恢复生成器函数的执行。

但是 JavaScript引擎V8 是如何实现生成器函数的暂停和恢复呢，接着往下看

生成器原理

想要搞懂生成器函数如何暂停和恢复，要先了解一下协程的概念， 协程是一种比线程更加轻量级的存在 ，可以把协程看成是跑在线程上的任务：

• 一个线程上可以存在多个协程，但是在线程上同时只能执行一个协程。
• 如果从 A 协程启动 B 协程，我们就把 A 协程称为 B 协程的父协程。
• 一个进程可以拥有多个线程一样，一个线程也可以拥有多个协程。
• 协程不是被操作系统内核所管理，而完全是由程序所控制（也就是在用户态执行）。因此协程在性能上要远高于线程。

小知识点：线程 核心态，协程 用户态。也就是说线程被内核调度，协程是由用户的程序自己调度，系统并不知道有协程的存在

下面我画了个图来演示上面代码的执行过程：

从图中结合代码可以看出协程的规则：

• 通过调用生成器函数 genFun 来创建一个协程 gen ，创建之后， gen 协程 并没有立即执行 。
• 要让 gen 协程执行，需要通过调用 gen.next() 。
• 当协程正在执行的时候，可以通过 yield 关键字来暂停 gen 协程的执行，并返回主要信息给父协程。
• 如果协程在执行期间，遇到了 return ，那么 JavaScript引擎 会结束当前协程，并将 return 后面的内容返回给父协程。

其实规则总的来说：

• 父协程中执行 next() ，线程控制权就让给子协程了
• 子协程中遇到 yield ，线程控制权就让给父协程了
• 可以看出父协程和子协程还是互相谦让的

但是用 Generator 生成器还是不太好用，我们希望写代码的时候，不要手动控制协程之间的切换，该切换时， JavaScript引擎 帮我直接切换好多省事。这时候 async/await 就登场啦！

再看 async/await

已经知道， async/await 使用了 Generator 和 Promise 两种技术，其实往低层说就是 微任务和协程 的应用。现在 Generator 和 Promise 都已经深入理解啦。但是微任务和协程是如何协作实现了 async/await 呢？

1. async 是什么：

MDN： async 是一个通过异步执行并隐式返回 Promise 作为结果的函数。

可以执行下面代码：

async function foo() {
    return 1
console.log(foo())  // Promise {<resolved>: 1}

可以看到调用 async 声明的 foo() 函数返回了一个 Promise 对象，并且状态是 resolved 。

2. await 是什么：

MDN: await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。undefined若 Promise 正常处理 (fulfilled) ，其回调的 resolve 函数参数作为 await 表达式的值，继续执行 async function 。

若 Promise 处理异常 (rejected) ， await 表达式会把 Promise 的异常原因抛出。

先来看下面这段代码：

async function foo() {
    console.log(1)
    let a = await 99
    console.log(a)