简单手写promise
前端面试经常被问promise,查阅资料后就想手写一个简单的promise实现
1.新建一个promise类，考虑到peomise,是由状态推动的，添加状态，结果和错误原因等属性
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
}
}2.在promise中两个函数作为参数分别作为状态为fullfilled--resolve和reject--reject
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
}
resolve(data){
if(this.status=="pending") {
this.status=="resolve"
this.value=data
}
}
reject(reason){
if(this.status=="pending") {
this.status=="reject"
this.value=reason
}
}
}3. 在promise函数中是立执行的，添加executor函数作为立执行函数
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
executor(this.resolve,this.reject)
}这样执行过后会出现报错，指向this为window，所以使用bind来改变this指向
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
executor(this.resolve.bind(this),this.reject.bind(this))
}此处可以基本执行，但多考虑一点直接抛出错误后reject执行不到，这里用到try...catch，进行错误的抓取，ps:catch中的this非window
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
try{
//立即执行
executor(this.resolve.bind(this),this.reject.bind(this))
}catch{
this.reject(e)
}
}4.现在考虑promise.then(function1,function2)
then(onresolve,onreject){
//使用条件运算符，如果参数不是函数那么做判断返回一个空函数
onresolve= typeof onresolve=="function"?onresolve:()=>{}
onreject= typeof onresolve=="function"?onreject:()=>{}
if(this.status=="resolve") {
onresolve(this.value)
}
if(this.status=="reject") {
onreject(this.value)
}
}这样就可以得到then的功能，不过这里并没有体现出异步的能力，我们需要resolve和reject的函数中添加异步操作，且resolve和reject的代码需要在最后执行，所以
resolve(data){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="resolve"
this.value=data
}
})
}
reject(reason){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="reject"
this.value=reason
}
})
}
then(onresolve,onreject){
//使用条件运算符，如果参数不是函数那么做判断返回一个空函数
onresolve= typeof onresolve=="function"?onresolve:()=>{}
onreject= typeof onresolve=="function"?onreject:()=>{}
if(this.status=="resolve") {
//同时考虑异步操作，实际还是用到了定时器
setTimeout(()=>{
onresolve(this.value)
})
}
if(this.status=="reject") {
setTimeout(()=>{
onreject(this.value)
})
}
})
}5.我们在promise中形参函数中resolve用定时器包裹，用then来做成功回调，会执行resolve，但根据我们的代码执行后会发现不会在执行resolve,那是因为根据事件循环，执行promise内部函数后会执行then的成功回调，由于状态还没有变为成功的状态，所以不会执行then中的成功回调，我们需要在then中添加状态为pending时，传进来的回调函数，这里可以用发布--订阅的模式来解决
先在constructor中添加两个属性来存入回调函数
this.resolveArrs=[];
this.rejectArrs=[]
在状态成功时进行释放
resolve(data){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="resolve"
this.value=data
this.resolveArrs.forEach(item=>[
item(data)
])
}
})
}
reject(reason){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="reject"
this.value=reason
this.rejectArrs.forEach(item=>[
item(reason)
])
}
})
}
在then中状态为pending时添加订阅者
if(this.status="pending"){//添加观察者
this.resolveArrs.push(onresolve)
this.rejectArrs.push(onresolve)
}6.然后就是then的链式调用
then(onresolve,onreject){
//使用then,返回链式结构promise
//使用条件运算符，如果参数不是函数那么做判断返回一个空函数
return new newsPomise((onresolve,onreject)=>{
onresolve= typeof onresolve=="function"?onresolve:()=>{}
onreject= typeof onresolve=="function"?onreject:()=>{}
if(this.status="pending"){//添加观察者
this.resolveArrs.push(onresolve)
this.rejectArrs.push(onresolve)
}
//同时考虑异步操作，实际还是用到了定时器
if(this.status=="resolve") {
setTimeout(()=>{
onresolve(this.value)
})
}
if(this.status=="reject") {
setTimeout(()=>{
onreject(this.value)
})
}
})
// onresolve= typeof onresolve=="function"?onresolve:function(data){this.resolve(data)}
// onreject= typeof onresolve=="function"?onreject:function(data){this.reject(data)}
}完整代码 错误返回this.reject(error)
class newsPomise{
constructor(executor){
this.status="pending" //执行状态
this.value = ""//结果
this.reason = "";//原因
this.resolveArrs=[];//添加数组的原因，是为了利用发布与观察者模式，在状态为pending状态时添加到数组中作为回调函数来调用
this.rejectArrs=[]
try{
//立即执行
executor(this.resolve.bind(this),this.reject.bind(this))
}catch{
this.reject(e)
}
}
resolve(data){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="resolve"
this.value=data
this.resolveArrs.forEach(item=>[
item(data)
])
}
})
}
reject(reason){
setTimeout(()=>{
if(this.status=="pending") {
this.status=="reject"
this.value=reason
this.rejectArrs.forEach(item=>[
item(reason)
])
}
})
}
then(onresolve,onreject){
//使用then,返回链式结构promise
return new newsPomise((onresolve,onreject)=>{
//使用条件运算符，如果参数不是函数那么做判断返回一个空函数
onresolve= typeof onresolve=="function"?onresolve:()=>{}
onreject= typeof onresolve=="function"?onreject:()=>{}
if(this.status="pending"){//添加观察者
this.resolveArrs.push(onresolve)
this.rejectArrs.push(onresolve)
}
//同时考虑异步操作，实际还是用到了定时器
if(this.status=="resolve") {
setTimeout(()=>{
onresolve(this.value)
})
}
if(this.status=="reject") {
setTimeout(()=>{
onreject(this.value)
})
}
})
}