参考网上资料,自己整理了一下思路
首先是一个最简化的MyPromise构造函数,参数是executor执行器函数。
接下来是,给这个构造函数增加then方法和catch方法。
打印结果是
最后一步是使构造函数可以链式调用。
function MyPromise(excutor) { console.log('进入MyPromise构造器'); const _PENDING = 'pending'; const _RESOLVED = 'resolved'; const _REJECTED = 'rejected'; const self = this; // 定义一个this指向, 避免在当前作用域下的this混乱 self.PromiseStatus = _PENDING; self.PromiseValue = undefined; self.fullFilledList = []; // 用来存储Promise.then成功的回调函数 self.rejectedList = []; // 用来存储Promise.then和Promise.catch失败的回调函数 // success const resolve = data => { console.log('用户调用resolve方法,状态被推向resolved状态,并且将用户传递进来的数据赋值给PromiseValue'); if (self.PromiseStatus === _PENDING) { self.PromiseStatus = _RESOLVED; self.PromiseValue = data; self.fullFilledList.forEach(item => { console.log('一旦用户状态被推向resolved状态则调用fullFilledList里面存储的成功的回调函数'); item(); }); } } // error const reject = error => { console.log('用户调用reject方法,状态被推向rejected状态,并且将用户传递进来的数据赋值给PromiseValue'); if (self.PromiseStatus === _PENDING) { self.PromiseStatus = _REJECTED; self.PromiseValue = error; self.rejectedList.forEach(item => { console.log('一旦用户状态被推向rejected状态则调用rejectedList里面存储的失败的回调函数'); item(); }); } } try { console.log('到达立即执行器'); excutor(resolve,reject); } catch(error) { reject(error); } MyPromise.prototype.then = (thenable, catchable) => { console.log('进入then函数'); // 如果当前状态已经为已决阶段的两种状态了, 那么回调函数会被立即调用并执行 // 因为catchable很有可能不传递, 所以必须容错 catchable = typeof catchable === 'function' ? catchable : err => { throw err }; if (self.PromiseStatus === _RESOLVED) { // console.log('MyPromise实例是resolved状态, 调用成功回调函数thenable-then,并返回PromiseValue'); // thenable(self.PromiseValue) console.log('MyPromise实例是resolved状态,为了链式调用需要return出一个新的MyPromise实例'); return new MyPromise((resolve, reject) => { try { const x = thenable(self.PromiseValue); // thenable回调函数return出的内容 if (x instanceof MyPromise) { x.then(resolve, reject) // ??? 以后补充 } else { resolve(x) // 将初始的pending状态推向resolved状态 } } catch (err) { reject(err) } }) } if (self.PromiseStatus === _REJECTED) { // console.log('MyPromise实例是rejected状态, 调用失败回调函数catchable-then,并返回PromiseValue'); // catchable(self.PromiseValue) console.log('MyPromise实例是rejected状态,为了链式调用需要return出一个新的MyPromise实例'); return new MyPromise((resolve, reject) => { try { console.log('调用失败回调函数catchable-then,并返回PromiseValue'); const x = catchable(self.PromiseValue) if (x instanceof MyPromise) { x.then(resolve, reject) } else { resolve(x) } } catch (err) { reject(err) } }) } if (self.PromiseStatus === _PENDING) { console.log('MyPromise实例是pending状态'); return new MyPromise((resolve, reject) => { self.fullFilledList.push(() => { const x = thenable(self.PromiseValue) if (x instanceof MyPromise) { x.then(resolve, reject) } else { resolve(x) } }) self.rejectedList.push(() => { try { const x = catchable(self.PromiseValue) if (x instanceof Promise) { x.then(resolve, reject) } else { resolve(x) } } catch (err) { reject(err) } }) }) } } MyPromise.prototype.catch = catchable => { console.log('进入catch函数'); // if (self.PromiseStatus === _REJECTED) { // console.log('MyPromise实例是rejected状态, 调用失败回调函数catchable-catch'); // catchable(self.PromiseValue) // } return self.then(null, catchable); } }; const myPromise = new MyPromise((resolve, reject) => { // 立即执行且顺序执行 console.log('我会立即执行'); reject('hello'); }) const myPromise1 = myPromise.then(res => { console.log(res, 'thenable执行-then'); }, err => { console.log(err, 'catchable执行-then'); return err; }) myPromise1.then(res => { console.log(res, '第二个then'); return res + ' world'; }).then(res => { console.log(res, '第三个then'); }) // const myPromise2 = myPromise.catch(err => { // console.log(err, 'catchable执行-catch'); // })
后续再完善。