第一阶段
一、首先第一步,new Promise查看一下
new Promise()
//对应的我的需要创建一个可以new的类,上面等同于下面,下面为我们手写的promise
class MyPromise()
二、Promise中是有着对应的方法函数
new Promise(()=>{})
//上方等同于下方
class MyPromise{constructor(fn){}}
三、测试一下Promise在调用时候是否是立即执行的得出,他里面的函数立即执行的,于是
new Promise(()=>{console.log('他会立即执行');})
//上面等同于下面我的手写
class MyPromise{
constructor(fn){
fn()
}
}
四、接下来已经初步完成了promise的基本架子了,给自己一点掌声吧。让我们来打印一下Promise有一些什么,我们来添加一下他的参数吧
let p1 = new Promise(()=>{console.log('他会立即执行');})
console.log(p1);
这里可以以看到,promise 中有着两个参数,分别为状态(PromiseState)以及响应结果(PromiseResult),这么说,我们手写中,也需要添加上这两个状态
class MyPromise{
PromiseState = "pending" //状态
PromiseValue = undefined //返回值
constructor(fn){
fn()
}
}
五、接下来就到了第五步,我们需要来实现一下,promise的resolve以及reject了,从下面可以看到,他函数中需要接收到两个参数,于是...
let p1 = new Promise((resolve,reject)=>{
resolve(100)
reject(100)
})
我需要在手写中接收这两个参数,你说对吗
constructor(fn){
fn(函数1,函数2)
}
于是我class中就要有两个函数对应函数1和函数2,来在类中调用,并且需要使用箭头函数,防止最后调用参数指向window,或者需要手动改变this指向,来让参数绑定到类中
constructor(fn){
fn(this.resolve,this.reject)
}
resolve=()=>{}
reject=()=>{}
//也可以是下面这种写法,用bind来改变this指向,不懂的可以自己实操打印就知道了
constructor(fn){
fn(this.resolve.bind(this),this.reject.bind(this))
}
resolve(){}
reject(){}
六、我们再运行一下之前new 的promise,看看里面还有啥
- 再次运行resolve(100)可得出,一个成功的状态,一个是返回的结果
可以看到,成功的方法可以让promise中的状态跟值得到改变,于是
resolve(val){
this.PromiseState = "fulfilled"
this.PromiseValue = val
}
同理reject
有个promise的报错,于是我要在reject中加个报错
throw console.error(val);
七、promise中的成功和失败,只会调用一个,这个逻辑实现如何实现呢,如下,我执行成功和失败得出的是,只有成功执行,相反,则是只有失败执行
resolve('success')
reject('error')
所以,逻辑上,我的PomiseResult的状态改变,就要阻塞后面函数的执行,于是我加了个判断,reslove需要判断,同理失败的reject也需要判断,这里就不新加reject了(保持文档简洁)。
resolve(val){
// 状态从pending变为resolved,就不能再继续改变状态
if(this.PromiseState === "pending"){
this.PromiseState = "resolved"
this.PromiseValue = val
}else{
return
}
}
promise中经常也会在里面进行抛出错误操作,如下,然后打印看看,得出,抛出错误也会把状态改变韦rejected
throw new Error('error')
于是我需要在手写中,捕获错误,并执行失败的回调
try{
fn(this.resolve.bind(this),this.reject.bind(this))
}catch(err){
this.reject(err)
}
觉得不美观,我将状态用常量定义状态了,可以不用
第一阶段完成,给自己一点鼓励吧,woooowwwww
const PANDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"
class MyPromise{
// 对象应该有状态和结果
PromiseState = PANDING
PromiseValue = undefined
constructor(fn){
try{
fn(this.resolve.bind(this),this.reject.bind(this))
}catch(err){
this.reject(err)
}
}
resolve(val){
// 状态从pending变为resolved,就不能再继续改变状态
if(this.PromiseState === PANDING){
this.PromiseState = RESOLVED
this.PromiseValue = val
}else{
return
}
}
reject(val){
if(this.PromiseState === PANDING){
this.PromiseState = REJECTED
this.PromiseValue = val
}else{
return
}
}
}