手写一个Promise的封装承接上文继续进行:
上文实现功能:
功能1:搭建Promise基本结构实现
功能2:resolve、reject结构功能实现
链接直达:https://blog.csdn.net/czj1049561601/article/details/113829149#comments_15053958
本文实现封装功能:
功能1:throw抛出异常改变promise状态功能实现
功能2:确保Promise状态只能修改一次的功能实现
- throw抛出异常改变Promise对象的状态
前情介绍:
改变Promise对象状态的方式有三种:
1:调用resolve(' ok ')
2: 调用reject(' error')
3: 通过抛出异常来改变,语法上来说,等同与reject 会把对象状态改变为失败
明确目的:
正常来说,console的promise对象p 应该是一个失败的状态
同上篇博文介绍,利用throw ”error“ 来改变失败状态,预期输出打印对象的情况如下,内置的两个属性有相应的状态
let p=new Promise((resolve,reject)=>{
// resolve('OK');
// reject('error');
// 抛出异常
throw "error" //在promise执行器函数中执行的
})
console.log(p)
- 于是需要在Promise.js中做相应的封装处理来实现:
思路:
1:一看到throw,就应该想到try...catch 来处理这个抛出的异常
2:于是下一个问题:try..catch 加在代码的那个位置?
throw ”error " 是在promise执行器函数中执行的,于是promise.js中有如下封装
逻辑思路展示(重点):
1:实例对象p中抛出异常,期望改变promise状态为失败,内部封装处理时是在执行器函数执行时
2:throw出的erro直接作为参数传进catch中,然后调用reject直接来改变状态,同上一篇中的resolve/reject 功能实现!
3:链接直达:https://blog.csdn.net/czj1049561601/article/details/113829149#comments_15053958
示例代码如下(resolve/reject代码片段也放进来,原理见上一篇分析):
// 声明构造函数
function Promise(executor){
// 添加属性,以便下面修改
this.PromiseState="pendding";
this.PromiseResult=null;
// 保存实例对象的 this 的值
const self=this;
// resolve函数
function resolve(data){
// 1.修改对象的状态
self.PromiseState="fulfilled";//和resolved一样的含义,都表示成功
// 2.设置对象的结果值
self.PromiseResult=data;
}
// reject函数
function reject(data){
// 1.修改对象的状态
self.PromiseState="rejected";
// 2.设置对象的结果值
self.PromiseResult=data;
}
try{
// 同步调用 -- 执行器函数
executor(resolve,reject);
}catch(err){
// 修改 promise 对象的状态为失败
reject(err);
}
}
// 添加then方法
Promise.prototype.then=function(onResolved,onRejectd){
}
实例结果:
- 验证对比
可以去掉代码中的script引用,来使用内部的promise,而非自定义的查看效果,结果相同!
<title>Promise封装</title>
//<script src="./Promise.js"></script>//注释掉这里,重新运行进行对比
<script>
let p=new Promise((resolve,reject)=>{
// resolve('OK');
// reject('error');
// 抛出异常
throw "error"
})
console.log(p)
</script>
4. 封装继续----确保状态只能修改一次
逻辑思路
思路很简单:在改变状态之前进行相应的判断即可,在resove / reject 封装代码中加入如下判断确保状态单次更改
// 判断状态
if(self.PromiseState !== 'pendding') return;
// resolve函数
function resolve(data){
// 判断状态
if(self.PromiseState !== 'pendding') return;
// 1.修改对象的状态
self.PromiseState="fulfilled";//和resolved一样的含义,都表示成功
// 2.设置对象的结果值
self.PromiseResult=data;
}
完整代码如下:
//------------------------------Promise.js代码---------------------------
// 声明构造函数
function Promise(executor){
// 添加属性,以便下面修改
this.PromiseState="pendding";
this.PromiseResult=null;
// 保存实例对象的 this 的值
const self=this;
// resolve函数
function resolve(data){
// 判断状态
if(self.PromiseState !== 'pendding') return;
// 1.修改对象的状态
self.PromiseState="fulfilled";//和resolved一样的含义,都表示成功
// 2.设置对象的结果值
self.PromiseResult=data;
}
// reject函数
function reject(data){
// 判断状态
if(self.PromiseState !== 'pendding') return;
// 1.修改对象的状态
self.PromiseState="rejected";
// 2.设置对象的结果值
self.PromiseResult=data;
}
try{
// 同步调用 -- 执行器函数
executor(resolve,reject);
}catch(err){
// 修改 promise 对象的状态为失败
reject(err);
}
}
// 添加then方法
Promise.prototype.then=function(onResolved,onRejectd){
}
}
演示结果:
同时存在resolve(”OK“)以及 reject (” error“)来判断Promise状态是否单次执行
let p = new Promise((resolve, reject) => {
resolve('OK');//更换二者位置进行验证如下,符合预期结果,封装成功。
reject('error');
// 抛出异常
// throw "error"
})
console.log(p)
运行验证如下: