手写Promise实现
#基本promise 不包含 all 等方法
定义状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
封装函数，将同步任务放入微任务队列
function runsynctask(callback) {
return queueMicrotask(callback);
}
resolvePromise 函数
function resolvePromise(promise2, x, resolve, reject) {
if (x === promise2) {
throw new TypeError('Chaining cycle detected for promise');
}
if (x instanceof NewPromise) {
x.then(res => resolve(res), err => reject(err));
} else {
resolve(x);
}
}
NewPromise 类
class NewPromise {
state = PENDING;
result = null;
#handlers = [];
constructor(func) {
const resolve = (result) => {
if (this.state === PENDING) {
this.state = FULFILLED;
this.result = result;
this.#handlers.forEach(handler => {
handler.onFulfilled(result)
})
}
}
const reject = (error) => {
if (this.state === PENDING) {
this.state = REJECTED;
this.result = error;
this.#handlers.forEach(handler => {
handler.onRejected(error)
})
}
}
func(resolve, reject);
}
then(onFulfilled, onRejected) {
typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
typeof onRejected === 'function' ? onRejected : (error) => { throw error };
const promise2 = new NewPromise((resolve, reject) => {
if (this.state === FULFILLED) {
runsynctask(() => {
try {
const x = onFulfilled(this.result);
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
} else if (this.state === REJECTED) {
runsynctask(() => {
try {
const x = onRejected(this.result);
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
} else if (this.state == PENDING) {
this.#handlers.push({
onFulfilled: () => {
runsynctask(() => {
try {
const x = onFulfilled(this.result);
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
},
onRejected: () => {
runsynctask(() => {
try {
const x = onRejected(this.result);
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
}
})
}
})
return promise2;
}
}
完整代码
//定义状态常量
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
//封装函数，将同步任务放入微任务队列
function runsynctask(callback) {
return queueMicrotask(callback);
}
resolvePromise = (promise2, x, resolve, reject) => {
if (x === promise2) {
throw new TypeError('Chaining cycle detected for promise');
}
//判断x是否为promise
if (x instanceof NewPromise) {
x.then(res => resolve(res), err => reject(err));
} else {
resolve(x);
}
}
class NewPromise {
//状态
state = PENDING;
//结果
result = null;
//存储onFulfilled和onRejected
#handlers = [];
//构造函数
constructor(func) {
//定义resolve和reject函数
const resolve = (result) => {
//状态为pending时，改变状态和结果 实现不可逆
if (this.state === PENDING) {
this.state = FULFILLED;
this.result = result;
//执行存储的onFulfilled
this.#handlers.forEach(handler => {
handler.onFulfilled(result)
})
}
}
const reject = (error) => {
//状态为pending时，改变状态和结果 实现不可逆
if (this.state === PENDING) {
this.state = REJECTED;
this.result = error;
//执行存储的onRejected
this.#handlers.forEach(handler => {
handler.onRejected(error)
})
}
}
func(resolve, reject)//执行传入的函数
}
then(onFulfilled, onRejected) {
//如果onFulfilled不是函数，则将其设置为函数，返回结果
typeof onFulfilled === 'function' ? onFulfilled : (value) => value;
//如果onRejected不是函数，则将其设置为函数，抛出错误
typeof onRejected === 'function' ? onRejected : (error) => { throw error };
const promise2 = new NewPromise((resolve, reject) => {
if (this.state === FULFILLED) {
runsynctask(() => {
try {
const x = onFulfilled(this.result);
//判断x是否为promise2
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
} else if (this.state === REJECTED) {
runsynctask(() => {
try {
const x = onRejected(this.result);
//判断x是否为promise2
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
} else if (this.state == PENDING) {
this.#handlers.push({
onFulfilled: () => {
runsynctask(() => {
try {
const x = onFulfilled(this.result);
//判断x是否为promise2
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
},
onRejected: () => {
runsynctask(() => {
try {
const x = onRejected(this.result);
//判断x是否为promise2
resolvePromise(promise2, x, resolve, reject)
} catch (error) {
reject(error);
}
})
}
})
}
})
return promise2;
}
}