手写promise第一天

• 用pending fulfilled rejected 3中情况分别对应 等待 成功 失败


• 状态只能由等待改变为成功或者失败 且不可逆

在promise的构造函数中接收一个执行器函数 这个函数是同步执行的

这个执行器在执行时可以接收两个参数 分别是promise类中的resolve和reject

在执行器执行过程中，如果获取到需要的数据 那么执行resolve函数并将数据当做参数传入

resolve函数会将状态status改为fulfilled并且把数据存入到value中

当执行到resolve时 如果在成功回调函数队列中有回调函数 那么依次执行他们

reject同理

promise中的then函数 接收两个参数分别是成功和失败的回调

同时新建一个新的promise对象 并且把这个then函数要做的事情作为 新promise对象的执行器函数传入

在这个then函数中判断当前promise的状态 如果是成功 那么执行成功回调并将value传入

成功回调函数可以返回一个值到 可以用一个变量接收作为新promise对象的resolve的参数传入

如果当前promise的状态是rejected 那么同理调用reject方法

如果状态是pending 说明当前promise还没有执行resolve或reject

将then传入的成功回调和失败回调都存到对应的回调队列里 在resolve实行的时候再去调用

由于用很多种情况都要去处理resolve 所以有必要提取出来作为一个单独的函数便于复用

处理器中判断成功回调返回的值是普通值 那么可以直接执行新promise的resolve或reject方法

如果返回值是一个promise对象 那么要用这个promise对象的then方法判断这个对象目前是成功还是失败 再调用对应方法

如果返回值是一个promise对象且跟then方法中的promise对象相同 那么就死循环了 应该抛出一个错误

• 还没有处理then中的异步问题


• 还没有实现promise.all等方法


• then中逻辑还是有点乱 明天继续捋

const PENDING = 'pengding';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
status = PENDING; // 当前promise的状态
value = undefined; // 当前promise的值
reason = undefined; // 当前promise如果失败 失败的原因
successCallbacks = []; // 如果异步 那么将回调存入到对应回调库中
rejectCallbacks = [];
// promise 的构造函数接受一个执行器 这个执行器会立即执行
constructor(executor) {
// 这个执行器接收两个参数 第一个参数是执行成功 第二个是失败
// 在执行器执行的过程中如果resolve执行 那么这个promise成功
executor(this.resolve, this.reject);
}
// 成功调用resolve方法 接收一个参数作为这个promise的返回值存在promise对象中
resolve = data => {
// 一旦status状态不是pending 那么就不再执行 保证状态不可逆
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = data; // 将promise成功获得的数据存在value中
// 判断成功回调函数库中是否用未执行的函数 有的话依次执行
while (this.successCallbacks.length) {
this.successCallbacks.shift()(this.value);
}
}
// 同resolve
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.rejectCallbacks.length) this.rejectCallbacks.shift()(this.reason);
}
// then方法 接收两个函数作为参数 第一个是成功的回调
then = (successCallback, rejectCallback) => {
// then方法 返回的是一个新的promise对象 所以在执行then的时候 new一个新的promise
// 同样的 这个新promise的执行器也会立即执行
let promise2 = new MyPromise((resolve, reject) => {
// 当执行到then方法时候 status已经是FULFILLED说明promise已经执行成功
// 直接执行成功的回调
// 同时将成功回调的返回值传递给下一个promise的resolve方法
if (this.status === FULFILLED) {
setTimeout(() => {
const thenReturnVal = successCallback(this.value);
resolvePromise(promise2, thenReturnVal, resolve, reject);
}, 0);
} else if (this.status === REJECTED) {
const thenRejectVal = rejectCallback(this.reason);
resolvePromise(thenRejectVal, resolve, reject);
} else {
// 如果执行到then的时候状态还是pending 那么 先把成功和失败的回调都存入到对应的回调库中去
// 第27行 如果resolve是异步的话 等异步结束接收到值再将回调函数从库中取出依次执行
this.successCallbacks.push(successCallback);
this.rejectCallbacks.push(rejectCallback);
}
});
this.promise2 = promise2;
return promise2;
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
reject(new TypeError('重复调用自己了哦~'));
}
if (x instanceof MyPromise) {
// 是promise对象 那需要调用Promise的then方法判断这个promise是否成功
// 如果成功 调用resolve方法 并且把值传递下去 如果失败 调用reject并且把原因传递下去
x.then(value => resolve(value), reason => reject(reason));
// x.then(resolve, reject);
} else {
resolve(x);
}
}
// (resolve, reject) => {resolve('666')} 是一个执行器函数 会立即执行
// 两个参数分别是promise内部传入的
const promise = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(66666);
}, 2000);
})
const promise33 = new MyPromise((resolve, reject) => {
resolve('promise33')
})
// 第一个then调用时 传入两个回调函数
// 第一个then函数内部立刻创建一个新的promise对象 并且then传入的两个函数
// 和then中的所有逻辑代码都作为新promise对象的执行器立即执行
// 如果promise成功 那么执行第一个也就是53行的successCallback
let p1 = promise.then(data => {
console.log(data);
// 这个return会作为successCallback的返回值传入新的promise中
// 在新promise调用resolve方法时 可以当做值传递给新promise的value
setTimeout(() => {
return promise33;
}, 2000);
}, reason => {
console.log(reason);
}) // 执行完第一个then后 会返回一个新的promise
p1.then((thenReturnVal) => { // 再次调用then是调用新promise的then方法
// 同时这个新promise的resolve方法接收上一个then方法successCallback的返回值作为value
console.log(thenReturnVal);
return 'then 3'
}, (thenRejectVal) => {
console.log(thenRejectVal);
})