promise详解 ： 实现promise（附实现代码）
promise then 的特点 ：
- then 函数的返回值是一个 promise， 可以继续调用 then 函数
- 回调函数 resolve 和 reject 的参数 value /reason, 可以传递给 then函数的回调函数， 最终 resolve(res) 的res 传递给了 then(onFulfilled(v)=>{},onrejected(e)=>{}) 中的 v， 而 reject(err) 中的 err 传递给了其中的 e
then 函数的回调函数的返回值可以分成 ：
- 普通值（字符串、对象、函数、undefined等）, 只要不是 promise 或者 错误， 都可以看做是普通值
- Promise 的实例
- 错误
根据 then 函数的回调函数的返回值， 确定下一次链式调用的方式
- then 函数的回调函数的返回值 ： 即 onFulfilled 函数的返回值 ， 或者 onRejected 的函数的返回值
1. then 函数的回调函数的返回值是普通值
- then 函数的返回值可以是 onFulFilled 函数的返回值， 也可以是 onRejected 函数的返回值， 若是不用 return 指定返回值， 则默认返回undefined。 如果该返回值是普通的值， 则下一次链式调用（即调用then）进入 onFulfilled 回调函数， 并且将该返回值作为 onFulfilled 回调函数的参数
const p = new Promise((resolve, reject)=> {
setTimeout(()=> {
resolve('ok1')
},1000)
})
p.then(res=> {
return 'ok2'
}).then(res=> {
console.log(res)
}).then(res=> {
console.log(res)
})
// 输出：
// ok2
// undefined
- 对于 onReject 返回普通类型的值， 也按照上述规则：
const p = new Promise((resolve, reject)=> {
setTimeout(()=> {
reject('not ok1')
},1000)
})
p.then(res=> {
return 'ok2'
},(e)=> {
return 'not ok2'
}).then(res=> {
console.log(res)
},(e)=> {
console.log(e)
}).then(res=> {
console.log(res)
})
// 输出 ：
// not ok2
// undefined
- 在 onRejected 回调函数中不用return指定返回值， 在下一次链式调用的时候， 也会 进入 resolve 函数， 只有发成错误才可以进入下个链式调用的 Onrejected 回调函数：
const p = new Promise((resolve, reject)=> {
setTimeout(()=> {
reject('not ok1')
},1000)
})
p.then(res=> {
return 'ok2'
},(e)=> {
console.log(e)
}).then(res=> {
console.log(res)
},(e)=> {
console.log(e)
}).then(res=> {
throw new Error('Error')
}, e=> {
console.log(e)
}).then(res=> {
console.log(res)
},e=> {
console.log(e)
})
// not ok1
// undefined
// Error: Error
2. then 函数的回调函数的返回值是 Promise 的实例， 即一个新的 promise
- 下一次链式调用会采用这个被返回的 promise 的状态， 如果这个 promise 的状态是 fulfilled 的则， 下次链式调用进入 onFulfilled 函数， 如果这个promise 的状态是 rejected， 则下次链式调用进入 onRejected 函数
const p = new Promise((resolve, reject)=> {
setTimeout(()=> {
resolve('ok1')
},1000)
})
p.then(res=> {
return new Promise((resolve, reject)=> {
console.log(res)
resolve('ok2')
})
},(e)=> {
console.log(e, 'error1')
}).then((res)=> {
console.log(res)
return new Promise((reolve,reject)=> {
reject('notok1')
})
},e=> {
console.log(e, 'error2')
}).then(res=> {
console.log(res)
}, e=> {
console.log(e, 'error3')
})
// ok1
// ok2
// notok1 error3
3. then 函数的回调函数中发生错误
如果错误没有被就近处理， 则会沿着链式调用的链条一直向下传递, 直到找到一个错误处理的 onRejected 回调函数， 再根据 onRejected 的返回值确定后边的链式调用的执行情况。 跑错之后， onRejected 回调函数之前的所有代码， 都无法被执行， 参考下例：
const p = new Promise((resolve, reject)=> {
setTimeout(()=> {
reject('notok1')
},1000)
})
p.then(res=> {
console.log(res)
}).then(res=> [
console.log(res)
]).then(res=> {
console.log(res)
},e=> {
console.log(e)
return 'caught error'
}).then(res=>{
console.log('success :' , res)
},e=>console.log(e))
// 输出
// notok1
// success : caught error
实现代码如下
// promise 的三种状态， 等待、完成（成功）、拒绝（失败）
// 也可以根据promise的状态划分成 已决和未决两种状态， 已决 ： FULFILLED、REJECTED， 未决： PENDING
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'
const isPromise = p => typeof p.then === "function"
// 解析 x 与 promise2 , 最终确定 promise2 的状态
const resolvePromise = (promise2, x, resolve, reject) => {
if (promise2 === x) return reject(new TypeError('循环调用了同一个未决的 promise'))
// 定义一个哨兵变量， 防止 promise 的状态在已决后发生改变
let isCalled
if (typeof x === 'object' && x !== null || typeof x === 'function') {
try {
// then = x.then 将初次调用 x.then 时，取到的值缓存
// 而多次调用 x.then 可能发生属性读取错误（ 虽然一般不会）
// 所以此处直接调用 then.call， 而不是再次去读取 x.then
const then = x.then
// 可以判断 x 为一个promise， 即 resolve(new Promise()) 这种情况
if ('function' === typeof then) {
// x 是一个 promise， promise2 的状态最终取决有 x 这个 promise 的状态
// 所以要调用属于 x 的 then 函数， 才会进入 onFulfilled 或者 onRjected， 得到下一次链式调用中的回调函数的返回值
then.call(x, y => {
if (isCalled) return
isCalled = true
resolvePromise(promise2, y, resolve, reject)
}, e => {
if (isCalled) return
isCalled = true
reject(e)
})
} else {
// x 不是一个promise ， 可能是类似这种有 then 属性的普通对象 x = {then : '100'}
// 直接 resolve， 将状态改成 FULFILLED
resolve(x)
}
} catch (error) {
if (isCalled) return
isCalled = true
reject(error)
}
} else {
// 排除掉 x 为一个 promise 的可能性， 直接resolve(x)
resolve(x)
}
}
// Promise 类
class Promise {
constructor(executor) {
// promise 初始状态为 PENDING
this.status = PENDING
this.value = null
this.reason = null
this.onFulfilledCallbacks = []
this.onRejectedCallbacks = []
const resolve = (value) => {
// 递归解析 resolve 的参数， 直到参数不为 promise 的实例
if(value instanceof Promise) {
return value.then(resolve,reject)
}
if (this.status === PENDING) {
this.status = FULFILLED
this.value = value
this.onFulfilledCallbacks.forEach(fn => fn())
}
}
const reject = (reason) => {
if (this.status === PENDING) {
this.status = REJECTED
this.reason = reason
this.onRejectedCallbacks.forEach(fn => fn())
}
}
// 立即执行 executor， 捕获错误后直接变成拒绝态
try {
executor(resolve, reject)
} catch (e) {
reject(e)
}
}
static resolve (value) {
return new Promise(resolve => resolve(value))
}
static reject(reason) {
return new Promise((resolve,reject)=> reject(reason))
}
static all(promises) {
return new Promise((resolve, reject)=> {
let arr = [], index = 0
const processData = (i, data)=> {
arr[i] = data
if(++index >= promises.length) {
resolve(arr)
}
}
for(let i =0 ; i< promises.length; i++) {
if(isPromise(promises[i])) {
promises[i].then(data=> {
processData(i,data)
},reason=> {
reject(reason)
})
}else {
processData(i, promises[i])
}
}
})
}
static race(promises) {
return new Promise((resolve, reject)=> {
for(let i = 0; i < promises.length; i++) {
if(isPromise(promises[i])) {
promises[i].then(resolve,reject)
}else {
resolve(promises[i])
}
}
})
}
// then 函数返回一个新的 Promise 实例， 实现链式调用
// 这个新的 promise 会采用当前 promise 的状态
then(onFulfilled, onRejected) {
// 如果 onFulfilled 不是一个函数， 则将 resolve 的参数传递给下个then 函数的 onFulfilled 作为参数
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value
// 如果 onRjected 不是一个函数， 则将错误抛出， 传递到下一个 then 函数的 onRjected 作为参数
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err }
const _this = this
const promise2 = new Promise((resolve, reject) => {
// 如果当前实例状态是 FULFILLED， 则调用成功的回调函数， 即 then(onFulfilled, onRejected) 中的 onFulfilled
// 然后将 onFulfilled 的返回值， 继续用 resolvePromise 解析，直到解析到一个不为 promise 的普通值， 或者解析出错
const getFulfilled = () => {
const x = onFulfilled(_this.value)
resolvePromise(promise2, x, resolve, reject)
}
const getRejected = () => {
const x = onRejected(_this.reason)
resolvePromise(promise2, x, resolve, reject)
}
// 此处设置 promise2 的状态， 由于此段代码包含在 promise2 实例化的过程中，因此， 无法获取 promise2 的实例
// 故而将 resolvePromise 函数 （解析 promise2 和 当前实例的 then 函数的回调函数的返回值 ）放在一个延时定时器中
// 使得执行 resolvePromise 的任务放在任务队列的最后, 从而确保 先实例化 promise2 成功
// 然后根据当前实例的状态, 得到当前实例回调函数的返回值 x , 并将 x 传入 resolvePromise 进行统一解析处理
const getAsyncTaskResult = f => {
setTimeout(() => {
try {
f()
} catch (error) {
reject(error)
}
}, 0);
}
// 根据当前实例的状态制定不同的策略 ：
// 1. 当前实例为 FULFILLED 状态时，则直接调用 onFulfilled , 并将结果交由 resolvePromise 处理
// 2. 当前实例为 REJECTED 状态时，则直接调用 onRejected , 并将结果交由 resolvePromise 处理
// 3.1 当前实例为 PENDING 状态时, 则将 onRjected 和 onFulfilled 的调用缓存在一个任务队列中
// 3.2 然后等待当前实例成功(resolve)或者失败(reject)
// 3.3 由于在构造函数中订阅了 resolve 和 reject， 所以当前实例一旦发布状态， 对应的任务队列将会按照序被调用
const stratagies = {
PENDING() {
_this.onFulfilledCallbacks.push(() => getAsyncTaskResult(getFulfilled))
_this.onRejectedCallbacks.push(() => getAsyncTaskResult(getRejected))
},
FULFILLED() {
getAsyncTaskResult(getFulfilled)
},
REJECTED() {
getAsyncTaskResult(getRejected)
},
}
Reflect.has(stratagies, this.status) && stratagies[this.status]()
})
return promise2
}
// catch 是一个只有失败回调的then函数
catch(errorCallback) {
this.then(null, errorCallback)
}
// finally
// 不管上一个 promise 成功还是失败， finally 的回调函数都会执行
// 不改变 then 函数两个回调函数的参数， 仍然用的是上一次链式调用的最终结果
finally(callback) {
return this.then(value=> {
return Promise.resolve( allback()).then(()=> value)
}, reason=> {
return Promise.resolve(callback()).then(()=> {throw reason})
})
}
}
// 测试代码
// 安装 ： npm i promises-aplus-tests -g
// 运行 ： promises-aplus-tests filename
Promise.defer = Promise.deferred = function () {
const dfd = {}
dfd.promise = new Promise((resolve, reject) => {
dfd.resolve = resolve
dfd.reject = reject
})
return dfd
}
module.exports = Promise
