1、看Promise
首先浅看一下es6的promise 大概有哪些内容,即开始 new Promise实例化的时候需要两个参数(其实是两个函数 ,人家里面给你留的)然后 你里面进行 参数操作 如果成功就调用resolve把成功的参数传进去
然后就能在then里面接收到两个函数 ,第一个函数是操作的resolve传进来的参数,第二个是reject 失败后的参数
接下来我们就能简单实现这两个功能,首先里面有三种状态pending 等待态 fulfilled 完成态 rejected 失败态
开始实例化的时候,里面开始就是等待态 ,其实我们发现,原来的Promise 先调用resolve后reject就失效了
如下:
2、做简易Promise
2.1、分析1
2.1.1、解决只能优先调用一个的问题
那简单,直接进行判断,只要当前状态是等待态我们就阔以进行状态修改和值的修改
if (this.status !== "PENDING") return //promise只会有一种状态,由等待转成功 或者失败
this.status = "FULFILLED" //改变状态说明这个已经调用过了,后续就不能掉用了
this.value = successInfo
2.1.2、解决then
我们原来的Promise,以及上面我们看到的截图,两个参数,也是两个函数,第一个函数是成功状态,第二个是失败状态,那好办啊,因为函数执行executor,调用resolve,reject时状态就会变了啊,所以我们直接在对象里面调用时进行状态判断,由于成功和失败的值都已经保存好了,直接把值传给这将要执行的函数就行
then(onFulfilled,onRejected){
if(this.status==="FULFILLED"){
onFulfilled(this.value)
}
if(this.status=="REJECTED"){
onRejected(this.value)
}
}
2.1.3、解决catch
这个其实大可偷懒 ,直接调用then里面的onReject,第一个参数不要传null,第二个参数,这样还能在then直接就进行判断了
catch(onRejected){
this.then(null,onRejected)
}
2.1.3 、状态改变的操作 ,注释已写
class myPromise {
constructor(executor) {
if (typeof executor !== "function") {
return console.error(“mypromise must accept a function as a parameter”) //需要一个函数形式的参数
}
this.status = "PENDING" //函数状态 这个是等待态,即还没执行的时候
this.value = undefined //此时还没有值 ,存改变状态后成功或者错误的值
//成功的回调
let resolve = value=> {
if (this.status !== "PENDING") return //promise只会有一种状态,由等待转成功 或者失败
this.status = "FULFILLED" //改变状态说明这个已经调用过了
this.value = value
}
let reject = reason=> {
if (this.status !== "PENDING") return //promise只会有一种状态,由等待转成功 或者失败
this.status = "REJECTED" //改变状态说明这个已经调用过了
this.value = reason
}
try {
executor(resolve, reject) //将函数扔进去 这个才是实参,实例化的时候是形参,即随便取名,不一定非要叫resolve,reject
} catch (error) {
reject(err) //出现异常直接给reject
}
}
then(onFulfilled,onRejected){
if(this.status==="FULFILLED"){
onFulfilled(this.value)
}
if(this.status=="REJECTED"){
onRejected(this.value)
}
}
catch(onRejected){
this.then(null,onRejected)
}
}