手写一个Promise完成resolve 和 reject状态的改变和修改属性
2023-09-27 14:22:17 时间
1.手写 Promise
1 创建一个文件 Promise.js;内容
function Promise(){
}
2 引入 Promise.js 这个文件
<script src="./Promise.js"></script>
<script type="text/javascript">
let p = new Promise((resolve, reject) => {
resolve('ok')
})
p.then(res => {
console.log(res)
}, err => {
})
</script>
你会发现上面这个文件会报错,报错的原因是因为:
你引入了这个 Promise.js文件;并且里面的函数是Promise;
它覆盖了全局的Promise;这个是原因1;
还有一个原因是 Promise.js文件中的的函数是Promise;
没有then方法;如果给Promise添加一个then方法,那么就不会报错的哈
3. Promise.js 文件;变为如下
function Promise(){
}
Promise.prototype.then=function(){
}
4.自定义 resolve 和 reject 这样的结构
Promise.js 文件;变为如下
function Promise(executor){
// 声明成为一个函数,要接受一个形参;因为传递过来的时候有参数
function resolve(data){
}
// 同样声明成为一个函数
function reject(err){
}
// executor会拿到resolve, reject传递过来的函数
// resolve和reject因为在传递过来的是一个函数,所以在声明的时候,也应该是一个函数哈~
// 执行器函数在内部是同步调用的
executor(resolve,reject);
}
Promise.prototype.then=function(onResolve,onReject){
}
5.实现 resolve 和 reject
function Promise(executor){
function resolve(data){
//resolve函数主要有两个作用
// 1 修改对象的状态,Promise;
// 这个状态是【PromiseStatus】是Promise的一个属性;不同的版本可能是不一样的
this.PromiseStatus='resolved';//修改Promise的状态为成功
// 2设置对象的结果;【PromiseValue】是【PromiseStatus】是一个属性;同的版本可能是不一样的
this.PromiseValue=data;//设置结果
}
// 同样声明成为一个函数
function reject(err){
}
// 给Promise添加一个属性pending;
this.PromiseStatus ='pending' ;
this.PromiseValue =null;
executor(resolve,reject);
}
Promise.prototype.then=function(onResolve,onReject){
}
6. 你可能会遇见的坑
1==>当你在控制台输出的时候,你会发现
状态没有发生改变
PromiseStatus=“pending”
PromiseValue=null;
那是因为你的this指向发生了改变
2==>executor不要放在最前面;
executor(resolve,reject);
const self=this;
这样会出问题的哈~
因为 executor(resolve,reject);的时候;会去掉用resolve和reject这两个函数
而resolve函数中此时还没有self;
所以会报错sel出现undefined
7.出坑
function Promise(executor){
const self=this;
function resolve(data){
//resolve函数主要有两个作用
// 1 修改对象的状态,Promise;
// 这个状态是【PromiseStatus】是Promise的一个属性;不同的版本可能是不一样的
// this.PromiseStatus='resolved';//修改Promise的状态为成功 X
self.PromiseStatus='resolved';
// 2设置对象的结果;【PromiseValue】是【PromiseStatus】是一个属性;同的版本可能是不一样的
// this.PromiseValue=data;//设置结果 x
self.PromiseValue=data;
// console.log(this);//你会发现这个this是window
}
// 同样声明成为一个函数;修改状态
function reject(err){
self.PromiseStatus='rejected';
self.PromiseValue=err;
}
// 给Promise添加一个属性pending;
this.PromiseStatus ='pending' ;
this.PromiseValue =null;
executor(resolve,reject);//这个放在后面;它回去调用resolve和reject函数
}
Promise.prototype.then=function(onResolve,onReject){
}
相关文章
- 你知道,什么时候用Vue计算属性吗?
- delphi: MSComm的属性
- 知识图谱-第三方工具:DeepKE【支持低资源、长篇章的知识抽取工具,支持:①命名实体识 别、②关系抽取、③属性抽取】【基于PyTorch+Transformers】
- layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法
- java list分组 list里面分装的都是对象 按照对象的属性来分组
- propertiesutils 读取属性信息
- lombok的@Accessors注解3个属性说明
- MySQL 的read_only 只读属性说明 (运维笔记)
- Spring中的@Transactional(rollbackFor = Exception.class)属性详解
- delphi控件属性大全-详解-简介
- 手写一个Promise完成resolve 和 reject状态的改变和修改属性
- transform 属性之 transform-origin与顺序问题
- Dynamics CRM Form表单中通过javascript抓取触发change事件字段的属性名
- PyQt(Python+Qt)学习随笔:QTableWidget的currentItem、rowCount、columnCount等部件状态属性访问方法
- 第8.32节 Python中重写__delattr__方法捕获属性删除
- 第8.25节 Python风格的__getattribute__属性访问方法语法释义及使用
- Android之Bean属性通知类
- .NET Core(C#) System.Text.Json自定义转换器及获取属性名称的方法及示例代码
- Intent的简介以及属性的详解
- 4.level4-[本地复现]-[伪变量$this访问类方法中隐藏的成员变量]-[私有和保护属性的序列化]
- 自定义属性应用-自定义属性行转列