<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>promise A+规范 第三遍</title>
</head>
<body>
<script>
let a = `1:每个异步操作都被看做一个任务，每个任务都分为两个阶段和三个状态，分别是 unsettled 未决阶段 settled 已决阶段，pending 等待态 fulfilled 成功态
rejected 失败态；
2:任务的各个状态不可逆转，只能由 pending 转为 fulfilled 或 rejected
3:由 unsettled 未决阶段转为 settled 已决阶段中，由pending 转化为 fulfilled 的行为称之为 resolve，转化为 rejected 的行为称之为 reject
4:任务都会提供一个then方法，它有两个参数，分别是onFulfilled 和 onRejected`;
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class myPromise {
constructor(executor) {
this.status = PENDING;
this.data = null;
this.reason = null;
this.dispatchers = [];
try {
executor(this.__resolve.bind(this), this.__reject.bind(this));
} catch (err) {
this.__reject(err);
}
}
__resolve(data) {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.data = data;
this.__dispatchers();
}
__reject(reason) {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
this.__dispatchers();
}
__dispatchers() {
if (this.status === PENDING) return;
for (const dispatcherConf of this.dispatchers) {
this.__dispatcher(dispatcherConf);
}
}
__dispatcher({ status, dispatcher, resolve, reject }) {
if (this.status !== status) return;
if (typeof dispatcher !== 'function') {
this.status === FULFILLED ? resolve(this.data) : reject(this.data);
return;
}
try {
const result = dispatcher(this.status === FULFILLED ? this.data : this.reason);
resolve(result);
} catch (err) {
reject(err);
}
}
then(onFulfiled, onRejected) {
return new myPromise((resolve, reject) => {
this.dispatchers.push(
{
status: FULFILLED,
dispatcher: onFulfiled,
resolve,
reject
},
{
status: REJECTED,
dispatcher: onRejected,
resolve,
reject
}
);
this.__dispatchers();
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
const pro = new myPromise((resolve, reject) => {
setTimeout(function () {
resolve(123);
}, 1000);
});
pro.then(r => {
console.log(r);
});
</script>
</body>
</html>
