promise构造器的实现
javascript
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
#state = PENDING;
#result = undefined;
#handlers = [];
constructor(executor) {
const resolve = (data) => {
this.#changeState(FULFILLED, data);
};
const reject = (reason) => {
this.#changeState(REJECTED, reason);
};
try {
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
#changeState(state, result) {
if (this.#state !== PENDING) return;
this.#state = state;
this.#result = result;
this.#run();
}
#isPromiseLike(value) {
return (value !== null && (typeof value === 'object' || typeof value === 'function') && (typeof value.then === 'function'));
}
// 把传递的函数放入微队列中
#runMicroTask(func) {
// 判断node环境
if (process && process.nextTick) {
process.nextTick(func);
} else if (MutationObserver) {
const p = document.createElement('p');
const observer = new MutationObserver(func);
observer.observe(p, {
childList: true
});
p.innerHTML = 1;
} else {
setTimeout(func, 0);
}
}
#runOne(callback, resolve, reject) {
this.#runMicroTask(() => {
if (typeof callback === 'function') {
const settled = this.#state === FULFILLED ? resolve : reject;
settled(this.#result);
return;
}
try {
const data = callback(this.#result);
// 判断返回值是否promise
if (this.#isPromiseLike(data)) {
data.then(resolve, reject);
} else {
resolve(data);
}
resolve(data);
} catch (err) {
reject(err);
}
});
}
#run() {
if (this.#state === PENDING) return;
while (this.#handlers.length) {
const {onFulfilled, onRejected, resolve, reject} = this.#handlers.shift();
if (this.#state === FULFILLED) {
this.#runOne(onFulfilled, resolve, reject);
} else {
this.#runOne(onRejected, resolve, reject);
}
}
}
then(onFulfilled, onRejected) {
return new MyPromise((resolve, reject) => {
this.#handlers.push({
onFulfilled,
onRejected,
resolve,
reject
});
this.#run();
});
}
}
const p = new Promise((resolve, reject) => {
throw 123;
});
console.log(p);