🤔️ 在精简版的实现中一个明显的缺陷：第二个 then 好像无视了第一个 then 的结果，仍然获取到的是我们在 Promise 执行器中 resolve 出的那个最初的值。
Promise 表示一个异步操作的最终结果，与之进行交互的方式主要是then方法，该方法注册了两个回调函数，用于接收 promise 的终值或本 promise 不能执行的原因。
核心的 Promise A+ 规范不涉及如何创建、解决和拒绝 promise，而是专注于提供一个通用的 then 方法！
一个promise必须提供一个then方法，该方法可以支持访问其状态转变后的value和reason，其接收两个参数promise.then(onFulfilled, onRejected)。
Promise决议程序
Promise Resolution Procedure(Promise决议程序) 约束的就是 resolve 应该如何表现，这个动作和 then 息息相关。决议程序处理是以一个 promise 和一个 value 为输入的抽象操作，表示为 [[Resolve]](promise, x)，意思是说如果 onFulfilled 或 onRejected 返回了值 x，则执行Promise解析流程 [[Resolve]](promise2, x)。
只要都实现了promise/A+标准，那么不同的Promise都可以之间相互调用。
- 如果x和promise 都指向同一个对象，则以typeError为reason 拒绝执行promise。
- 如果x 是Promise对象，则promise采用x当前的状态：
- 如果x是pending状态，promise必须保持pending状态直到x的状态变为resolved或者rejected。
- 如果x是resolved状态，用相同的值value执行promise。
- 如果x是rejected状态，则用相同的原因reason执行promise。
- 如果x是一个对象或者函数：
- 将promise的then方法指向x.then。
- 如果x.then属性抛出异常error，则以error为reason来调用reject。
- 如果then是是一个函数，那么用x为this来调用它，第一个参数为 resolvePromise，第二个参数为rejectPromise
ⅰ. 如果resolvePromise以值y为参数被调用，则运行 [[Resolve]](promise, y)。
ⅱ. 如果 rejectPromise 以据因 r 为参数被调用，则用原因r执行promise（reject）。
ⅲ. 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则使用第一次调用并忽略剩下的调用。
ⅳ. 如果then抛出了异常 error
- 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略它。
否则用error为reason拒绝promise - 如果then不是function，用x为参数执行promise
- 如果x不是一个object或者function，用x为参数执行promise。
用决议程序优化 CutePromise
function CutePromise(executor){
this.value = null; //记录异步任务成功的执行结果
this.reason = null; //记录异步任务失败的原因
this.status = 'pending'; //记录当前的状态 初始化为pending
//缓存两个队列，维护resolved和rejected各自对应的处理函数
this.onResolvedQueue = [];
this.onRejectedQueue = [];
var self = this;
function resolve(value){
if(self.status !== 'pending'){
return;
}
self.value = value;
self.status = 'resolved';
//用setTimeout延迟队列任务的执行
// setTimeout(function(){
self.onResolvedQueue.forEach(resolved => resolved(self.value));
// })
}
function reject(reason){
if(self.status !== 'pending'){
return;
}
self.reason = reason;
self.status = 'rejected';
// setTimeout(function(){
self.onRejectedQueue.forEach(rejected => rejected(self.reason));
// })
}
//把 resolve 和 reject 能力赋予执行器
executor(resolve, reject);
}
function resolutionProcedure(promise2, x, resolve, reject) {
// 这里 hasCalled 这个标识，是为了确保 resolve、reject 不要被重复执行
let hasCalled;
if (x === promise2) {
// 决议程序规范：如果 resolve 结果和 promise2相同则reject，这是为了避免死循环
return reject(new TypeError('为避免死循环，此处抛错'));
} else if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
// 决议程序规范：如果x是一个对象或者函数，则需要额外处理下
try {
// 首先是看它有没有 then 方法（是不是 thenable 对象）
let then = x.then;
// 如果是 thenable 对象，则将promise的then方法指向x.then。
if (typeof then === 'function') {
// 如果 then 是是一个函数，那么用x为this来调用它，第一个参数为 resolvePromise，第二个参数为rejectPromise
then.call(x, y => {
// 如果已经被 resolve/reject 过了，那么直接 return
if (hasCalled) return;
hasCalled = true;
// 进入决议程序（递归调用自身）
resolutionProcedure(promise2, y, resolve, reject);
}, err => {
// 这里 hascalled 用法和上面意思一样
if (hasCalled) return;
hasCalled = true;
reject(err);
});
} else {
// 如果then不是function，用x为参数执行promise
resolve(x);
}
} catch (e) {
if (hasCalled) return;
hasCalled = true;
reject(e);
}
} else {
// 如果x不是一个object或者function，用x为参数执行promise
resolve(x);
}
}
CutePromise.prototype.then = function(onResolved, onRejected){
if(typeof onResolved !== 'function'){
onResolved = function(x){ return x };
}
if(typeof onRejected !== 'function'){
onRejected = function(e){ throw e };
}
var self = this;
let x; //用来存返回值
// resolve态的处理函数
function resolveByStatus(resolve, reject) {
// 包装成异步任务，确保决议程序在 then 后执行
setTimeout(function() {
try {
// 返回值赋值给 x
x = onResolved(self.value);
// 进入决议程序
resolutionProcedure(promise2, x, resolve, reject);
} catch (e) {
// 如果onResolved或者onRejected抛出异常error，则promise2必须被rejected，用error做reason
reject(e);
}
});
}
// reject态的处理函数
function rejectByStatus(resolve, reject) {
// 包装成异步任务，确保决议程序在 then 后执行
setTimeout(function() {
try {
// 返回值赋值给 x
x = onRejected(self.reason);
// 进入决议程序
resolutionProcedure(promise2, x, resolve, reject);
} catch (e) {
reject(e);
}
});
}
// 注意，这里我们不能再简单粗暴 return this 了，需要 return 一个符合规范的 Promise 对象
var promise2 = new CutePromise(function(resolve, reject) {
// 判断状态，分配对应的处理函数
if (self.status === 'resolved') {
// resolve 处理函数
resolveByStatus(resolve, reject);
} else if (self.status === 'rejected') {
// reject 处理函数
rejectByStatus(resolve, reject);
} else if (self.status === 'pending') {
// 若是 pending ，则将任务推入对应队列
self.onResolvedQueue.push(function() {
resolveByStatus(resolve, reject);
});
self.onRejectedQueue.push(function() {
rejectByStatus(resolve, reject);
});
}
});
// 把包装好的 promise2 return 掉
return promise2;
}
new CutePromise(function(resolve, reject){
resolve('成了！');
}).then((value) => {
console.log(value)
console.log('我是第 1 个任务')
return '第一个任务的结果'
}).then(value => {
console.log(value);
console.log('我是第 2 个任务')
});
// 依次输出“成了！” “我是第 1 个任务” “第一个任务的结果” “我是第 2 个任务”
网友评论