上一节一步步实现了一个Promise的基本功能，先回顾一下上节的代码
function changePromiseStatus(tar, key, value) {
if(tar.status === "pending") {
tar[key] = value;
// 如果key为value代码是fulfilled,如果key是reason是rejected
if(key === 'value') {
tar.status = "fulfilled";
// 开始执行搜集的方法
tar.resolveCallbacks.forEach(fn => fn());
} else {
tar.status = "rejected";
// 开始执行搜集的方法
tar.rejectCallbacks.forEach(fn => fn());
}
}
}
class MyPromise {
status = "pending"; // 状态
value = undefined; // 使用resove时记录的值
reason = undefined; // 使用reject时记录的出错原因
resolveCallbacks = []; // 用来收集状态为fulfilled时的执行方法
rejectCallbacks = []; // 用来收集状态rejected时的执行方法
constructor(executor) {
// 创建resolve方法
const resolve = res => {
changePromiseStatus(this, 'value', res);
}
// 创建reject方法
const reject = err => {
changePromiseStatus(this, 'reason', err);
}
// 尝试执行executor，并将resolve,reject作为实参传给外部使用
// 如果创建实例时没有传executor方法时则直接报错，走reject
try {
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
switch(this.status) {
case "fulfilled":
onFulfilled(this.value);
break;
case "rejected":
onRejected(this.reason);
break;
case "pending": {
// 当状态为pending时收集待执行的方法
this.resolveCallbacks.push(() => onFulfilled(this.value)); // 为了便于传参在外层包裹了一次方法
this.rejectCallbacks.push(() => onRejected(this.reason));
}
}
}
}
但是光只实现基本功能还不行，因为使用Promise的原因很大程度上是为了避免回调函数嵌套太多产生回调地狱，先抛开async await不谈，Promise的链式调用在某一程序上大大避免了这种回调地狱的局面。如：
// 以jquery为例的ajax回调地狱
$.get("/getdata", res => {
$.get("/getdata2", res2 => {
$.get("/getdata3", res3 => {
})
})
})
// 链式调用
p.then(res => {
console.log(res);
return 400;
}).then(res => {
console.log(res);
return 300;
}).then(res => {
console.log(res)
});
链式虽然看着还是有点不太舒服，但是已经比回调函数一层嵌一层看着舒服多了，接下来的内容就是开始实现这种链式调用了。
首先在写代码之前，先说明一下链式调用的特征：
1、要使then方法之后再使用then方法就得保证then方法里返回一个新的Promise对象
2、下一个then可以接收上一个then处理之后返回的结果
3、下一个then方法是要等待上一个then方法执行完之后才开始执行
根据以上特征下列就开始then方法的改造了，如下：
then(onFulfilled, onRejected) {
// 需要返回一个新的promise对象
return new MyPromise((resolve, reject) => {
let x = null;
switch(this.status) {
case "fulfilled":
// 等待并获取当前执行的结果
x = onFulfilled(this.value);
// 将其结果传入下一次then
resolve(x);
break;
case "rejected":
x = onRejected(this.reason);
resolve(x);
break;
case "pending": {
// 当状态为pending时收集待执行的方法
this.resolveCallbacks.push(() => {
x = onFulfilled(this.value)
resolve(x);
}); // 为了便于值参在外层包裹了一次方法
this.rejectCallbacks.push(() => {
x = onRejected(this.reason);
resolve(x);
});
}
}
});
}
接下来测试一下以下代码看能否按照预想打印出结果
// 使用
const p = new MyPromise((resolve, reject) => {
resolve(500);
});
p.then(res => {
console.log(res);
return 400;
}).then(res => {
console.log(res);
return 300;
}).then(res => {
console.log(res)
});
运行结果依次打印500 400 300，结果正确。
简单的链式调用已经完成，但是如果then方法中处理的有异步任务呢，如下:
p.then(res => {
setTimeout(() => {
console.log(res);
}, 400);
return 400;
}).then(res => {
setTimeout(() => {
console.log(res);
}, 300);
return 300;
}).then(res => {
console.log(res)
});
结果为：300 400 500
这时就会结果虽然这几个值都打印出来了，但是顺序不符合我们的预期，预期的效果应该是上一次then执行完再执行下一次then，所以我们要的效果是500 400 300的结果。
既然处理过程是异步了，那我们将异步的过程使用promise包起来试试呢，如下：
p.then(res => {
return new MyPromise((resolve, reject) => {
console.log(res);
resolve(400);
});
}).then(res => {
return new MyPromise((resolve, reject) => {
console.log(res);
resolve(300);
});
}).then(res => {
console.log(res)
});
理解很丰满，现实很骨感，运行结果如下：
image.png
顺序好像是对了，但是值又不对了，后面两次明显是一个promise对象，那看来还要对返回的结果做判断了，如果是一个promise对象，则自行then之后才把结果传给后面去，既然这样那这部分代码干脆就抽离用一个函数完成比较好。
// 处理then的处理结果
function handleThenResult(result, resolve, reject) {
// 判断是否为MyPromise对象
// 如果是就将then之后的结果分别用resolve,reject传到后面的then中
// 如果是一个普通的数据，则直接使用resolve传到后面then中
if(result instanceof MyPromise) {
// 便于理解的写法
//result.then(res => resolve(res), err => reject(err))
result.then(resolve, reject); // 上面代码精简后的写法,上面本质都是使用resolve,reject方法传值
} else {
resolve(result);
}
}
then(onFulfilled, onRejected) {
// 需要返回一个新的promise对象
return new MyPromise((resolve, reject) => {
let x = null;
switch(this.status) {
case "fulfilled":
// 等待并获取当前执行的结果
handleThenResult(onFulfilled(this.value), resolve, reject);
break;
case "rejected":
handleThenResult(onRejected(this.reason), resolve, reject);
break;
case "pending": {
// 当状态为pending时收集待执行的方法
this.resolveCallbacks.push(() => {
handleThenResult(onFulfilled(this.value), resolve, reject);
}); // 为了便于传参在外层包裹了一次方法
this.rejectCallbacks.push(() => {
handleThenResult(onRejected(this.reason), resolve, reject);
});
}
}
});
}
此时再尝试运行如下代码
p.then(res => {
return new MyPromise((resolve, reject) => {
console.log(res);
resolve(400);
});
}).then(res => {
return new MyPromise((resolve, reject) => {
console.log(res);
resolve(300);
});
}).then(res => {
console.log(res)
});
结果是依次等待并输出：500 400 300，已达到预期效果了，下面将完整的代码展示出来
// 处理promise对象实例状态改变的时候
function changePromiseStatus(tar, key, value) {
if(tar.status === "pending") {
tar[key] = value;
// 如果key为value代码是fulfilled,如果key是reason是rejected
if(key === 'value') {
tar.status = "fulfilled";
// 开始执行搜集的方法
tar.resolveCallbacks.forEach(fn => fn());
} else {
tar.status = "rejected";
// 开始执行搜集的方法
tar.rejectCallbacks.forEach(fn => fn());
}
}
}
// 处理then的处理结果
function handleThenResult(result, resolve, reject) {
// 判断是否为MyPromise对象
// 如果是就将then之后的结果分别用resolve,reject传到后面的then中
// 如果是一个普通的数据，则直接使用resolve传到后面then中
if(result instanceof MyPromise) {
// 便于理解的写法
//result.then(res => resolve(res), err => reject(err))
result.then(resolve, reject); // 上面代码精简后的写法,上面本质都是使用resolve,reject方法传值
} else {
resolve(result);
}
}
class MyPromise {
status = "pending"; // 状态
value = undefined; // 使用resove时记录的值
reason = undefined; // 使用reject时记录的出错原因
resolveCallbacks = []; // 用来收集状态为fulfilled时的执行方法
rejectCallbacks = []; // 用来收集状态rejected时的执行方法
constructor(executor) {
// 创建resolve方法
const resolve = res => {
changePromiseStatus(this, 'value', res);
}
// 创建reject方法
const reject = err => {
changePromiseStatus(this, 'reason', err);
}
// 尝试执行executor，并将resolve,reject作为实参传给外部使用
// 如果创建实例时没有传executor方法时则直接报错，走reject
try {
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
then(onFulfilled, onRejected) {
// 需要返回一个新的promise对象
return new MyPromise((resolve, reject) => {
let x = null;
switch(this.status) {
case "fulfilled":
// 等待并获取当前执行的结果
handleThenResult(onFulfilled(this.value), resolve, reject);
break;
case "rejected":
handleThenResult(onRejected(this.reason), resolve, reject);
break;
case "pending": {
// 当状态为pending时收集待执行的方法
this.resolveCallbacks.push(() => {
handleThenResult(onFulfilled(this.value), resolve, reject);
}); // 为了便于传参在外层包裹了一次方法
this.rejectCallbacks.push(() => {
handleThenResult(onRejected(this.reason), resolve, reject);
});
}
}
});
}
}
到此then的链式调用已经处理完成了，下一节将带上promise的四个静态方法(all, race, reject, resolve)的处理。
