promise的实现

1.promise的声明

首先promise是一个类，那么就用 class声明。

• 由于new promise((resolve,reject)=>{}),所以传入一个参数，我们叫它executor，传入立即执行。
• resolved、reject可执行，所以都是函数，我们用let声明。

class promise{
  constructor(executor){

let resolve=()=>{};
let reject=()=>{};
  
}
}

2.promise的状态

解决完声明应该解决状态了!

• promise有三种状态，fulfilled、pending、rejected
• pending是初始状态
• 成功时，不可转为其他状态，必须有一个不可改变的值value
• 失败时，不可转入其他状态，必须有失败的原因reason
• 成功时：new promise((resolve,reject)=>{resolve(this.value)})
• 失败时：new promise((resolve,reject)=>{reject(this.reason)})
• 如果executor报错，直接执行reject

class promise{
 constructor(executor){
 //初始化state
 this.state='pending';
 //成功的值
 this.value=undefiend;
 //失败的值
 this.reason=undefined;
 //成功的话 改变状态存储值
 let resolve=(value)=>{
 //如果是pending，执行resolve后 状态改为fulfilled
    if(this.state==='pending'){
       this.state==='fulfilled';
       //存储成功的值
        this.value=value;
}
  
}
//失败的话 转变状态存储原因
let reject=(reason)=>{
  if(this.state==='pending'){
    this.state==='rejected';
    this.reason=reason;
}

};
//如果executor有错 就直接执行reject
try{
 executor(resolve,reject);
}catch(err){
  reject(err);
}

}

}

3.promise的方法then

定义和状态都写完了，那方法呢！

• promise有个then方法，里面有两参数：onfulfilled，onrejected
• 当state为fulfiiled则执行onfulfilled，传入this.value，当state为rejected则执行onrejected，传入this.reason

class promise{
 constructor(executor){
 //2.状态
 //初始化state
 this.state='pending';
 //成功的值
 this.value=undefiend;
 //失败的值
 this.reason=undefined;
 //成功的话 改变状态存储值
 let resolve=(value)=>{
 //如果是pending，执行resolve后 状态改为fulfilled
    if(this.state==='pending'){
       this.state==='fulfilled';
       //存储成功的值
        this.value=value;
}
  
}
//失败的话 转变状态存储原因
let reject=(reason)=>{
  if(this.state==='pending'){
    this.state==='rejected';
    this.reason=reason;
}

};
//如果executor有错 就直接执行reject
try{
 executor(resolve,reject);
}catch(err){
  reject(err);
}
}

//3.then方法
then(onFulfilled,onRejected){
  if(this.state==='fulfilled'){
  onFulfilled(this.value);
};
if(this.state==='rejected'){
  onRejected(this.reason);
}
}
}

4.promise封装ajax

function ajax(url){
     return new Promise((resolve,reject)=>{
   var xhr=new XMLHttprequest();
   xhr.open('GET',url,true);
   xhr.onreadystateChange=function(){
    if(this.readyState===4&&this.status===200){
     resolve(this.responseText,this)
}else{
  var errMsg={"code":this.status,"msg":"请求接口失败"}
  reject(errMsg);
}

}
xhr.send();
}).then((response)=>{
 console.log('resolve处理成功接收的数据:',response)
},err=>{
  console.log('reject处理的错误信息:',err)
})

}