时间戳

首页 > 技术文章 > JavaScript之Promise学习笔记

JavaScript之Promise学习笔记

wenruo 2018-07-26 20:38 原文

一直想知道Promise到底是怎么实现的，网上一搜几十篇文章，看的一脸蒙蔽。最后算是找到几个讲的真心很详细明了的。看了一份源码看了很久很久……最后找大佬问了几处看不懂的地方，大佬只看了十几分钟就看懂了……第一次我感受到了如此强烈绝望…………

 

此处推荐：

一起学习造轮子（一）：从零开始写一个符合Promises/A+规范的promise

Promises/A+ 规范，英文版

Promise A+ 规范

一个开放、健全且通用的 JavaScript Promise 标准。由开发者制定，供开发者参考。

译文术语

解决（fulfill）：指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。
拒绝（reject）：指一个 promise 失败时进行的一系列操作。
终值（eventual value）：所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 promise 有一次性的特征，因此当这个值被传递时，标志着 promise 等待态的结束，故称之终值，有时也直接简称为值（value）。
据因（reason）：也就是拒绝原因，指在 promise 被拒绝时传递给拒绝回调的值。
Promise 表示一个异步操作的最终结果，与之进行交互的方式主要是 then 方法，该方法注册了两个回调函数，用于接收 promise 的终值或本 promise 不能执行的原因。

本规范详细列出了 then 方法的执行过程，所有遵循 Promises/A+ 规范实现的 promise 均可以本标准作为参照基础来实施 then 方法。因而本规范是十分稳定的。尽管 Promise/A+ 组织有时可能会修订本规范，但主要是为了处理一些特殊的边界情况，且这些改动都是微小且向下兼容的。如果我们要进行大规模不兼容的更新，我们一定会在事先进行谨慎地考虑、详尽的探讨和严格的测试。

从历史上说，本规范实际上是把之前 Promise/A 规范 中的建议明确成为了行为标准：我们一方面扩展了原有规范约定俗成的行为，一方面删减了原规范的一些特例情况和有问题的部分。

最后，核心的 Promises/A+ 规范不设计如何创建、解决和拒绝 promise，而是专注于提供一个通用的 then 方法。上述对于 promises 的操作方法将来在其他规范中可能会提及。

术语
Promise
promise 是一个拥有 then 方法的对象或函数，其行为符合本规范；

thenable
是一个定义了 then 方法的对象或函数，文中译作“拥有 then 方法”；

值（value）
指任何 JavaScript 的合法值（包括 undefined , thenable 和 promise）；

异常（exception）
是使用 throw 语句抛出的一个值。

据因（reason）
表示一个 promise 的拒绝原因。

要求
Promise 的状态
一个 Promise 的当前状态必须为以下三种状态中的一种：等待态（Pending）、执行态（Fulfilled）和拒绝态（Rejected）。

等待态（Pending）
处于等待态时，promise 需满足以下条件：

可以迁移至执行态或拒绝态
执行态（Fulfilled）
处于执行态时，promise 需满足以下条件：

不能迁移至其他任何状态
必须拥有一个不可变的终值
拒绝态（Rejected）
处于拒绝态时，promise 需满足以下条件：

不能迁移至其他任何状态
必须拥有一个不可变的据因
这里的不可变指的是恒等（即可用 === 判断相等），而不是意味着更深层次的不可变（译者注： 盖指当 value 或 reason 不是基本值时，只要求其引用地址相等，但属性值可被更改）。

Then 方法
一个 promise 必须提供一个 then 方法以访问其当前值、终值和据因。

promise 的 then 方法接受两个参数：

1
promise.then(onFulfilled, onRejected)
参数可选
onFulfilled 和 onRejected 都是可选参数。

如果 onFulfilled 不是函数，其必须被忽略
如果 onRejected 不是函数，其必须被忽略
onFulfilled 特性
如果 onFulfilled 是函数：

当 promise 执行结束后其必须被调用，其第一个参数为 promise 的终值
在 promise 执行结束前其不可被调用
其调用次数不可超过一次
onRejected 特性
如果 onRejected 是函数：

当 promise 被拒绝执行后其必须被调用，其第一个参数为 promise 的据因
在 promise 被拒绝执行前其不可被调用
其调用次数不可超过一次
调用时机
onFulfilled 和 onRejected 只有在执行环境堆栈仅包含平台代码时才可被调用 注1

调用要求
onFulfilled 和 onRejected 必须被作为函数调用（即没有 this 值）注2

多次调用
then 方法可以被同一个 promise 调用多次

当 promise 成功执行时，所有 onFulfilled 需按照其注册顺序依次回调
当 promise 被拒绝执行时，所有的 onRejected 需按照其注册顺序依次回调
返回
then 方法必须返回一个 promise 对象 注3

1
promise2 = promise1.then(onFulfilled, onRejected);
如果 onFulfilled 或者 onRejected 返回一个值 x ，则运行下面的 Promise 解决过程：[[Resolve]](promise2, x)
如果 onFulfilled 或者 onRejected 抛出一个异常 e ，则 promise2 必须拒绝执行，并返回拒因 e
如果 onFulfilled 不是函数且 promise1 成功执行， promise2 必须成功执行并返回相同的值
如果 onRejected 不是函数且 promise1 拒绝执行， promise2 必须拒绝执行并返回相同的据因
译者注： 理解上面的“返回”部分非常重要，即：不论 promise1 被 reject 还是被 resolve 时 promise2 都会被 resolve，只有出现异常时才会被 rejected。

Promise 解决过程
Promise 解决过程 是一个抽象的操作，其需输入一个 promise 和一个值，我们表示为 [[Resolve]](promise, x)，如果 x 有 then 方法且看上去像一个 Promise ，解决程序即尝试使 promise 接受 x 的状态；否则其用 x 的值来执行 promise 。

这种 thenable 的特性使得 Promise 的实现更具有通用性：只要其暴露出一个遵循 Promise/A+ 协议的 then 方法即可；这同时也使遵循 Promise/A+ 规范的实现可以与那些不太规范但可用的实现能良好共存。

运行 [[Resolve]](promise, x) 需遵循以下步骤：

x 与 promise 相等
如果 promise 和 x 指向同一对象，以 TypeError 为据因拒绝执行 promise

x 为 Promise
如果 x 为 Promise ，则使 promise 接受 x 的状态 注4：

如果 x 处于等待态， promise 需保持为等待态直至 x 被执行或拒绝
如果 x 处于执行态，用相同的值执行 promise
如果 x 处于拒绝态，用相同的据因拒绝 promise
x 为对象或函数
如果 x 为对象或者函数：

把 x.then 赋值给 then 注5
如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
如果 then 是函数，将 x 作为函数的作用域 this 调用之。传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise:
如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
如果调用 then 方法抛出了异常 e：
如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
否则以 e 为据因拒绝 promise
如果 then 不是函数，以 x 为参数执行 promise
如果 x 不为对象或者函数，以 x 为参数执行 promise
如果一个 promise 被一个循环的 thenable 链中的对象解决，而 [[Resolve]](promise, thenable) 的递归性质又使得其被再次调用，根据上述的算法将会陷入无限递归之中。算法虽不强制要求，但也鼓励施者检测这样的递归是否存在，若检测到存在则以一个可识别的 TypeError 为据因来拒绝 promise 注6。

注释
注1 这里的平台代码指的是引擎、环境以及 promise 的实施代码。实践中要确保 onFulfilled 和 onRejected 方法异步执行，且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。这个事件队列可以采用“宏任务（macro-task）”机制或者“微任务（micro-task）”机制来实现。由于 promise 的实施代码本身就是平台代码（译者注： 即都是 JavaScript），故代码自身在处理在处理程序时可能已经包含一个任务调度队列或『跳板』)。

译者注： 这里提及了 macrotask 和 microtask 两个概念，这表示异步任务的两种分类。在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。

两个类别的具体分类如下：

macro-task: script（整体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, Promises（这里指浏览器实现的原生 Promise）, Object.observe, MutationObserver

详见 stackoverflow 解答 或 这篇博客

注2 也就是说在 严格模式（strict） 中，函数 this 的值为 undefined ；在非严格模式中其为全局对象。

注3 代码实现在满足所有要求的情况下可以允许 promise2 === promise1 。每个实现都要文档说明其是否允许以及在何种条件下允许 promise2 === promise1 。

注4 总体来说，如果 x 符合当前实现，我们才认为它是真正的 promise 。这一规则允许那些特例实现接受符合已知要求的 Promises 状态。

注5 这步我们先是存储了一个指向 x.then 的引用，然后测试并调用该引用，以避免多次访问 x.then 属性。这种预防措施确保了该属性的一致性，因为其值可能在检索调用时被改变。

注6 实现不应该对 thenable 链的深度设限，并假定超出本限制的递归就是无限循环。只有真正的循环递归才应能导致 TypeError 异常；如果一条无限长的链上 thenable 均不相同，那么递归下去永远是正确的行为。
View Code

 

一点个人理解：
 

首先，promise不是说，是另外一个神奇的语法，从此就不需要使用回调了。而是通过一个工具，帮你实现了回调。

通过Promise，我们不需要在所有的异步函数都加一个回调函数作为参数，只需要返回一个Promise即可。

在指定函数执行后获得这个返回的Promise，只需要在这个Promise上面添加回调就可以了。

可以看出，此时添加回调是异步的，可以随时随地添加任意多个回调。

至于状态，既然所有回调只能被执行一次，肯定要有一个变量记录是否执行，并且不可变。

多个异步函数依赖执行，也只需要链式调用即可，不会再出现所谓的 “回调地狱”。

promise规范了回调的过程，规定每一个回调函数只能执行一次，同时可以抛出回调函数的异常。

promise是一个带有then函数的对象，所以有一个thenable的概念，即you dont know javaScript中有提到的鸭子类型。

所有有then函数的对象，promise都尝试将它当做promise。

promise所有函数都会返回一个promise，resolve，then，reject....

 

尝试实现一下Promise（程序员的事，怎么能叫抄……  : P

const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"

function MyPromise(executor) {

    let self = this

    self.value = undefined
    self.status = PENDING

    self.resolveCallback = []
    self.rejectCallback = []

    /**
     * 调用正常回调
     */
    function resolve(val) {
        if (self.status === PENDING) {
            // 回调要异步执行
            setTimeout(() => {
                self.status = FULFILLED
                self.value = val
                self.resolveCallback.forEach(cb => cb(val))
            })
        }
    }

    /**
     * 调用异常回调
     */
    function reject(err) {
        console.log('reject..')
        if (self.status === PENDING) {
            setTimeout(() => {
                self.status = REJECTED
                self.value = err
                self.rejectCallback.forEach(cb => cb(err))
            })
        }
    }

    try {
        // 函数是同步执行的
        executor(resolve, reject)
    } catch (err) {
        reject(err)
    }

}

/**
 * then 返回的也是一个 Promise
 * 就是把 Promise 的值作为回调函数的入参，然后把回调函数的返回值作为返回的新 Promise 的值
 */
MyPromise.prototype.then = function(onResolve, onReject) {
    let self = this
    onResolve = typeof onResolve === 'function' ? onResolve : v => v
    onReject = typeof onReject === 'function' ? onReject : e => { throw e }

    // console.log('then', this)
    // console.log('then', self.status)

    // 如果 promise 状态已经确定 直接调用回调
    if (self.status === FULFILLED) {
        return new MyPromise(function(resolve, reject) {
            setTimeout(() => {
                try {
                    let x = onResolve(self.value)
                    if (x instanceof MyPromise) {
                        // 如果返回值 x 是一个 Promise 将 resolve 放入其回调
                        x.then(resolve)
                    } else {
                        // 否则直接调用回调
                        resolve(x)
                    }
                } catch(e) {
                    reject(e)
                }
            })
            
        })
    }

    if (self.status === REJECTED) {
        return new MyPromise(function(resolve, reject) {
            setTimeout(() => {
                try {
                    let x = onReject(self.value)
                    if (x instanceof MyPromise) {
                        x.then(resolve)
                    } else {
                        resolve(x)
                    }
                } catch(e) {
                    reject(e)
                }
            })
        })
    }

    // 如果 Promise 的状态还有确定 就把回调放在回调队列中
    // 放入回调队列的函数 其实和上面两种情况是一样的
    if (self.status === PENDING) {
        return new MyPromise(function(resolve, reject) {
            self.resolveCallback.push((val) => {
                try {
                    let x = onResolve(val)
                    if (x instanceof MyPromise) {
                        x.then(resolve)
                    } else {
                        resolve(x)
                    }
                } catch(e) {
                    reject(e)
                }
            })
            self.rejectCallback.push((val) => {
                try {
                    let x = onReject(val)
                    if (x instanceof MyPromise) {
                        x.then(resolve)
                    } else {
                        resolve(x)
                    }
                } catch(e) {
                    reject(e)
                }
            })
        })
    }
}

// 这里之前用箭头函数这么写的 反思一下
// MyPromise.prototype.catch = (onReject) => MyPromise.prototype.then(null, onReject)
MyPromise.prototype.catch = function(onReject) {
    return this.then(null, onReject)
}

// 注意这些不是挂在原型的函数
MyPromise.race = function(promises) {
    return new MyPromise(function (resolve, reject) {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(resolve, reject)
        }
    })
}

MyPromise.all = function(promises) {
    return new MyPromise(function (resolve, reject) {
        let cnt = 0
        let result = []
        for (let i = 0; i < promises.length; i++) {
            promises[i].then((data) => {
                result[i] = data
                if (++cnt === promises.length) {
                    resolve(result)
                }
            }, function(error) {
                reject(error);
            })
        }
    })
}

MyPromise.resolve = function(value) {
    return new MyPromise(function(resolve) {
        resolve(value)
    })
}

MyPromise.reject = function(error) {
    return new MyPromise(function(resolve, reject) {
        reject(error)
    })
}


/** 测试 1 **/
function test() {
    return new MyPromise(function(resolve, reject) {
        setTimeout(() => {
            resolve(1)
        }, 100)
    })
}
console.log(2)
test().then((x) => {
    console.log(x)
    return new MyPromise(function(r) {
        r(3)
    })
}).then(x => {
    console.log(x)
})
console.log(4)

/** 测试 2 **/
t1 = new MyPromise(function(resolve, reject) {
    setTimeout(() => {
        resolve(1)
    }, 200)
})

let t2 = new MyPromise(function(resolve, reject) {
    setTimeout(() => {
        resolve(2)
    }, 100)
})

let t3 = new MyPromise(function(resolve, reject) {
    setTimeout(() => {
        resolve(3)
    }, 300)
})

MyPromise.all([t1, t2, t3]).then(res => {
    console.log(res)
}).catch(e => {
    console.log(e)
})

MyPromise.race([t1, t2, t3]).then(res => {
    console.log(res)
}).catch(e => {
    console.log(e)
})

 

 

 

 一个很简单的实现，注意一点是，所有回调都是异步实现的，别问为什么，这是规范定义的，上面代码是通过setTimeout，规范中是说macrotask 和 microtask，而ES6中是通过microtask实现的，反正呢，就是他的优先级会高于setTimeout，所以先执行。具体的，Event Loop什么的...可以查具体的资料。这里还实现race，all，resolve，reject等函数，逻辑也比较简单。

 

但是这个Promise是不对的，Promise一个最重要的规范都是针对then，Promise默认所有带有then的函数，都会被当做Promise，所以在上面代码中直接使用instanceof肯定不行。仔细阅读规范后重写。其实也很好写，照着规范一步一步就写下来了，但是有一个地方不是很明白，为什么x为等待状态时promise保持等待状态……

如果 x 为 Promise ，则使 promise 接受 x 的状态： 如果 x 处于等待态， promise 需保持为等待态直至 x 被执行或拒绝，如果 x 处于执行态，用相同的值执行 promise，如果 x 处于拒绝态，用相同的据因拒绝 promise

 

const PENDING = "pending"
const FULFILLED = "fulfilled"
const REJECTED = "rejected"

function MyPromise(executor) {

    let self = this

    self.value = undefined
    self.status = PENDING

    self.resolveCallback = []
    self.rejectCallback = []

    /**
     * 调用正常回调
     */
    function resolve(val) {
        if (self.status === PENDING) {
            // 回调要异步执行
            setTimeout(() => {
                self.status = FULFILLED
                self.value = val
                self.resolveCallback.forEach(cb => cb(val))
            })
        }
    }

    /**
     * 调用异常回调
     */
    function reject(err) {
        if (self.status === PENDING) {
            setTimeout(() => {
                self.status = REJECTED
                self.value = err
                self.rejectCallback.forEach(cb => cb(err))
            })
        }
    }

    try {
        // 函数是同步执行的
        executor(resolve, reject)
    } catch (err) {
        reject(err)
    }

}

function resolvePromise(promise, x, resolve, reject) {
    if (promise === x) {
        reject(new TypeError('循环引用'))
        return 
    }
    if (x instanceof MyPromise) {
        if (x.status === PENDING) {
            x.then(y => {
                resolvePromise(promise, y, resolve, reject)
            }, e => {
                reject(e)
            })
        } else {
            x.then(resolve, reject)
        }
    } else if (x != null && (typeof x === 'object' || typeof x === 'function')) {
        let called = false
        try {
            let then = x.then
            if (typeof then === 'function') {
                then.call(x, function(y) {
                    if (!called) {
                        called = true
                        resolvePromise(promise, y, resolve, reject)
                    }
                }, function(r) {
                    if (!called) {
                        called = true
                        reject(r)
                    }
                })
            } else {
                resolve(x)
            }
        } catch (e) {
            if (!called) {
                reject(e)
            }
        }
    } else {
        resolve(x)
    }
}

/**
 * then 返回的也是一个 Promise
 * 就是把 Promise 的值作为回调函数的入参，然后把回调函数的返回值作为返回的新 Promise 的值
 */
MyPromise.prototype.then = function(onResolve, onReject) {
    let self = this
    onResolve = typeof onResolve === 'function' ? onResolve : v => v
    onReject = typeof onReject === 'function' ? onReject : e => { throw e }
    let promise;

    // 如果 promise 状态已经确定 直接调用回调
    if (self.status === FULFILLED) {
        return promise = new MyPromise(function(resolve, reject) {
            setTimeout(() => {
                try {
                    let x = onResolve(self.value)
                    // 尝试在这里使用this 但其实并不对... 
                    // 这里是new Promise(fn) fn在44行执行 this 是 global...
                    console.log('>>')
                    console.log(this)
                    resolvePromise(promise, x, resolve, reject)
                } catch(e) {
                    reject(e)
                }
            })
        })
    }

    if (self.status === REJECTED) {
        return promise = new MyPromise((resolve, reject) => {
            setTimeout(() => {
                try {
                    let x = onReject(self.value)
                    resolvePromise(promise, x, resolve, reject)
                } catch(e) {
                    reject(e)
                }
            })
        })
    }

    // 如果 Promise 的状态还有确定 就把回调放在回调队列中
    // 放入回调队列的函数 其实和上面两种情况是一样的
    if (self.status === PENDING) {
        return promise = new MyPromise((resolve, reject) => {
            self.resolveCallback.push((val) => {
                try {
                    let x = onResolve(val)
                    resolvePromise(promise, x, resolve, reject)
                } catch(e) {
                    reject(e)
                }
            })
            self.rejectCallback.push((val) => {
                try {
                    let x = onReject(val)
                    resolvePromise(promise, x, resolve, reject)
                } catch(e) {
                    reject(e)
                }
            })
        })
    }
}

// 这里之前用箭头函数这么写的 反思一下
// MyPromise.prototype.catch = (onReject) => MyPromise.prototype.then(null, onReject)
MyPromise.prototype.catch = function(onReject) {
    return this.then(null, onReject)
}

// 注意这些不是挂在原型的函数
MyPromise.race = function(promises) {
    return new MyPromise(function (resolve, reject) {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(resolve, reject)
        }
    })
}

MyPromise.all = function(promises) {
    return new MyPromise(function (resolve, reject) {
        let cnt = 0
        let result = []
        for (let i = 0; i < promises.length; i++) {
            promises[i].then((data) => {
                result[i] = data
                if (++cnt === promises.length) {
                    resolve(result)
                }
            }, function(error) {
                reject(error);
            })
        }
    })
}

MyPromise.resolve = function(value) {
    return new MyPromise(function(resolve) {
        resolve(value)
    })
}

MyPromise.reject = function(error) {
    return new MyPromise(function(resolve, reject) {
        reject(error)
    })
}

MyPromise.deferred = function() {
    let defer = {};
    defer.promise = new MyPromise((resolve, reject) => {
        defer.resolve = resolve;
        defer.reject = reject;
    });
    return defer;
}
try {
    module.exports = MyPromise
} catch (e) {}

 

测试代码：

npm i -g promises-aplus-tests
promises-aplus-tests mypromise.js

 

测试结果:  872 passing (16s) 

推荐阅读