先看一下promise的基本用法
const promise = new Promise((resolve, reject)=>{
resolve('data')
})
promise.then((res)=>{
console.log(res)
}, (err)=>{
console.log(err)
})
初步实现
由此可以看出
1、promise函数接受一个参数executor，函数executor接受两个入参，分别是resolve，reject；
2、promise实例有一个then方法，then方法接受两个参数，分别是函数onfulfilled，onrejected；
function Promise (executor) {
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
}
const reject = reason => {
}
executor(resolve, reject)
}
Promise.prototype.then = function (onfulfilled, onrejected) {
//此处为onfulfilled、onrejected 设一个默认值
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
}
当resolve执行的时候，会获取到一个值value，该值会传递给onfulfilled，所以会有一个value的变量存储resolve传进来的值，同理有一个变量reason存储reject传进来的值
function Promise (executor) {
this.value = null
this.reason = null
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
this.value = value
}
const reject = reason => {
this.reason = reason
}
executor(resolve, reject)
}
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
onfulfilled(this.value)
onrejected(this.reason)
}
状态判断
该方法已经可以实现最开始的那个例子，但是有一个问题，如果此时我们同同时执行resolev, reject时，then方法中也会同时执行onfulfilled，onrejected；
const promise = new Promise((resolve, reject)=>{
resolve('data')
reject('error')
})
promise.then((res)=>{
console.log(res)
}, (err)=>{
console.log(err)
})
所以此处需要增加一个状态判断，当状态status由pending变为fulfilled后，onrejected就不再执行，实现如下：
function Promise (executor) {
this.value = null
this.reason = null
this.status = 'pending'
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
if (this.status === 'pending') {
this.value = value
this.status = 'fulfilled'
}
}
const reject = reason => {
if (this.status === 'pending') {
this.reason = reason
this.status = 'rejected'
}
}
executor(resolve, reject)
}
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
if (this.status === 'fulfilled') {
onfulfilled(this.value)
}
if (this.status === 'rejected') {
onrejected(this.reason)
}
}
异步实现
该版本只能执行同步代码，异步代码却不起作用
const promise = new Promise((resolve, reject)=>{
setTimeout(()=>{
resolve('data')
},100)
})
promise.then((res)=>{
console.log(res)
}, (err)=>{
console.log(err)
})
这段代码执行的时候，控制台没有任何打印，promise是用来处理异步任务的，所以我们要将Promise改进一下，那么如何改进呢？
改变then方法内onfulfilled、onrejected的执行时机，不能在then方法内立即执行，而是要等到resove执行的时候再执行，所以可以将onfulfilled、onrejected挂载到promise实例上，在resove中执行，实现如下：
function Promise (executor) {
this.value = null
this.reason = null
this.status = 'pending'
this.onfulfilled = Function.prototype
this.onrejected = Function.prototype
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
if (this.status === 'pending') {
this.value = value
this.status = 'fulfilled'
this.onfulfilled(this.value)
}
}
const reject = reason => {
if (this.status === 'pending') {
this.reason = reason
this.status = 'rejected'
this.onrejected(this.reason)
}
}
executor(resolve, reject)
}
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
if (this.status === 'fulfilled') {
onfulfilled(this.value)
}
if (this.status === 'rejected') {
onrejected(this.reason)
}
if (this.status === 'pending') {
this.onfulfilled = onfulfilled
this.onrejected = onrejected
}
}
下面看一下这个例子输出结果
const promise = new Promise((resolve, reject)=>{
resolve('data')
})
promise.then((res)=>{
console.log(res)
})
console.log(1)
上面代码中，先打印'data'，后打印1；这是错误的，promise执行时机要在同步任务执行完毕后，再执行promise的代码，所以我们要对代码进行改造，使其先输出1，后输出‘data’
function Promise (executor) {
this.value = null
this.reason = null
this.status = 'pending'
this.onfulfilled = Function.prototype
this.onrejected = Function.prototype
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
if (this.status === 'pending') {
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(() => {
this.value = value
this.status = 'fulfilled'
this.onfulfilled(this.value)
})
}
}
const reject = reason => {
if (this.status === 'pending') {
setTimeout(() => {
this.reason = reason
this.status = 'rejected'
this.onrejected(this.reason)
})
}
}
executor(resolve, reject)
}
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
if (this.status === 'fulfilled') {
onfulfilled(this.value)
}
if (this.status === 'rejected') {
onrejected(this.reason)
}
if (this.status === 'pending') {
this.onfulfilled = onfulfilled
this.onrejected = onrejected
}
}
使用setTimeout使其在同步代码执行完成后执行；下面再看一个例子
const promise = new Promise((resolve, reject)=>{
resolve('data')
})
promise.then((res)=>{
console.log(res)
})
promise.then((res)=>{
console.log(res)
})
此时只打印了一次‘data’,理论上应该打印两次data；出现该问题的原因是resolve在执行的时候，只执行了一次onfulfilled，此时可能会有多个onfulfilled待执行，所有挂载在实例上的onfulfilled应该是一个数组，resove的时候，循环执行数组内的所有函数
function Promise (executor) {
this.value = null
this.reason = null
this.status = 'pending'
this.onfulfilledArry = []
this.onrejectedArry = []
// 此处使用箭头函数是要将resolve内的this绑定在promise实例上
const resolve = value => {
if (this.status === 'pending') {
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(() => {
this.value = value
this.status = 'fulfilled'
this.onfulfilledArry.forEach(func => func(this.value))
})
}
}
const reject = reason => {
if (this.status === 'pending') {
setTimeout(() => {
this.reason = reason
this.status = 'rejected'
this.onrejectedArry.forEach(func => func(this.reason))
})
}
}
try {
executor(resolve, reject)
} catch (e) {
reject(e)
}
}
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
if (this.status === 'fulfilled') {
onfulfilled(this.value)
}
if (this.status === 'rejected') {
onrejected(this.reason)
}
if (this.status === 'pending') {
this.onfulfilledArry.push(onfulfilled)
this.onrejectedArry.push(onrejected)
}
}
上面代码中已经初步实现了一个promise，增加了错误捕获，捕获到的错误直接执行reject
promise的链式调用
promise的then会返回一个新的promise2，并将当前onfulfilled的执行结果作为参数传递给promise2的resolve，像下面这样
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
let promise2
if (this.status === 'fulfilled') {
return promise2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
try {
let result = onfulfilled(this.value)
resolve(result)
} catch (e) {
reject(e)
}
})
})
}
if (this.status === 'rejected') {
onrejected(this.reason)
}
if (this.status === 'pending') {
this.onfulfilledArry.push(onfulfilled)
this.onrejectedArry.push(onrejected)
}
}
同理，status为rejected、pending也做相同操作，pending时，推入数组内的是一个函数，该函数执行时，执行promise2的resolve，then方法补充后，代码如下：
Promise.prototype.then = function (onfulfilled, onrejected) {
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
let promise2
if (this.status === 'fulfilled') {
return promise2 = new Promise((resolve, reject)=>{
setTimeout(()=>{
try {
let result = onfulfilled(this.value)
resolve(result)
} catch (e) {
reject(e)
}
})
})
}
if (this.status === 'rejected') {
return promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let result = onrejected(this.reason)
resolve(result)
} catch(e) {
reject(e)
}
})
})
}
if (this.status === 'pending') {
return promise2 = new Promise((resolve, reject) => {
// 此时onfulfilled函数不会立即执行，所以不需要使用setTimeout做异步处理
this.onfulfilledArry.push(value => {
try {
let result = onfulfilled(value)
resolve(result)
} catch (e) {
reject(e)
}
})
this.onrejectedArry.push(reason => {
try {
let result = onrejected(reason)
resolve(result)
} catch (e) {
reject(e)
}
})
})
}
}
此时运行下面代码，可正常执行，打印:99data
const promise = new Promise((resolve, reject)=>{
resolve('data')
})
promise.then((res)=>{
return new Promise((resolve, reject) => {
setTimeout(()=>{
resolve('99' + res)
}, 2000)
})
}).then((res)=>{
console.log(res)
})
此时promsie链式调用已基本完成，如果我们的第一个then方法中return的不是我们自己定义的Promise实例，而是官方定义的Promise实例，这个时候仅仅使用resolve(result)是处理不了很多种情况的，这个时候需要抽离出一个resolvePromise方法，将返回的promise2， result , promise2的resolve，promise2的reject作为参数传进去，在resolvePromise统一处理；类似这样
....
try {
let result = onfulfilled(value)
resolvePromise(promise2, data, resolve, reject)
} catch (e) {
reject(e)
}
....
实现resolvePromise的完整方法如下：
const resolvePromise = (promise2, result, resolve, reject) => {
// 当result与promise2相同时
if (result === promise2) {
reject(new TypeError('error circular'))
return
}
// 是否已经执行过onfulfilled || onrejected
let consumed = false
let thenabel
if (result instanceof Promise) {
if (result.status === 'pending') {
result.then(function (data) {
resolvePromise(promise2, data, resolve, reject)
}, reject)
} else {
result.then(resolve, reject)
}
return
}
// 此时处理疑似promise的情况
let isComplexResult = target => (typeof target === 'function' || typeof target === 'object') && target !== null
if(isComplexResult(result)) {
try {
thenabel = result.then
// 判断是否是promise类型
if (typeof thenabel === 'function') {
thenabel.call(result, function (data) {
if (consumed) {
return
}
consumed = true
return resolvePromise(promise2, data, resolve, reject)
}, function (error) {
if (consumed) {
return
}
consumed = true
return reject(result)
})
}
} catch (e) {
if (consumed) {
return
}
consumed = true
return reject(e)
}
} else {
resolve(result)
}
}
到这里，promise已经基本完成，补充几个静态方法后，完整代码如下：
function Promise (executor) {
this.status = 'pending'
this.value = null
this.reason = null
this.onfulfilledArry = []
this.onrejectedArry = []
const resolve = value => {
// 如果传递进来的是一个promise类型
if (value instanceof Promise) {
return value.then(resolve, reject)
}
setTimeout(() => {
if (this.status === 'pending') {
this.value = value
this.status = 'fulfilled'
this.onfulfilledArry.forEach(item => item(this.value))
}
})
}
const reject = reason => {
setTimeout(() => {
if (this.status === 'pending') {
this.reason = reason
this.status = 'rejected'
this.onrejectedArry.forEach(item => item(this.reason))
}
})
}
try {
executor(resolve, reject)
} catch (e) {
reject(e)
}
}
const resolvePromise = (promise2, result, resolve, reject) => {
// 当result与promise2相同时
if (result === promise2) {
reject(new TypeError('error circular'))
return
}
// 是否已经执行过onfulfilled || onrejected
let consumed = false
let thenabel
if (result instanceof Promise) {
if (result.status === 'pending') {
result.then(function (data) {
resolvePromise(promise2, data, resolve, reject)
}, reject)
} else {
result.then(resolve, reject)
}
return
}
// 此时处理疑似promise的情况
let isComplexResult = target => (typeof target === 'function' || typeof target === 'object') && target !== null
if(isComplexResult(result)) {
try {
thenabel = result.then
// 判断是否是promise类型
if (typeof thenabel === 'function') {
thenabel.call(result, function (data) {
if (consumed) {
return
}
consumed = true
return resolvePromise(promise2, data, resolve, reject)
}, function (error) {
if (consumed) {
return
}
consumed = true
return reject(result)
})
}
} catch (e) {
if (consumed) {
return
}
consumed = true
return reject(e)
}
} else {
resolve(result)
}
}
Promise.prototype.then = function (onfulfilled, onrejected) {
// promise穿透实现 promsie.then(null).then(res=>res)
onfulfilled = typeof onfulfilled === 'function' ? onfulfilled : data => data
onrejected = typeof onrejected === 'function' ? onrejected : error => {throw error}
let promise2
if (this.status === 'fulfilled') {
return promise2 = new Promsie((resolve, reject) => {
setTimeout(() => {
try {
let result = onfulfilled(this.value)
resolvePromise(promise2, result, resolve, reject)
} catch(e) {
reject(e)
}
})
})
}
if (this.status === 'rejected') {
return promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
try {
let result = onrejected(this.reason)
resolvePromise(promise2, result, resolve, reject)
} catch (e) {
reject(e)
}
})
})
}
if (this.status === 'pending') {
return promise2 = new Promise((resolve, reject) => {
this.onfulfilledArry.push(value => {
try {
let result = onfulfilled(value)
resolvePromise(promise2, result, resolve, reject)
} catch (e) {
reject(e)
}
})
this.onrejectedArry.push(reason => {
try {
let result = onrejected(reason)
resolvePromise(promise2, result, resolve, reject)
}catch (e) {
reject(e)
}
})
})
}
}
// catch方法
Promise.prototype.catch = function (catchFunc) {
return this.then(null, catchFunc)
}
// resove方法
Promise.resolve = function (value) {
return new Promise((resolve, reject)=>{
resolve(value)
})
}
// reject方法
Promise.reject = function (reason) {
return new Promise ((resolve, reject)=>{
reject(value)
})
}
// all方法
Promise.all = function (promiseArry) {
if (!Array.isArray(promiseArry)) {
throw new TypeError('should array')
}
return new Promsie((resolve, reject) => {
try {
let resultArry = []
const length = promiseArry.length
for (let i=0; i<length; i++) {
promiseArry[i].then(data=>{
resultArry.push(data)
if (resultArry.length === length) {
resolve(resultArry)
}
}, reject)
}
} catch (e) {
reject(e)
}
})
}
// race方法
Promise.race = function (promiseArry) {
if (!Array.isArray(promiseArry)) {
throw new TypeError('should array')
}
return new Promise((resolve, reject) => {
try {
const length = promiseArry.length;
for (let i=0; i<length; i++) {
promiseArry[i].then(resolve, reject)
}
} catch (e) {
reject(e)
}
})
}
