<!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 = `每一个异步场景都可以看做是一个任务，这个任务分为两个阶段 三个状态
unsettled 未决阶段 settled 已决阶段 pending 等待 fulfilled 成功态 rejected 失败态`;
let b = `各个阶段和各个状态间不可逆转，状态始终是由 pending => fulfilled 或 rejected`;
let c = `将任务由未决的 pending 状态推向已决的fulfilled状态，这个行为叫做 resolve；推向已决的rejected状态，这个行为叫 reject；`;
let d = `每个异步任务必须提供一个then方法来处理成功后的数据或失败后的原因；then方法规定了有两个参数， onFulfilled onRejected`;
</script>
<script>
const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
// promise是一个类，他接受一个函数作为参数
class myPromise {
constructor(executor) {
this.status = PENDING;
this.dispatchers = [];
this.data = null;
this.reason = null;
try {
executor(this.__resolve.bind(this), this.reject.bind(this));
} catch (err) {
this.__reject(err);
}
}
__updataStatus(newStatus) {
if (this.status !== PENDING) return;
this.status = newStatus;
}
__resolve(data) {
this.__updataStatus(FULFILLED);
this.data = data;
this.__executeDispatchers();
}
__executeDispatchers({ dispatcher, status }) {
if (this.status === PENDING) return;
for (const dispatcherConf of dispatchers) {
this.__executeDispatcher(dispatcherConf);
}
}
__executeDispatcher({ dispatcher, status, resolve, reject }) {
if (this.status !== status) {
return;
}
if (typeof dispatcher !== 'function') {
this.status === FULFILLED ? resolve(this.data) : reject(this.data);
return;
}
// dispatcher已经是一个函数了
try {
const result = dispatcher(this.status === FULFILLED ? this.data : this.reason); // 如果是fulfilled 我们就把 data 传进去，如果是 rejected 我们就要把 reason 传进去；
resolve(result);
} catch (err) {
reject(err);
}
}
__reject(reason) {
this.__updataStatus(REJECTED);
this.reason = reason;
this.__executeDispatchers();
}
then(onFulfilled, onRejected) {
return new myPromise((resolve, reject) => {
this.dispatchers.push(
{
status: FULFILLED,
dispatcher: onFulfilled,
reject,
resolve
},
{
status: REJECTED,
dispatcher: onRejected,
reject,
resolve
}
);
});
}
catch(onRejected) {
return this.then(null, onRejected);
}
}
const myPro = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(111);
}, 1000);
});
myPro.then().then(r => {
console.log('r', r);
});
</script>
</body>
</html>
