话不多说,直接上代码
通过ES5的模块化封装,向外暴露一个属性
(function(window){
const PENDING = 'pending';
const RESOLVED = 'fulfilled'
const REJECTED = 'rejected'
function MyPromise(excutor){
const self = this; //保存Promise对象,防止异步执行时,拿不到数据和方法,必要
self.value = undefined;
self.status = PENDING;
self.callbacks = [] //当状态没有发生改变时,需要储存起回调函数, 在then方法中获取回调函数
function resolve(value){
self.value = value;
self.status = RESOLVED;
self.callbacks.map(cb => {
setTimeout(() => { //定时器模拟异步执行,必须保证回调异步执行,否则顺序就乱了
cb.onResolved(self.value)
})
}) //执行保存起来的成功回调函数
}
function reject(value){
self.value = value;
self.status = REJECTED ;
self.callbacks.map(cb => {
setTimeout(() => {
cb.onRejected (self.value)
})
})//执行保存起来的失败的回调函数
}
try{ //若在执行器函数中主动抛出错误,需要捕获错误,并把状态更改为rejected
excutor(resolve,reject)
} catch (error){
reject(error)
}
}
MyPromise.prototype.then = function( onResolved,onRejected ){
const self = this//保存当前的Promise对象
return new Promise(resolve,reject){
onResolved = onResolved === 'function' ? onResolved : v => v
onRejected = onRejected === 'function' ? onRejected : error => {throw error} //实现异常透传
//判断当前的状态
//假如Promise执行的异步任务,then方法是同步方法,那么当时Promise的状态为pending,所以不能执行回调,此时需要保存
if(self.status === PENDING){
// 这里只是把回调保存了起来,并没有改变当前的Promise对象,所以得进一步处理,处理和成功得处理类似
self.callbacks.push({onResolved,onRejected}) //保存每一个then方法为一个对象,包含onResolved,onRejected两个函数
} else if(self.status === RESOLVED){
//1. 保证then中的回调异步执行,加一个setTimeout
//2. 在onResolved中如果主动抛出错误,需要捕获错误
//3. 根据Promise对象返回的结果,来决定下一个then中执行成功还是失败的回调
//4. 如果上一个Promise返回的是一个值,如return 2,那么直接用resolve(2)执行
//5. 如果上一个Promise返回的是一个promise对象,那么要通过promise.then 来获取promise的执行结果
setTimeout(() => {
try {
const result = onResolved(self.value)
if( result instanceof MyPromise){ //判断返回值是不是Promise对象
//返回一个Promise对象
result.then(
value => { //返回值是Promise对象,并且是成功的,那么就会执行这一个函数
resolve(self.value)
}
error => { //返回值是Promise对象,并且是失败的,那么就会执行这一个函数
rejecte(self.value)
}
)
}else { //返回的不是一个Promise对象
resolve(self.value)
}
} catch (error) {
//与成功的处理一样,只需要更改一下回调函数,太长就不写了
}
})
} else { //rejected状态}
}
}
window.MyPromise = MyPromise //向外暴露方法
})(window)
到这里就差不多写完简易的promise了,了解了原理也能更好的使用promise
欢迎指正,若有不清楚,也可评论指出