Promise（1）—3分鐘掌握最基本的Promise原理

前言

學習是一個漫長的過程，須要按部就班，要想深刻的理解一門技術，須要沉下心來慢慢研究。要作到經過現象看本質，學Promise的同時也會用到高階函數和發佈訂閱，只有掌握了那些通用的技術，纔可以更有效的學習下去，更好的看到本質。慢慢的你會發現經過深刻學習一個Promise，收穫的卻不僅是Promise。

1、什麼是Promise

Promise 是異步編程的一種解決方案，Promise對象是一個構造函數，用來生成Promise實例.

2、Promise對象有如下兩個特色。

一、有三種狀態：pending（進行中）、fulfilled（已成功）和rejected（已失敗） 只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態

二、一旦狀態改變，就不會再變，Promise對象的狀態改變：只有兩種可能： 從pending變爲fulfilled和從pending變爲rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果

3、Promise的實現（ES5）

一、名詞解釋：

一、executor：爲執行器當new Promsie(executor)的時候，executor做爲同步代碼當即執行。

二、status：Promise實例的三個狀態pending（進行中）、fulfilled（已成功）和rejected（已失敗）

三、value：這個是成功傳遞的參數，成功有成功的值。

四、reason:這個是失敗時候傳遞的參數，失敗有失敗的緣由。

五、resolve：一個成功時調用的函數，做爲參數傳遞給executor，爲高階函數

六、reject：一個失敗時調用的函數，做爲參數傳遞給executor，爲高階函數

二、代碼解讀：

代碼解讀：
在Promise當中，定義好狀態，成功的值，和失敗的緣由，當你傳入
function(resolve,reject){resolve('成功了')}的時候resolve做爲回調函數，
被觸發執行了，而後以前定義的狀態pending(等待)變成了fulfilled(成功)，
此時調用then方法傳入兩個callback，經過內部比對if來執行onFulfilled或
onRejected。

function Promise(executor){
   const self = this;
   self.status = 'pending';//promise 狀態
   self.value = undefined;// 成功有成功的值
   self.reason = undefined;// 失敗有失敗的緣由

   function resolve(value){
       if(self.status === 'pending'){ //只有pending狀態下才能夠改變狀態
           self.status = 'fulfilled';
           self.value = value;
       }
   }
   function reject(reson){
       if(self.status === 'pending'){//只有pending狀態下才能夠改變狀態
           self.status = 'rejected';
           self.reason = reson;
       }
   }
   try{
       executor(resolve,reject); // 此處爲高階函數，一個函數內傳入其餘函數，這就是高階函數的一種
   }catch(err){
       reject(err);
   }
}

Promise.prototype.then = function(onFulfilled,onRejected){
       if(this.status === 'fulfilled'){
           onFulfilled(this.value);
       }
       if(this.status === 'rejected'){
           onRejected(this.reason);
       }
}


複製代碼

上述代碼能夠正常運行如下代碼：

const p = new Promise((resolve,reject)=>{
    resolve('成功') 
    // throw 1213
    // reject('失敗')
});

p.then(function(data){
    console.log(data) // 成功
},function(err){
    console.log(err) // 失敗 或 1213
})
複製代碼

到這裏最基本的Promise已經封裝完成了，是否是很簡單。

可是若是遇到下面的這種異步的狀況， 上面的代碼就不能正常運行了，這裏就須要用到發佈訂閱了，留下懸念，一點點學不累，還有成就感，請聽下集解說哦。。。

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('我是異步的成功')
    })      
});
複製代碼

學習是一個漫長的過程，須要按部就班，要想深刻的理解一門技術，須要沉下心來慢慢研究。要作到經過現象看本質，學Promise的同時也會用到高階函數和發佈訂閱，只有掌握了那些通用的技術，纔可以更有效的學習下去，更好的看到本質。慢慢的你會發現經過深刻學習一個Promise，收穫的卻不僅是Promise。

持續更新···