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)
})

}