1、promise 类核心逻辑实现
promise 就是一个类 在执行这个类的时候 需要传递一个执行器会立即执行 执行器会立即执
2、promise 中有三种状态 分别为 成功 fulfilled 失败 reject 等待 pending
pending ->fulfilled //等待转变为成功
pending ->rejected //等待转变为失败
一旦状态确定就不可更改
3、resolve 和 reject 函数是用来更改状态
resolve:fulfilled
reject:rejected
4、then方法 内部做的事情就判断状态 如果状态是成功 调用成功的回调函数 如果状态是失败 调用的失败的回调函数 then方法是被定义在原型对象上中的
5、then成功回调有一个参数 表示成功之后的值 then失败回调有一个参数 表示失败后的原因
const PENDING = 'pending'; //等待
const FULFILLED = 'fulfilled'; //成功
const REJECTED = 'reject' ; //失败
class MyPromise {
constructor(executor) { //executor 执行器
try {
executor(this.resolve, this.reject);
}catch(e) {
this.reject(e)
}
}
//promise 状态
status = PENDING;
//成功之后的值
value = undefined;
//失败后的原因
reason = undefined;
//成功回到
successCallback = [];
//失败回调
failCallback = [];
resolve = value => {
//如果状态不是等待 阻止程序向下执行
if(this.status !== PENDING) return;
//将状态更改为成功
this.status = FULFILLED;
//保存成功之后的值
this.value = value;
//判断成功回调是否存在 如果存在 就调用
// this.successCallback && this.successCallback(this.value )
while(this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
//如果状态不是等待 阻止程序向下执行
if(this.status !== PENDING) return;
// 将状态更改为失败
this.status = REJECTED;
//保存失败后的原因
this.reason = reason;
//判断失败回调是否存在 如果存在 就调用
// this.failCallback && this.failCallback(this.reason);
while(this.failCallback.length) this.failCallback.shift()()
}
then(successCallback, failCallback) {
// 这里进行判断,如果有回调就选择回调,如果没有回调就传一个函数,把参数传递
successCallback = successCallback ? successCallback : value => value
failCallback = failCallback ? failCallback : reason =>{throw reason }
//then方法的链式调用,每个then方法都要返回 promise 对象,当调用 传入的resolve方法,把x作为形参传入,得到的就是下一个then方法传入的参数value
let promise2 = new MyPromise((resolve, reject)=>{
//判断状态
if(this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value);
//判断x的值是普通值还是promise对象
//如果是普通值 直接调用resolve
//如果是promise对象 查看promise 对象返回的结果
//再根据promise 对象返回的结果 决定调用resolve 还是调用reject
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
},0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason);
//判断x的值是普通值还是promise对象
//如果是普通值 直接调用resolve
//如果是promise对象 查看promise 对象返回的结果
//再根据promise 对象返回的结果 决定调用resolve 还是调用reject
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
},0)
} else {
//等待
//将成功回调函数和失败回调函数储存起来
this.successCallback.push(()=>{
setTimeout(() => {
try {
let x = successCallback(this.value);
//判断x的值是普通值还是promise对象
//如果是普通值 直接调用resolve
//如果是promise对象 查看promise 对象返回的结果
//再根据promise 对象返回的结果 决定调用resolve 还是调用reject
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
},0)
});
this.failCallback.push(()=>{
setTimeout(() => {
try {
let x = failCallback(this.reason);
//判断x的值是普通值还是promise对象
//如果是普通值 直接调用resolve
//如果是promise对象 查看promise 对象返回的结果
//再根据promise 对象返回的结果 决定调用resolve 还是调用reject
resolvePromise(promise2, x, resolve, reject);
} catch(e) {
reject(e);
}
},0)
});
}
})
return promise2;
}
finally (callback) {
return this.then(value =>{
return MyPromise.resolve(callback()).then(()=>value);
}, () => {
return MyPromise.resolve(callback().then(reason=>{throw reason}))
})
}
catch(failCallback) {
return this.then(undefined, failCallback)
}
//Promise.all 方法的实现 静态方法
static all (array) {
let result = [];
let index = 0;
return new MyPromise((resolve, reject)=>{
function addData(key, value) {
result[key] = value;
index++;
if(index === array.length) {
resolve(result);
}
}
for (let i in array) {
let current = array[i];
if(current instanceof MyPromise) {
//promise 对象
current.then(value => addData(i, value),reason=>reject(reason))
} else {
//普通值
addData(i,array[i]);
}
}
})
}
static resolve(value) {
if(value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value))
}
}
function resolvePromise (promise2, x, resolve, reject) {
if(promise2 === x) {
return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
}
if(x instanceof MyPromise) {
//promise 对象
x.then(resolve, reject)
} else {
//普通值
resolve(x)
}
}