promise简易

promise 简易 实现简单版的promise 完成简单的功能

class MyPromise {
				constructor(executor) {
					// executor执行器
					this.status = 'pending' // 等待状态
					this.value = null // 成功或失败的参数
					this.fulfilledCallbacks = [] // 成功的函数队列
					this.rejectedCallbacks = [] // 失败的函数队列
					const that = this
					function resolve(value) {
						// 成功的方法
						if (that.status === 'pending') {
							that.status = 'resolved'
							that.value = value
							that.fulfilledCallbacks.forEach((myFn) => myFn(that.value)) //执行回调方法
						}
					}
					function reject(value) {
						//失败的方法
						if (that.status === 'pending') {
							that.status = 'rejected'
							that.value = value
							that.rejectedCallbacks.forEach((myFn) => myFn(that.value)) //执行回调方法
						}
					}
					try {
						executor(resolve, reject)
					} catch (err) {
						reject(err)
					}
				}
				then(onFulfilled, onRejected) {
					if (this.status === 'pending') {
						// 等待状态，添加回调函数到成功的函数队列
						this.fulfilledCallbacks.push(() => {
							onFulfilled(this.value)
						})
						// 等待状态，添加回调函数到失败的函数队列
						this.rejectedCallbacks.push(() => {
							onRejected(this.value)
						})
					}
					if (this.status === 'resolved') {
						// 支持同步调用
						// console.log('this', this)
						onFulfilled(this.value)
					}
					if (this.status === 'rejected') {
						// 支持同步调用
						onRejected(this.value)
					}
				}
			}

			// 测试 走的是异步（队列里调用）
			function fn() {
				return new MyPromise((resolve, reject) => {
					setTimeout(() => {
						if (Math.random() > 0.6) {
							resolve(1)
						} else {
							reject(2)
						}
					}, 1000)
				})
			}
			fn().then(
				(res) => {
					console.log('res', res) // res 1
				},
				(err) => {
					console.log('err', err) // err 2
				}
			)

			// 测试2  走的是下面的同步调用
			function fn1() {
				return new MyPromise((resolve, reject) => {
					// setTimeout(() => {
					// 	if (Math.random() > 0.6) {
					// 		resolve(1)
					// 	} else {
					// 		reject(2)
					// 	}
					// }, 1000)
					resolve(3)
				})
			}
			fn1().then(
				(res) => {
					console.log('res', res) // res 1
				},
				(err) => {
					console.log('err', err) // err 2
				}
			)

摘自 前端阿飞