前面两节实现了promise的基本功能和链式调用，接下来就这个系列最后一节了，实现4个静态方法。
- race方法
- all方法
- resolve方法
- reject 方法
race方法
特征：(1)接收一组promise对象作为参数。(2)返回一个新的promise实例对象。(3)传过来的一组promise实例中，谁最先改变状态完成，返回的promise对象中就包含谁的结果。
了解了特征之后，就开始编码
static race(promises) {
// 返回一个新的promise对象
return new MyPromise((resolve, reject) => {
// 遍历数组所有实例，根据promise的状态凝固性，最后的结果只会第一次resolve或reject的传
promises.forEach(item => item.then(res => {
resolve(res);
}, err => {
reject(err);
}))
});
}
接下来开始测试环节：
const p1 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(1000);
}, 1000)
});
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(800);
}, 800)
});
const p3 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(600);
}, 600)
});
const p = MyPromise.race([p1, p2, p3]);
p.then(res => console.log(res))
最后输出的结果为600，结果正确。
all方法
特征：(1)传入一组promise实例作为参数。(2)返回一个新的promise对象实例。(3)每组promise实例的结果按照其顺序一一存储在一组数组作为promise实例结果返回。(4)只要其中一个实例出现问题就直接reject出去
static all(promises) {
return new MyPromise((resolve, reject) => {
let result = [];
let times = 0;
// 将成功结果放入数组中对应的位置
const processSuccess = (index, val) => {
result[index] = val;
if (++times === promises.length) {
resolve(result); // 全部执行成功，返回 result
}
};
// 遍历处理集合中的每一个 promise
for (let i = 0; i < promises.length; i++) {
promises[i].then(
data=>processSuccess(i, data), // 按照执行顺序存放执行结果,
err => reject(err)
);
}
});
}
分别测试以下代码：
const p1 = new MyPromise((resolve, reject) => {
resolve(1000);
});
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(800);
}, 800)
});
const p3 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(600);
}, 600)
});
const p = MyPromise.all([p1, p2, p3]);
p.then(res => console.log(res), err => console.log(err))
运行结果为：[1000, 800, 600]
const p1 = new MyPromise((resolve, reject) => {
resolve(1000);
});
const p2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
reject(800);
}, 800)
});
const p3 = new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve(600);
}, 600)
});
const p = MyPromise.all([p1, p2, p3]);
p.then(res => console.log(res), err => console.log(err))
运行结果为：800
其实此外还有优化空间，比如每个列表的处理结果仍然还是一个promise对象的话，就得和链接式部分的传给下一仍是一个promise的处理是一样的，因为这种场景实在是不常见，就不做处理了。
resolve方法
特征：(1)传一个值。(2)直接执行的内部resolve方法。(3)返回的是一个新的promise实例
既然是这样的特征这个就比较简单了，如下：
static resolve(data) {
return new MyPromise((resolve, reject) => {
resolve(data);
});
}
当然了，如果再传入的是一个promise的话就要判断处理一下了
static resolve(data) {
return new MyPromise((resolve, reject) => {
// 判断data是否为一个promise实例
if(data instanceof MyPromise) {
data.then(resolve, reject); // 如果为promise对象就先取其结果再通过reslove,reject传值
} else {
resolve(data);
}
});
}
reject 方法
特征：(1)传一个值。(2)直接执行的内部reject方法。(3)返回的是一个新的promise实例
reject方法和resolve方法基本是差不多的，就不多做说明了，直接上代码
static reject(data) {
return new MyPromise((resolve, reject) => {
// 判断data是否为一个promise实例
if(data instanceof MyPromise) {
data.then(resolve, reject); // 如果为promise对象就先取其结果再通过reslove,reject传值
} else {
reject(data);
}
});
}
以上3节就基本从零开始一步步实现了一个promise该有功能，还有许多完善的地方，如一些细节还可以优化，还有catch方法也没有定义(catch方法其实就和then方法中第二个参数onRejected的逻辑很像)。
至此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);
});
}
}
});
}
static race(promises) {
// 返回一个新的promise对象
return new MyPromise((resolve, reject) => {
// 遍历数组所有实例，根据promise的状态凝固性，最后的结果只会第一次resolve或reject的传
promises.forEach(item => item.then(res => {
resolve(res);
}, err => {
reject(err);
}))
});
}
static all(promises) {
return new MyPromise((resolve, reject) => {
let result = [];
let times = 0;
// 将成功结果放入数组中对应的位置
const processSuccess = (index, val) => {
result[index] = val;
if (++times === promises.length) {
resolve(result); // 全部执行成功，返回 result
}
};
// 遍历处理集合中的每一个 promise
promises.forEach((item , i) => {
item.then(
data => processSuccess(i, data),
err => reject(err)
)
})
});
}
static resolve(data) {
return new MyPromise((resolve, reject) => {
// 判断data是否为一个promise实例
if(data instanceof MyPromise) {
data.then(resolve, reject); // 如果为promise对象就先取其结果再通过reslove,reject传值
} else {
resolve(data);
}
});
}
static reject(data) {
return new MyPromise((resolve, reject) => {
// 判断data是否为一个promise实例
if(data instanceof MyPromise) {
data.then(resolve, reject); // 如果为promise对象就先取其结果再通过reslove,reject传值
} else {
reject(data);
}
});
}
}
