概述本节要实现的功能
- 实现new的过程
- 实现then方法
- 状态凝固
- 异步代码的处理
实现new的过程
在实现new过程之前先了解一下promise在new的时候业务逻辑
1、外部通过构造函数传入一个立即执行方法executor，该方法有两个形参并且都为函数，然后将当前实例的状态值设置为pending
2、promise内建了两个方法resolve与reject，并作为实参运行executor
3、如果executor中使用了resolve方法，则改变当前实例的状态为fulfilled，并记录其resolve的结果
4、如果executor中使用了reject方法，则改变当前实例的状态为rejected，并记录出错原因
class MyPromise {
status = "pending"; // 状态
value = undefined; // 使用resove时记录的值
reason = undefined; // 使用reject时记录的出错原因
constructor(executor) {
// 创建resolve方法
const resolve = res => {
this.status = "fulfilled";
this.value = res;
}
// 创建reject方法
const reject = err => {
this.status = "rejected";
this.reason= err;
}
// 尝试执行executor，并将resolve,reject作为实参传给外部使用
// 如果创建实例时没有传executor方法时则直接报错，走reject
try {
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
}
实现then方法
同样首先了解一下then方法的工作逻辑
1、通过promise实例调用then方法，并传入两个函数onFulfilled(用于处理完成后的工作)，onRejected(用于处理出错时的工作)作为实参
2、判断当初实例的状态，为fulfilled则执行onFulfilled方法并将结果传入，如果为rejected则执行onReject方法并将出错信息传入
class MyPromise {
status = "pending"; // 状态
value = undefined; // 使用resove时记录的值
reason = undefined; // 使用reject时记录的出错原因
constructor(executor) {
// 创建resolve方法
const resolve = res => {
this.status = "fulfilled";
this.value = res;
}
// 创建reject方法
const reject = err => {
this.status = "rejected";
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;
}
}
}
现在测试如下代码：
const p = new MyPromise((resolve, reject) => {
resolve(500);
});
p.then(res => console.log(res)); // 能正确执行，打印出500
表面上看好像基本的功能是没什么问题了，那我们再看看下面一段代码：
const p = new MyPromise((resolve, reject) => {
resolve("resolve, " + 500);
reject("reject, ", 300);
});
p.then(
res => console.log(res),
err => console.log(err)
)
此时就会发现不对了，结果是：reject, 300，然后就会发现实例对象的状态值被反复修改，resolve,reject有多少个就修改多少次，明显不符合promise的规范。
promise规范的状态只能为pending向fulfilled,reject变更，并且一旦状态修改后，就再不能再次修改且不能再执行其它的reslove,reject操作了
此时就需要在构造函数里resolve,reject的具体执行逻辑部分加上状态判断，如下：
// 创建resolve方法
const resolve = res => {
// 为了使状态一但修改后就无法修改，添加判断
if(this.status === "pending") {
this.status = "fulfilled";
this.value = res;
}
}
// 创建reject方法
const reject = err => {
// 为了使状态一但修改后就无法修改，添加判断
if(this.status === "pending") {
this.status = "rejected";
this.reason = err;
}
}
此时发现resove和reject两个方法中重复的内容比较多，把代码优化一下，完整代码如下：
function changePromiseStatus(tar, key, value) {
if(tar.status === "pending") {
tar[key] = value;
// 如果key为value代码是fulfilled,如果key是reason是rejected
tar.status = key === 'value' ? 'fulfilled' : 'rejected';
}
}
class MyPromise {
status = "pending"; // 状态
value = undefined; // 使用resove时记录的值
reason = undefined; // 使用reject时记录的出错原因
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;
}
}
}
到此时promise的状态凝固也已经完成，但是还有一个问题，因为promise主要是解决异步问题的，那我们试着处理一下异步的情况看看？
const p = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(500)
}, 100);
});
p.then(res => console.log(res))
你会发现，居然没有打印任何内容，无输出。
这是因为当then方法调用的时候，此时setTimeout里的resolve(500)这条代码还未执行，此时实例的状态为pending，而此时then方法并没有pending状态的处理逻辑，所以没有内容输出。
要解决这个问题，就需要用到订阅，发布的思想了，在then中将要执行的方法用一个数组收集起来，然后在resove,reject的具体执行再遍历数组执行这些方法，这样就可以使等状态改变后才开始执行就不会出现上面这种现象。如下：
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最基本的功能就已经完成了，下一篇将带来promise特色的then链式调用(https://www.jianshu.com/p/f50eae420e2d)。
