ES6已经普及很多年了，也早已过了callback时代。公司的要求也不再是停留在promise的使用上了。本文就带大家一起从零开始写自己的 Promise,剖析其内在原理。
该文章始发于公众号【聪明可爱小轩轩】
地址：https://mp.weixin.qq.com/s/Rc1-DYx9SIyQQ5dAHX2whA
1、promise 基本结构
1.1 状态
我们都知道promise 有三种状态
- Pending
- Resolved
- Rejected
并且promise 的状态是不可逆的
1.2 参数
每一个 Promise 都有两个 函数参数，分别是
- resolved 成功状态
- rejected 失败状态
1.3 方法
通过查看 Promise 我们可以发现 resolve，reject，all，race是静态方法，then，catch，finally是实例方法。
通过以上的分析，我们 Promise 基本结构已经明朗了
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
class Promise {
constructor(executor) {
this.status = PENDING
let resolve = () => {
}
let = reject = () => {
}
executor(resolve,reject)
}
then () {
}
catch () {
}
finally () {
}
static resolve () {
}
static reject () {
}
static all () {
}
static race() {
}
}
我们 new 一个promise的时候都是直接执行，这个执行的函数就是 executor。而他有两个函数参数，分别是resolve，reject。而又因为我们状态是不可逆的，所以只能是在PENDING 状态下执行。
对于promise 而言，throw也应该被监听到（reject），所以我们需要在执行 executor的时候，加一个 try catch。
所以我们将constructor 里面的代码做了如下的改变
constructor(executor) {
this.status = PENDING // 默认是pending状态
this.value = undefined
this.reason = undefined
let resolve = (value) => {
if (this.status === PENDING) {
this.value = value
this.status === RESOLVED
}
}
let = reject = (reason) => {
if (this.status === PENDING) {
this.reason = reason
this.status === REJECTED
}
}
try {
executor(resolve,reject)
} catch(e) {
reject(this.reason)
}
}
2、then 方法
then方法会接收两个方法，onfulfilled, onrejected。而当status状态被改变后，onfulfilled, onrejected才应该被执行。同时onfulfilled,onrejected 是 可选参数
then (onfulfilled,onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : val => val
onrejected = typeof onrejected === 'function' ? onrejected : err => { throw err }
// 成功
if (this.status === RESOLVED) {
onfulfilled(this.value)
}
// 失败
if (this.status === REJECTED) {
onrejected(this.reason)
}
}
这个时候我们的promise已经完成了一班。我们可以执行promise函数，可以调用他的then方法，并且在then中也可以拿到他的值。非常完美。
但是这远远不够，接下来就让我们思考一下then的特性，让我们一起完善他！！！
- promise中支持异步
- 我们每一次调用promise都会返回一个新的promise
2.1 promise中支持异步
也就是说，异步情况下，执行then的时候，状态依旧是pending，
又因为，我们会有如下的调用情况
let p= new Promise(resolve => {
setTimeout(() => {
resolve()
},1000)
})
p.then((data) => { console.log(data)})
p.then((data) => { console.log(data)})
p.then((data) => { console.log(data)})
所以，异步情况下，我们需要一个数组，来存储我们的执行函数（订阅），
if (this.status === PENDING) {
// 订阅
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
// todo...
let x = onfulfilled(this.value)
resolvePromise(promise2,x,resolve,reject)
} catch(e) {
reject(e)
}
}, 0);
})
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
// todo...
let x = onrejected(this.reason)
resolvePromise(promise2,x,resolve,reject)
} catch(e) {
reject(e)
}
}, 0);
})
}
异步时间到了之后，我们就需呀继续这个数组（发布）
constructor {
// 成功/失败 回调数组
this.onResolvedCallbacks = []
this.onRejectedCallbacks = []
// 成功函数
let resolve = (value) => {
if (this.status === PENDING) {
this.value = value
this.status = RESOLVED
// 发布
this.onResolvedCallbacks.forEach(fn => fn())
}
}
// reject 同理
}
2.2 then 函数返回新的promise
为了达成链式，我们需要在hen里返回一个promise。类似于递归。
then() {
let promise2 = new Promise((resolve,reject) => {
// code...
}
return promise2
}
同时呢，我们的then还有这样一个特性。遇到非promise类型的时候是直接resolve返回的，遇到promise类型的，会进行判断。因为我们的then的四个运行地方都会用到这个函数。我们将其提取出来。
/**
* promise2 与 x 不可相同
* @param {*} promise2
* @param {*} x
* @param {*} resolve
* @param {*} reject
*/
const resolvePromise = (promise2, x, resolve, reject) => {
if(promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
if (typeof x === 'object' && x !== null || typeof x === 'function') {
let called;
try {
let then = x.then
if (typeof then === 'function') {
then.call(x, y => {
if (called) { return }
called = true
resolvePromise(promise2, y, resolve, reject)
}, r => {
if (called) { return }
called = true
reject(r)
})
} else {
// {then: 1}
resolve(x)
}
} catch(e) {
if (called) { return }
called = true
reject(e)
}
} else {
resolve(x)
}
}
这一块的代码是按照 Promise/A+规范写的。也就不需要仔细说了。
这个时候then函数变成了如下的状态
then() {
let promise2 = new Promise((resolve,reject) => {
// 成功
if (this.status === RESOLVED) {
let x =onfulfilled(this.value)
resolvePromise(promise2,x,resolve,reject)
}
// code...
}
return promise2
}
聪明的你肯定发现了promise2本生就是一个异步的，我们调用resolvePromise(promise2,x,resolve,reject) 的时候，promise2是空。那么我们也将其变成异步即可。同时为了防止这一步有错，加一个try catch
then() {
let promise2 = new Promise((resolve,reject) => {
// 成功
if (this.status === RESOLVED) {
setTimeout(() => {
try {
let x =onfulfilled(this.value)
resolvePromise(promise2,x,resolve,reject)
} catch(e) {
reject(e)
}
},0)
}
// code...
}
return promise2
}
自此，我们的then方法写完。
3、resolve() ,reject () 方法
我们的resolve，reject会将传入的值，返回一个新的promise
static resolve(value) {
return new Promise(resolve => resolve(value))
}
static reject (reason) {
return new Promise(reject => reject(reason))
}
但是如果传入的值本书就是promise类型的，那么直接返回即可。
static resolve(value) {
if (value instanceof Promise) return value
return new Promise(resolve => resolve(value))
}
static reject (reason) {
if (reason instanceof Promise) return reason
return new Promise(reject => reject(reason))
}
4、all(),race() 方法
4.1 all()
所有的传入一个数组，每个都正常返回，即返回resolve，反之reject。同时因为数组中存在异步执行的情况，我们需要写一个promiseAdd函数来计算当前promise完成进度。
static all (values) {
return new Promise((resolve,reject) => {
const arr = []
let index = 0 // 解决多个异步的并发问题，要使用计数器
function promiseAdd(key,value) {
arr[key] = value
if (++index === values.length) {
resolve(arr)
}
}
for(let i = 0 ;i < values.length;i++) {
let current = values[i]
if (reason instanceof Promise) {
current.then((data) => {
promiseAdd(i,data)
},reject)
} else {
promiseAdd(i,current)
}
}
})
}
4.2 race()
只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
static race(values) {
return new Promise((resolve, reject) => {
for (let value of values) {
this.resolve(value).then(res => {
resolve(res)
}, err => {
reject(err)
})
}
})
}
5、catch() 方法
catch就相当于调用了then方法，走的是onrejected状态
catch(onrejected) {
return this.this.then(undefined, onrejected)
}
6、finally 方法
无论成功还是失败，均会执行。同时 finally() 并不是结束，他依旧可以返回一个promise
finally(cb) {
return this.then(data => {
return Promise.resolve(cb()).then(() => data)
},err => {
return Promise.resolve(cb()).then(() => { throw err })
})
}
我将源码放到了公众号，关注公众号“聪明可爱小轩轩”，回复promise 领取。
