Promise是很重要的知识点,必须牢记于心,下面是自定义实现的Promise:
class MyPromise {
//定义promise的3个状态
//初始状态,既不是完成,也不是失败
static PENDING = "pending";
//操作成功的状态
static FULFILLED = "fulfilled";
//操作失败的状态
static REJECTED = "rejected";
constructor(excutor) {
//初始化状态
this.status = MyPromise.PENDING;
//需要保存的回调函数
this.callbacks = [];
//初始值
this.value = undefined;
//
try {
// 调用excutor函数,注意resolve和reject的this在严格模式下是undefined
//要将当前的this传入给resolve和reject,形成新的函数
excutor(this.resolve.bind(this), this.reject.bind(this));
} catch (error) {
//将捕获的错误交给reject()函数
this.reject(error);
}
}
//成功时
resolve(value) {
//只有当为初始状态才进行
if (this.status === MyPromise.PENDING) {
//当成功时,修改状态,并赋值
this.status = MyPromise.FULFILLED;
this.value = value;
//在setTimeout()中抛出,并且是异步的
setTimeout(() => {
this.callbacks.forEach(callback => {
callback.onResolve(value);
})
})
}
}
//失败时
reject(reason) {
//只有当为初始状态才进行
if (this.status === MyPromise.PENDING) {
//当失败时,修改状态,并赋值
this.status = MyPromise.REJECTED;
this.value = reason;
//在setTimeout()中抛出,并且是异步的
setTimeout(() => {
this.callbacks.forEach(callback => {
callback.onRejected(value);
})
})
}
}
then(onResolve, onRejected) {
//注意如果并没有传入函数时,默认设置为一个空函数,并将当前值保存下来
//then具有穿透功能
//如 let p = new Promise((resolve,reject)=>{
// resolve("成功")
// })
// p.then().then(value=>console.log(value)) //=>成功
if (typeof onResolve !== "function") {
onResolve = () => this.value;
}
if (typeof onRejected !== "function") {
onRejected = () => this.value;
}
//返回的是MyPromise对象
let promise = new MyPromise((resolve, reject) => {
//如果为成功状态
if (this.status === MyPromise.FULFILLED) {
this.parse(promise, onResolve(this.value), resolve, reject);
}
if (this.status === MyPromise.REJECTED) {
this.parse(promise, onRejected(this.value), resolve, reject);
}
// 如果resolve()是在setTimeout()中进行的
// 如 let p = new Promise((resolve, reject) => {
// setTimeout(() => {
// resolve("成功")
// }, 100);
// })
// p.then(value => console.log(value)) //=>成功
//需要把当前需要进行的函数保存下来
if (this.status === MyPromise.PENDING) {
this.callbacks.push({
onResolve: value => {
this.parse(promise, onResolve(value), resolve, reject);
},
onRejected: value => {
this.parse(promise, onRejected(value), resolve, reject);
}
})
}
})
return promise;
}
parse(promise, result, resolve, reject) {
setTimeout(() => {
//自己调用自己时,抛出错误
if (promise === result) {
throw new TypeError("Chaining cycle detected");
}
try {
//将当前return的值抛出,让下一个then接收
//如果return的值是MyPromise对象则return出常数
if (result instanceof MyPromise) {
//成功的交给resolve(),失败的交给reject()
// result.then(
// value => {
// resolve(value);
// },
// reason => {
// reject(reason);
// }
// )
//等于下面
result.then(resolve, reject);
} else {
resolve(this.value);
}
} catch (error) {
//抛给下一个then
reject(error);
}
})
}
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) => {
//如果当前的值是MyPromise对象,则返回它的值
if (value instanceof MyPromise) {
value.then(resolve, reject);
} else {
reject(value);
}
})
}
//当所有的promise都成功返回时才返回
static all(promises) {
const values = [];
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
promise.then(
value => {
values.push(value);
//如果都返回成功才返回
if (values.length === promises.length) {
resolve(values);
}
},
reason => {
//当有个失败的值便返回这个失败的值
reject(reason);
}
)
})
});
}
//当有一个promise成功返回时便返回这个promise
static race(promises) {
return new MyPromise((resolve, reject) => {
promises.forEach(promise => {
promise.then(
value => {
//有一个成功便返回
resolve(value);
},
reason => {
//有一个失败就返回
reject(reason);
}
)
})
});
}
}