实现过程详细步骤,文档传送门
源码:
// 先定义三个状态变量 const PENDING = 'pending' const REJECTED = 'rejected' const FULFILLED = 'fulfilled' class MyPromise { state = PENDING value = '' // 向后传的value值 callbacks = [] // 回调队列 constructor(fn) { if (typeof fn !== "function") { throw new Error('参数必须是函数') } fn(this._resolve.bind(this), this._reject.bind(this)) } static resolve(data) { return new MyPromise(resolve => { resolve(data) }) } static reject(data) { return new MyPromise((resolve, reject) => { reject(data) }) } static all(promiseArr) { if (!Array.isArray(promiseArr)) { throw new Error('参数必须是数组') } return new MyPromise((resolve, reject) => { const result = [] const Arrlength = promiseArr.length let tempItem let resolveNums = 0 //记录fulfilled实例的个数 for (let i = 0; i < Arrlength; i++) { tempItem = promiseArr[i] if (!(tempItem instanceof MyPromise)) { tempItem = MyPromise.resolve(tempItem) } tempItem.then((data) => { resolveNums++ result[i] = data // 全部都变为fulfilled,返回 if (resolveNums === Arrlength) { resolve(result) } }, (data) => { reject(data) }) } }) } static race(promiseArr) { if (!Array.isArray(promiseArr)) { throw new Error('参数必须是数组') } return new MyPromise((resolve, reject) => { const Arrlength = promiseArr.length let tempItem for (let i = 0; i < Arrlength; i++) { tempItem = promiseArr[i] if (!(tempItem instanceof MyPromise)) { tempItem = MyPromise.resolve(tempItem) } tempItem.then((data) => { resolve(data) }, (data) => { reject(data) }) } }) } static any(promiseArr) { if (!Array.isArray(promiseArr)) { throw new Error('参数必须是数组') } return new MyPromise((resolve, reject) => { const result = [] const Arrlength = promiseArr.length let tempItem let rejectedNums = 0 //记录rejected实例的个数 for (let i = 0; i < Arrlength; i++) { tempItem = promiseArr[i] if (!(tempItem instanceof MyPromise)) { tempItem = MyPromise.resolve(tempItem) } tempItem.then(data => { resolve(data) }, data => { result[i] = data if (++rejectedNums === Arrlength) { reject(result) } }) } }) } // 捕获前边未处理的reject。 catch(onRejected) { return this.then(null, onRejected) } // 无论前边promise是何种状态,都会执行的方法 finally(fn) { return this.then(fn, fn) } then(onFulfilled, onRejected) { const _this = this; //_this指向前一个promise对象 return new MyPromise((resolve, reject) => { _this._handle({ onFulfilled, onRejected, resolve, reject }) }) } _resolve(value) { if (this.state !== PENDING) { return } this.state = FULFILLED //修改状态 this.value = value // 赋值,用于向后传递 this.callbacks.forEach(cb => this._handle(cb)) //回调then中的注册函数 } _reject(error) { if (this.state !== PENDING) { return } this.state = REJECTED //修改状态 this.value = error // 赋值,用于向后传递 this.callbacks.forEach(cb => this._handle(cb)) //回调then中的注册函数 } _handle(callback) { // prnding状态时,注册函数入栈 if (this.state === PENDING) { this.callbacks.push(callback) return } // 按需获取then中注册的回调函数 const cb = this.state === FULFILLED ? callback.onFulfilled : callback.onRejected // 改变then返回的promise的状态,持续回调后续的then const cb_changeState = this.state === FULFILLED ? callback.resolve : callback.reject let ret if (cb) { ret = cb(this.value) //计算继续向后传递的值 // 返回一个promise if (ret instanceof MyPromise) { ret.then((data) => { callback.resolve(data) }, (err) => { callback.reject(err) }) } else { callback.resolve(ret) } } else { cb_changeState(this.value) //then里没有回调函数,把当前value继续向下传递 } } }