手写promise,实现一个简易的promise

文案没编辑好,先上代码吧

const isFunction = variable => typeof variable === 'function'

// 定义Promise的三种常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class MyPromise {
	constructor(handle) {
		this._status = PENDING // 当前状态
		this._value = undefined // 当前值  
		this._fulfilledQueues = [] // 添加成功回调函数队列
		this._rejectedQueues = [] // 添加失败回调函数队列

		try {
			handle(this._resolve.bind(this), this._reject.bind(this))
		} catch (err) {
			this._reject(err)
		}
	}
	
	static resolve(value) {
		
		// 如果参数是MyPromise实例,直接返回这个实例 
		if (value instanceof MyPromise) return value
		
		return new MyPromise(resolve => resolve(value))
	}
	
	static reject(value) {
		return new MyPromise((resolve, reject) => reject(value))
	}
	
	static all(list) {
		return new MyPromise((resolve, reject) => {
			let values = []
			let count = 0
			
			for (let [i, p] of list.entries()) {
				
				// 数组参数如果不是MyPromise实例,先调用MyPromise.resolve()             
				this.resolve(p).then(res => {
					values[i] = res
					count++
	
					// 所有状态都变成fulfilled时,返回的MyPromise状态就变成fulfilled                    
					if (count === list.length) resolve(values)
				}, err => {
					
					// 有一个被rejected时,返回的MyPromise状态就变成rejected                    
					reject(err)
				})
			}
		})
	}
	
	static race(list) {
		return new MyPromise((resolve, reject) => {
			for (let p of list) {
				
				// 只要有一个实例率先改变状态,新的MyPromise状态就跟着改变
				this.resolve(p).then(res => {
					resolve(res)
				}, err => {
					reject(err)
				})
			}
		})
	}
	
	then(onFulfilled, onRejected) {
		const {
			_value,
			_status
		} = this
	
		// 返回一个新的MyPromise对象       
		return new MyPromise((onFulfilledNext, onRejectedNext) => {
			
			// 封装一个成功时执行的函数
			let fulfilled = value => {
				try {
					if (!isFunction(onFulfilled)) {
						onFulfilledNext(value)
					} else {
						let res = onFulfilled(value)
						
						if (res instanceof MyPromise) {
							
							// 如果当前回调函数返回MyPromise对象,必须等待其状态改变后再执行下一个回调
							res.then(onFulfilledNext, onRejectedNext)
						} else {
							
							// 否则会将返回结果直接当做参数,传入下一个then的回调函数,并立即执行下一个then的回调函数                            
							onFulfilledNext(res)
						}
					}
				} catch (err) {
					
					// 如果函数执行出错,新的MyPromise对象的状态为失败                   
					onRejectedNext(err)
				}
			}
	
			// 封装一个失败时执行的函数                     
			let rejected = error => {
				try {
					if (!isFunction(onRejected)) {
						onRejectedNext(error)
					} else {
						let res = onRejected(error)
						
						if (res instanceof MyPromise) {
	
							// 如果当前回调函数返回MyPromise对象,必须等待其状态改变后再执行下一个回调
							res.then(onFulfilledNext, onRejectedNext)
						} else {
	
							// 否则会将返回结果直接当做参数,传入下一个then的回调函数,并立即执行下一个then的回调函数                                
							onFulfilledNext(res)
						}
					}
				} catch (err) {
	
					// 如果函数执行出错,新的MyPromise对象的状态为失败          
					onRejectedNext(err)
				}
			}
	
	
			switch (_status) {
				
				// 当状态为pending时,将then方法回调函数加入执行队列等待执行              
				case PENDING:
					this._fulfilledQueues.push(fulfilled) 
					this._rejectedQueues.push(rejected)
					break
	
				// 当状态为改变时,立即执行对应的回调函数                                   
				case FULFILLED:
					fulfilled(_value)
					break
	
				case REJECTED:
					rejected(_value)
					break
			}
		})
	}
	
	catch (onRejected) {
		return this.then(null, onRejected)
	}

	_resolve(val) {
		const run = () => {
			
			// 如果状态是FULFILLED或REJECTED,则中断执行
			if (this._status !== PENDING) return

			/* 
				如果resolve的参数为MyPromise对象,则必须等待该MyPromise对象状态改变后,
				当前MyPromise的状态才会改变,且状态取决于参数MyPromise对象的状态
			*/
			if (val instanceof MyPromise) {
				val.then(value => {
					this._value = value 
					this._status = FULFILLED 
					this._runFulfilled()
				}, err => {
					this._value = err 
					this._status = REJECTED 
					this._runRejected()
				})
			} else {
				this._value = val 
				this._status = FULFILLED 
				this._runFulfilled()
			}
		}
		
		// 实现异步,本次事件轮询结束后调用
		setTimeout(run, 0)
	}

	_reject(err) {
		
		// 如果状态是FULFILLED或REJECTED,则中断执行
		if (this._status !== PENDING) return

		// 依次执行失败队列中的函数,并清空队列       
		const run = () => {
			this._value = err
			this._status = REJECTED 
			this._runRejected()
		}

		// 为了支持同步的MyPromise,这里采用异步调用      
		setTimeout(run, 0)
	}
	
	// 依次执行成功队列中的函数,并清空队列
	_runFulfilled = () => {
		let cb;
		
		while (cb = this._fulfilledQueues.shift()) {
			cb(this._value)
		}
	}
	
	// 依次执行失败队列中的函数,并清空队列
	_runRejected = () => {
		let cb;
		
		while (cb = this._rejectedQueues.shift()) {
			cb(this._value)
		}
	}
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值