当前位置:网站首页>ES5和SE6来实现一个Promise效果
ES5和SE6来实现一个Promise效果
2022-08-10 13:07:00 【快乐的蜜蜂】
这个是ES5的写法
function myPromise(executor) {
// 定义promise的状态
let self = this;
self.status = "pendding";
self.value = null; // 成功之后 返回数据
self.reason = null; // 失败之后返回原因
// 这个是 发布订阅
self.fulfilledCallbackList = [];
self.rejectCallbackList = [];
// 定义完成时的方法
function resolve(value) {
if (self.status == "pendding") {
self.status = "fulfilled";
self.value = value;
self.fulfilledCallbackList.forEach(item => item(value));
}
}
// 这个是 异常时候的方法
function reject(err) {
if (self.status == "pendding") {
self.status = "rejected";
self.reason = err;
self.rejectCallbackList.forEach(item => item(err));
}
}
// 这个是 立即执行 executor里面的方法
try {
executor && executor(resolve, reject);
} catch (err) {
reject(err.message);
}
}
// 这个是 原型链上面的 then 方法
myPromise.prototype.then = function (onFulfilled, onRejected) {
// 这里 还要 判断一下 传入进来 是不是一个方法
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (data) { resolve(data) };
onRejected = typeof onRejected == 'function' ? onRejected : function (err) { throw err; }
let self = this;
// 这里是 then 里面的回调部分
if (self.status == "fulfilled") {
// 链式调用 就是 直接返回一个 Promise
return new myPromise((resolve, reject) => {
try {
let x = onFulfilled(self.value);
x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
} catch (err) {
reject(err);
}
});
}
// 这个是 失败的状态
if (self.status == "rejected") {
return new myPromise((resolve, reject) => {
try {
let x = onRejected(self.reason);
x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
} catch (err) {
reject(err);
}
});
}
// 这个是 pendding的状态
if (self.status == "pendding") {
return new myPromise((resolve, reject) => {
self.fulfilledCallbackList.push(() => {
let x = onFulfilled(self.value);
x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
});
self.rejectCallbackList.push(() => {
let x = onRejected(self.reason);
x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
});
});
}
}
myPromise.prototype.catch = function(fn) {
this.then(null, fn);
}
const aaa = new myPromise((resolve, reject) => {
console.log(111);
setTimeout(() => {
resolve("2222222222222");
}, 2000);
}).then((res, rej) => {
return new myPromise((re1, rj1)=>{
re1(res + "sdfsdfsdfsdf");
});
}).then((res1, rej1)=>{
console.log(res1);
});
console.log("aaa", aaa);
这个是ES6 Class版本的实现
class MyPromise {
constructor(executor) {
// 这个是 promise的状态机制
this.status = "pendding";
// 这个是 成功的值
this.value = null;
// 这个是 失败的值
this.reason = null;
// 这里是 发布订阅的部分
this.fulfilledCallbacks = [];
this.rejectedCallbacks = [];
// 这个是 立即执行 executor里面的方法
try {
// 这里要绑定 this , 然后下面的 函数 才能 拿到这里的this
executor && executor(this.resolve.bind(this), this.reject.bind(this));
} catch (err) {
this.reject(err.message);
}
}
resolve(data) {
if (this.status == "pendding") {
this.status = "fulfilled";
this.value = data;
// 这个是 发布 订阅里面的函数
this.fulfilledCallbacks.forEach(item => item(data));
}
}
// 这个是 reject 拒绝的方法
reject(err) {
if (this.status == "pendding") {
this.status = "rejected";
this.reason = err;
this.rejectedCallbacks.forEach(item => item(err));
}
}
// 这个是 then 方法
then(onFulfilled, onRejected) {
let self = this;
// 这个是 判断 传进来的是否是 方法
onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (data) { self.resolve(data) };
onRejected = typeof onRejected == 'function' ? onRejected : function (err) { throw err };
// 这里是成功的值
if (self.status == "fulfilled") {
// 这里是 链式调用的部分 通过返回 MyPromise 来实现
return new MyPromise((resolve, reject) => {
try {
let x = self.onFulfilled(self.value);
x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
} catch (error) {
reject(error);
}
});
}
// 这里是 失败的时候
if (self.status == "rejected") {
return new MyPromise((resolve, reject) => {
try {
let x = onRejected(self.reason);
x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
} catch (error) {
reject(error);
}
});
}
// 这里是 pendding 加载的时候
if (self.status == "pendding") {
return new MyPromise((resolve, reject) => {
self.fulfilledCallbacks.push(() => {
let x = onFulfilled(self.value);
x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
});
self.rejectedCallbacks.push(() => {
let x = onRejected(self.reason);
x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
});
});
}
}
catch(fn) {
this.then(null, fn);
}
}
const aaa = new MyPromise((resolve, reject) => {
console.log(111);
setTimeout(() => {
resolve("我是输出.");
}, 2000);
}).then((res, rej) => {
return new MyPromise((re1, rj1)=>{
console.log("res", res);
setTimeout(() => {
re1(res + "对,我是后面的输出");
}, 2000);
});
}).then((res1, rej1)=>{
console.log(res1);
});
console.log("aaa", aaa);
边栏推荐
- Redis上云迁移实践
- tampercfg内核模块导致机器频繁crash
- 22家!北京昌平区通报存在食品安全问题餐饮服务企业
- C# 当前上下文中不存在InitializeComponent()
- NodeJs原理 - Stream(二)
- 11 + chrome advanced debugging skills, learn to direct efficiency increases by 666%
- AtCoder初学者比赛077 D -小多
- 3DS MAX batch export file script MAXScript with interface
- Makefile missing separator. Stop.怎么解决「建议收藏」
- DNS欺骗-教程详解
猜你喜欢
随机推荐
LeetCode medium topic search of two-dimensional matrix
Ethernet channel Ethernet channel
The basic components of Loudi plant cell laboratory construction
Interface Automation Testing Basics
Fragment的show和hide
A unit test report for CRM One Order Application log
The recursive recursive Fighting_ silver study ah but level 4
指针(C语言初解)
2022-08-09:以下go语言代码输出什么?A:否,会 panic;B:是,能正确运行;C:不清楚,看投票结果。 package main import ( “fmt“ “syn
OTA自动化测试解决方案---整体方案介绍
【目标检测】小脚本:提取训练集图片与标签并更新索引
Detailed explanation of es6-promise object
Drive IT Modernization with Low Code
Stream通过findFirst()查找满足条件的一条数据
R语言使用gt包和gtExtras包优雅地、漂亮地显示表格数据:gtExtras包的gt_highlight_rows函数高亮(highlight)表格中特定的数据行、配置高亮行的特定数据列数据加粗
【219】慕课三千多的那个go工程师的培训课笔记 02 go语言的编程思想
【黑马早报】雷军称低谷期曾想转行开酒吧;拜登正式签署芯片法案;软银二季度巨亏230亿美元;北京市消协约谈每日优鲜...
【学习笔记】Redis的持久化
商汤自研机械臂,首款产品是AI下棋机器人:还请郭晶晶作代言
【MinIO】工具类使用