前言
现在很多大厂面试前端都会要求能够手动的写出一个Promise，所以这里整理了一份手写的Promise。
绝对详细，功能绝对强大。如果你不了解Promise的基本使用，那么本篇文章可能不太适合你，如果你对Promise有过一些了解，那么这篇文章绝对是你进阶的好帮手。
除开catch()以及finally()和allSettled接口没实现之外，其他的所有原生Promise支持的功能此手写的Promise都支持。
书写Promise的难度其实就在于then()方法的链式调用以及值穿透传递，其他的其实都还好。
让这篇文章滚进你的收藏夹吧！
Promise状态实现
在原生Promise中具有三种状态，分别是
所以第一步，要先实现这三种状态。
并且在原生Promise中具有value用于记录resolve()与reject()中的值用于传递给then()方法。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始为准备状态
this.value = null; // 初始值
}
}
Promise执行函数
原生Promise的构造函数中会接收一个executor参数，该参数当是一个函数。
用于同步的执行当前任务，当任务完成后应该具有resolve()方法以及reject()方法来通知then()方法当前执行任务的执行状态并传递值。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
executor(this.resolve, this.reject); // 传递形参，运行executor函数
}
resolve(value) {
this.status = MyPromise.FUFILLED;
this.value = value;
}
reject(reason) {
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
上面这样写在执行resolve()以及reject()时会出现问题，原因是this指向为undefiled(严格模式)。
<script src="./Promise核心.js"></script>
<script>
"use strict";
let p1 = new MyPromise((resolve, reject) => {
resolve("成功")
})
console.log(p1);
</script>
这是由于我们在执行函数中调用了resolve()与reject()，故this指向为executor的函数上下文。
解决这个问题可以使用bind()来改变this指向。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
}
resolve(value) {
this.status = MyPromise.FUFILLED;
this.value = value;
}
reject(reason) {
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
Promise状态限制
当前Promise状态只应该改变一次而不能多次改变，显然我们上面的代码不能做到这点限制。
<script src="./Promise核心.js"></script>
<script>
"use strict";
let p1 = new MyPromise((resolve, reject) => {
resolve("成功");
reject("失败");
// 对于原生Promise来说，状态只能改变一次。但是这里却允许两次改变，故是有问题的
})
console.log(p1); // MyPromise {status: "rejected", value: "失败"}
</script>
所以这里要对代码加上限制。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
}
Promise执行异常
在执行函数executor中可能引发异常，这会让当前的Promise的状态改变为rejected。
所以在上面代码基础上需要加入try...catch进行处理。
当then()方法捕捉的执行函数中executor时，可以让第二个参数的函数对其异常进行处理，但是我们目前还没实现then()，所以直接丢给reject()即可，当实现then()时自然会使用到reject()中传递过来的值。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
}
then方法基础实现
原生的Promise状态改变后，可以执行其下的then()方法，所以我们需要来封装出一个then()方法。
then()方法接收两个函数，第一个函数onFulfilled用于处理上一个Promise的fulfilled状态，第二个函数onRejected用于处理上一个Promise的rejected状态。
并且then()方法中的这两个函数都应该具有一个形参，用于接收到Promise的resolve()或reject()中传递的值。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
then(onFulfilled, onRejected) {
if(this.status == MyPromise.FUFILLED){ // 状态改变时执行
onFulfilled(this.value);
}
if(this.status == MyPromise.REJECTED){ // 状态改变时执行
onRejected(this.value);
}
}
}
then方法参数优化
上面已经说过，then()方法具有两个参数，这两个参数分别对应两个函数用来处理上一个Promsie的resolve()与reject()。
但是在原生Promise中，这两个方法可以不进行传递，所以我们需要对上述代码进行优化。
当then()方法中的某一个参数不为函数时，让它自动创建一个空函数。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
then(onFulfilled, onRejected) {
if(typeof onFulfilled != "function"){ // 如果传入的不是一个函数，默认创建空函数
onFulfilled = ()=>{};
}
if(typeof onRejected != "function"){ // 如果传入的不是一个函数，默认创建空函数
onRejected = ()=>{};
}
if(this.status == MyPromise.FUFILLED){ // 状态改变时执行
onFulfilled(this.value);
}
if(this.status == MyPromise.REJECTED){ // 状态改变时执行
onRejected(this.value);
}
}
}
then方法异常捕获
当then()方法中处理fulfilled状态的函数onFulfilled或者处理rejected状态的函数onRejected在运行时出现异常应该进行捕获并且传递给下一个then()的处理rejected状态的函数onRejected。
这里我们先让所有的异常都交由当前then()处理rejected状态的函数onRejected，后面再进行优化。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
}
}
}
then方法异步执行
在原生的Promise中，executor函数是同步执行的，而then()方法是异步执行故排在同步执行之后。
但是我们的Promise却没有做到这一点，下面的实验将说明这个问题
<script src="./Promise核心.js"></script>
<script>
"use strict";
let p1 = new MyPromise((resolve, reject) => {
reject("失败");
}).then(
null,
error => {
console.log(error); // 先打印 失败
}
)
console.log("hello,Promise"); // 后打印 hello,Promise
</script>
最简单的解决方案就是为then()中处理成功或处理失败的函数运行外套上一个setTimeout，让其处理排在线程同步任务执行之后再进行执行。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
}
}
执行函数异步阻塞
此时我们的代码仍然具有一个问题，即在执行函数executor中使用setTimeout时，下面的then()会进行阻塞。
这是因为当前Promise状态是pending而then()方法中并没有对pending状态进行处理的策略所导致的。
<script src="./Promise核心.js"></script>
<script>
"use strict";
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("成功"); // 同步任务执行完三秒后才会改变当前Promise状态
}, 3000);
}).then((success) => { // 但是这里先执行了then，Promise状态为pending，故发生阻塞
console.log(success); // 阻塞了，不打印
})
</script>
既然当前Promise状态是pending，3秒后状态才发生改变，那么我们就可以通过不断的循环来看看它何时改变状态。
所以第一步是定义一个执行异步的数组。然后再将then()中处理正确的函数onFulfilled与处理错误的函数onRejected压进去。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled,
onRejected,
});
}
}
}
当数组压入完成后，执行函数executor会去调用resolve()或者reject()改变当前Promise状态。
所以我们还需要在resolve()与reject()方法中对异步的数组处理函数进行调用。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled,
onRejected,
});
}
}
}
异步执行函数的then异常捕获
上面我们对同步执行函数executor调用then()方法中可能出现的异常进行了处理。
就是下面这一段代码。
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
但是我们还没有对异步执行函数executor调用then()方法中可能出现的异常进行处理。
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled,
onRejected,
});
}
}
这会导致下面这样的使用场景出现问题。
<script src="./Promise核心.js"></script>
<script>
"use strict";
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("成功");
}, 3000);
}).then((success) => {
throw new Error("自定义异常抛出"); // 直接在处理成功状态的函数onFulfilled中抛出了异常，显然是不符合原生Promise的
});
</script>
那么我们就来加上异常捕获即可，这里还是先传递给当前then()处理rejected状态的函数，后面会做修改。
因为原版Promise会传递给下一个then()中处理rejected状态的函数，而不是当前then()。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try { // 异步executor改变状态对其then中的onFulfilled进行异常捕获
onFulfilled(value);
} catch (e) {
onRejected(e);
}
},
onRejected: value => {
try { // 异步executor改变状态对其then中的onRejected进行异常捕获
onRejected(value);
} catch (e) {
onRejected(e);
}
}
});
}
}
}
then方法链式操作
对于原生的Promise来讲，每一个then()最后返回的都是一个新的Promise。所以才能达到支持不断的then()进行链式操作，所以我们也可以这样做。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onFulfilled(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
onRejected(this.value);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try { // 异步executor改变状态对其then中的onFulfilled进行异常捕获
onFulfilled(value);
} catch (e) {
onRejected(e);
}
},
onRejected: value => {
try { // 异步executor改变状态对其then中的onRejected进行异常捕获
onRejected(value);
} catch (e) {
onRejected(e);
}
}
});
}
});
}
}
现在我们的Promise已经支持then()的链式操作了，但是上面代码还是遗留了几个问题。
接下来继续对代码做出优化调整。
then中返回普通值
在原生的Promise中每一个then()所产生的Promise默认状态都是fulfilled，如果当前then()返回是一个值的话那么下一个then()将接受到该值。
这个也非常简单，代码接收一下每一个onFulfilled()与onRejected()的返回值就好，并使用resolve()改变状态为fulfilled以及将值进行传递给下一个then()。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理成功的函数onFulfilled中出现异常，交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
let result = onFulfilled(this.value);
resolve(result);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try { // then处理失败的函数onRejected中出现异常,交由当前then处理失败的函数onRejected函数进行处理。这个后面会做优化
let result = onRejected(this.value);
resolve(result);
} catch (e) {
onRejected(e);
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try { // 异步executor改变状态对其then中的onFulfilled进行异常捕获
let result = onFulfilled(value);
resolve(result);
} catch (e) {
onRejected(e);
}
},
onRejected: value => {
try { // 异步executor改变状态对其then中的onRejected进行异常捕获
let result = onRejected(value);
resolve(result);
} catch (e) {
onRejected(e);
}
}
});
}
});
}
}
这样我们的then()就支持返回普通值了。
<script src="./Promise核心.js"></script>
<script>
"use strict";
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("成功");
}, 3000);
}).then((success) => {
return "hello";
}).then((success)=>{
console.log(success); // hello
});
</script>
then中的异常传递
在上面的代码中，then()方法里的处理成功函数onFulfilled以及处理失败函数onRejected在代码执行时抛出的异常都会统一进行捕获并且传递给当前then()方法处理失败的函数onRejected。
这个与原生的Promise有出入，对于原生Promise来讲应该是传递给下一个then()进行处理而不是当前then()。
改动也非常简单，将原来发生异常传递的函数onRejected()改为reject()即可，这就是传递给下一个then()。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => { };
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => { };
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onFulfilled(this.value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onRejected(this.value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try {
let result = onFulfilled(value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
},
onRejected: value => {
try {
let result = onRejected(value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
}
});
}
});
}
}
<script src="./Promise核心.js"></script>
<script>
"use strict";
new MyPromise((resolve, reject) => {
setTimeout(() => {
resolve("成功");
}, 3000);
}).then((success) => {
throw new Error("新错误");
}).then(null, error => {
console.log(error); // 上一个then的错误成功由该then接收
});
</script>
then穿透功能实现
在原生的Promise中是支持then()的穿透传值的。
<script>
"use strict";
new Promise((resolve, reject) => {
resolve("成功");
})
.then() // 穿透
.then(
success => {
console.log(success); // 成功
},
error => {
console.log(error);
})
</script>
但是我们的Promise却不支持。
<script src="./Promise核心.js"></script>
<script>
"use strict";
new MyPromise((resolve, reject) => {
resolve("成功");
})
.then() // 不支持穿透
.then(
success => {
console.log(success);
},
error => {
console.log(error);
})
</script>
原因在于如果没有对then()进行传递参数，那么内部其实是会创建两个空函数。
我们只需要在空函数内部返回this.value即可。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onFulfilled(this.value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onRejected(this.value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try {
let result = onFulfilled(value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
},
onRejected: value => {
try {
let result = onRejected(value);
resolve(result);
} catch (e) {
reject(e); // 传递给下一个then
}
}
});
}
});
}
}
then返回Promise
原生的Promise支持返回一个新的Promise，但是我们的Promise现在还不支持。
其实也很简单，判断一下then()中两个函数返回的是不是一个新的Promise，如果是的话则使用其then()方法将其中resolve()或reject()的值进行传递。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onFulfilled(this.value);
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
try {
let result = onRejected(this.value);
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 传递给下一个then
}
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
try {
let result = onFulfilled(value);
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 传递给下一个then
}
},
onRejected: value => {
try {
let result = onRejected(value);
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 传递给下一个then
}
}
});
}
});
}
}
then的代码优化
可以观察到上面的then()方法中有很多重复代码，所以我们需要对重复代码做一下优化。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
return new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(onFulfilled(this.value), resolve, reject);
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(onRejected(this.value), resolve, reject);
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
this.parse(onFulfilled(value), resolve, reject);
},
onRejected: value => {
this.parse(onRejected(value), resolve, reject);
}
});
}
});
}
parse(result, resolve, reject) {
try {
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 向下传递异常
}
}
}
then返回类型限制
我们都知道then()会创建一个Promise并返回，但是原生的Promise不支持then()将自己创建的Promise进行返回
<script>
"use strict";
let p1 = new Promise((resolve, reject) => {
resolve("成功");
})
let p2 = p1.then( // 由于then中的处理成功与处理失败的函数是属于异步执行。所以会先将创建好的Promise对象返回再运行其中的处理成功函数与处理失败函数。
success => {
return p2;
}
)
// Uncaught (in promise) TypeError: Chaining cycle detected for promise #<Promise>
</script>
但是我们的Promise还不支持这一点，所以需要改一改代码。
解决的思路也很简单，在运行失败或处理函数时判断一下本次返回的值是否等同于创建的Promise对象。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
let promise = new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onFulfilled(this.value), resolve, reject);
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onRejected(this.value), resolve, reject);
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
this.parse(promise, onFulfilled(value), resolve, reject);
},
onRejected: value => {
this.parse(promise, onRejected(value), resolve, reject);
}
});
}
});
return promise; // 同步，先返回。onFulfilled与onRejected由于套了setTimeout，是异步执行。
}
parse(promise, result, resolve, reject) {
if (promise == result) {
throw new TypeError("Chaining cycle detected");
}
try {
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 向下传递异常
}
}
}
resolve与reject实现
使用 Promise.resolve() 方法可以快速的返回一个状态是fulfilled的Promise对象。
使用 Promise.reject() 方法可以快速的返回一个状态是rejected的Promise对象。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
let promise = new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onFulfilled(this.value), resolve, reject);
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onRejected(this.value), resolve, reject);
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
this.parse(promise, onFulfilled(value), resolve, reject);
},
onRejected: value => {
this.parse(promise, onRejected(value), resolve, reject);
}
});
}
});
return promise; // 同步，先返回。onFulfilled与onRejected由于套了setTimeout，是异步执行。
}
parse(promise, result, resolve, reject) {
if (promise == result) {
throw new TypeError("Chaining cycle detected");
}
try {
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 向下传递异常
}
}
static resolve(value) {
return new MyPromise((resolve, reject) => {
if (value instanceof MyPromise) {
value.then(resolve, reject);
} else {
resolve(value);
}
});
}
static reject(value) {
return new MyPromise((resolve, reject) => {
reject(value);
});
}
}
all与race实现
使用Promise.all() 方法可以同时执行多个并行异步操作，比如页面加载时同进获取课程列表与推荐课程。任何一个 Promise 执行失败就会调用 catch方法，成功后返回 Promise 结果的有序数组。（Ps：我们这个Promise没有实现catch方法）
使用Promise.race() 处理容错异步，和race单词一样哪个Promise快用哪个，哪个先返回用哪个。
class MyPromise {
static PENDING = "pending";
static FUFILLED = "fulfilled";
static REJECTED = "rejected";
constructor(executor) {
this.status = MyPromise.PENDING; // 初始状态为准备状态
this.value = null; // 初始值
this.callbacks = []; // 如果是一个异步操作，则放入该数组中
try {
executor(this.resolve.bind(this), this.reject.bind(this)); // 传递形参，运行executor函数
} catch (e) {
this.status = MyPromise.REJECTED; // 异常发生改变状态
this.reject(e); // 记录异常信息
}
}
resolve(value) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.FUFILLED;
this.value = value;
this.callbacks.map(callback => { // // 调用处理异步executor里resolve的方法。
callback.onFulfilled(value);
})
}
}
reject(reason) {
if (this.status == MyPromise.PENDING) { // 限制
this.status = MyPromise.REJECTED;
this.value = reason;
this.callbacks.map(callback => { // 调用处理异步executor里reject的方法。
callback.onRejected(reason);
})
}
}
then(onFulfilled, onRejected) {
if (typeof onFulfilled != "function") { // 如果传入的不是一个函数，默认创建空函数
onFulfilled = () => this.value; // 支持穿透
}
if (typeof onRejected != "function") { // 如果传入的不是一个函数，默认创建空函数
onRejected = () => this.value; // 支持穿透
}
let promise = new MyPromise((resolve, reject) => { // 返回一个新的Promise
if (this.status == MyPromise.FUFILLED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onFulfilled(this.value), resolve, reject);
})
}
if (this.status == MyPromise.REJECTED) { // 状态改变时执行
setTimeout(() => { // 晚于线程同步任务执行
this.parse(promise, onRejected(this.value), resolve, reject);
})
}
if (this.status == MyPromise.PENDING) { // 如果当前Promise是等待处理状态，则将处理成功的函数与处理失败的函数压入异步数组。
this.callbacks.push({
onFulfilled: value => {
this.parse(promise, onFulfilled(value), resolve, reject);
},
onRejected: value => {
this.parse(promise, onRejected(value), resolve, reject);
}
});
}
});
return promise; // 同步，先返回。onFulfilled与onRejected由于套了setTimeout，是异步执行。
}
parse(promise, result, resolve, reject) {
if (promise == result) {
throw new TypeError("Chaining cycle detected");
}
try {
if (result instanceof MyPromise) { // 判断是否返回Promise对象
result.then(resolve, reject);
} else {
resolve(result); // 改变状态并将值交由下一个then接收
}
} catch (e) {
reject(e); // 向下传递异常
}
}
static resolve(value) {
return new MyPromise((resolve, reject) => {
if (value instanceof MyPromise) {
value.then(resolve, reject);
} else {
resolve(value);
}
});
}
static reject(value) {
return new MyPromise((resolve, reject) => {
reject(value);
});
}
static all(value) {
return new MyPromise((resolve, reject) => {
const values = []; // 记录当前有多少promise状态是成功
promise.forEach((promise) => {
promise.then(value => {
values.push(value);
if (values.length == promise.length) {
resolve(values); // 如果都成功，当前all返回的promise则状态为fulfilled。
}
}, reason => {
reject(reason); // 如果有一个promise错误，则当前all返回的promise则为拒绝
})
});
});
}
static race(value) {
return new MyPromise((resolve, reject) => {
value.forEach(promise => {
promise.then(value => { // 如果循环中的promise状态为fulfilled，则当前的race创建的promise状态也为resolve
resolve(value);
}, reason => {
reject(value); // 同上
})
})
})
}
}