class Promise {
constructor(excutor) {
// 设置promise 状态 有 pending fulfilled rejected
this.promiseState = "pending";
// promise 返回的结果
this.promiseResult = null;
// 用于接收异步需要执行的函数
this.callbacks = [];
const that = this;
function resolve(data) {
// 当状态不是pending状态 说明已经改完状态,promise 只允许改变一次状态
if (that.promiseState !== "pending") return;
that.promiseResult = data;
// 执行reslove函数 将promise状态改为fulfilled
that.promiseState = "fulfilled";
for (let i = 0; i < that.callbacks.length; i++) {
that.callbacks[i].OnResolved &&
setTimeout(() => {
that.callbacks[i].OnResolved(data);
});
}
}
function reject(data) {
if (that.promiseState !== "pending") return;
// 执行reject函数 将promise状态改为rejected
that.promiseState = "rejected";
that.promiseResult = data;
for (let i = 0; i < that.callbacks.length; i++) {
that.callbacks[i].OnRejected &&
setTimeout(() => {
that.callbacks[i].OnRejected(data);
});
}
}
// 当在执行器函数里不调用resolve reject 使用throw new Error 或者代码有错误 就需要使用try catch 进行捕获错误
try {
excutor(resolve, reject);
} catch (err) {
// 捕获到错误则使用reject进行错误处理
reject(err.message);
}
}
// then 方法 当状态改变进行处理相对应状态的回调函数,then方法默认返回一个promise 当return undeined 或者其他值 then返回都是一个成功状态的promise
// 当回调函数里返回一个新的promise对象, 那么then 返回的就是这个promise对象的状态的promise
then(OnResolved = (value) => value, OnRejected = null) {
const self = this;
// 当then没有传第二个参数,此时如果有错的话就无法传递错误,使其异常穿透
if (typeof OnRejected !== "function") {
OnRejected = function (reason) {
throw reason;
};
}
// then 返回的都是一个promise对象 所以首先返回一个promise
return new Promise((resolve, reject) => {
// 封装函数
function callback(type) {
try {
// 先执行 传入的函数看是否是promise promise的话状态就是then的状态,不行promise直接resolve(result)
let result = type(self.promiseResult);
result instanceof Promise
? result.then(
(v) => {
resolve(result);
},
(r) => {
reject(result);
}
)
: resolve(result);
} catch (e) {
reject(e);
}
}
// 当执行到then的时候,promise状态还是pending,证明是没有调用resolve或reject 或 抛出错误,极大可能是进行异步操作
if (this.promiseState === "pending") {
// 异步操作需要将then方法里的回调函数收集起来,等之前异步结束,调用resolve等方法时调用这些回调函数
// 避免将之前的回调函数覆盖,采用数组追加的方式进行添加
this.callbacks.push({
OnResolved: function () {
callback(OnResolved);
},
OnRejected: function () {
callback(OnRejected);
},
});
} else {
// 不是pending状态
this.promiseState === "fulfilled"
? setTimeout(() => {
callback(OnResolved);
})
: setTimeout(() => {
callback(OnRejected);
});
}
});
}
catch(OnRejected) {
// console.log(this.then);
return this.then(undefined, OnRejected);
}
static resolve(value) {
return new Promise((resolve, reject) => {
value instanceof Promise
? value.then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
)
: resolve(value);
});
}
static reject(value) {
return new Promise((resolve, reject) => {
reject(value);
});
}
static all(promise) {
let count = 0;
let result = [];
return new Promise((resolve, reject) => {
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
count++;
result[i] = v;
if (count === promise.length) {
resolve(result);
}
},
(r) => {
reject(r);
}
);
}
});
}
static race(promise) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promise.length; i++) {
promise[i].then(
(v) => {
resolve(v);
},
(r) => {
reject(r);
}
);
}
});
}
}
promise原理手写
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 文章内容输出来源:拉勾教育大前端高薪训练营文章说明:文章内容为学习笔记,学徒之心,仅为分享; 如若有误,请在评论区...
- class Promise{ constructor(excutorCallBack){ this.status ...