ES6 Promise 對象 詳解新特性

Promise 對象

Promise 是個啥?

是異步編程的一種解決方案，其實是一個對象，自己身上有all、reject、resolve這幾個方法，原型上有then、catch等方法。

1. 主要用於異步計算.
2. 可以將異步操作隊列化，按照期望的順序執行，返回符合預期的結果.
3. 可以在對象之間傳遞和操作promise，幫助我們處理隊列.
       

通俗點 , 我們可以借用Promise對象來做到滿足某個條件在進行下一步操作,不滿足則不執行下一步操作 . 也就滿足 , 上一步的成功是下一步開始的前提條件.

特點:

         對象的狀態不受外界影響。Promise對象代表一個異步操作，有三種狀態：pending（進行中）、fulfilled（已成功）和 rejected（已失敗）。只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。這也是 Promise 這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
    
        一旦狀態改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲 resolved（已定型）。如果改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。

---

用法

咱們先看段代碼

//寫一個判斷年齡的方法
function judge(age){	
    //創建一個Promise對象
    let p1 = new Promise(function(resolve,reject){
     if(age >= 18){
      resolve(age); //此方法會導致Promise的狀態變爲 fulfilled(成功),並且攜帶數據(帶着age值)
     }else{
      reject("對不起! 你"+age+"歲,還未成年!");   //此方法會導致Promise的狀態變爲 rejected(失敗),也可攜帶數據.
     }
    });
    //返回 Promise對象
    return p1;
};
//接受輸入的年齡   
let age = prompt("請輸入你的年齡!");

//調用judge方法. then()方法裏有2個函數,
//第一個是表示Promise對象狀態爲成功執行的函數,
//第二個表示Promise對象狀態爲失敗執行的函數.
judge(age).then(
    function(data){
     alert("你"+data+"歲咯,可以進入網吧!");     
    },
    function(data){
     alert(data);
    }
);

我們運行如上代碼 :

輸入年齡爲 19

提示可以進入網吧.

在試一次,輸入年齡爲 10

提示,未成年!

---

上面呢,演示瞭如何使用 Promise 對象,但沒有體現它的獨特的優勢 ,甚至有些小夥伴會想,這功能用 if 判斷不簡單的多麼 .首先Promise 解決異步編程的一種方案,那我們就模擬下遇到以下的情況:(上代碼)

//函數a
function a(){return 1;};
function b(){return 2;};
console.log(a());
console.log(b());

看到以上代碼我們知道結果肯定是先輸出1,在輸出2嘛.我們知道網絡延遲是常有的情況,那當異步請求時執行a函數遇到延遲,函數b需要依賴函數a的某個參數時,那豈不是導致a的參數還沒執行完,就執行b去了,這不是我們想要的.就會導致出錯.上碼:

//我們給第一個函數用定時器模擬延遲2秒的效果.
setTimeout(function(){
    console.log(1);
   },2000);                   
   
   function a(){
    console.log(2);
   }
   a();

因爲網絡的延遲啊,結果是先輸出2,在輸出1.
這時有小夥伴會想,既然它遇到某些情況內部不會完全按照字面代碼的順序去執行,那我們可以嵌套的寫法不就行了嘛,對是可以的.能解決上面出現的問題,可是呢,如果工程量大,嵌套一多起來,那不得腦殼大.所以爲了解決這樣的問題,ES6中就擴展了 Promise 這麼個對象.更加簡潔的完成異步編程需求.

相信看到這裏大家對 Promise 對象有了初步的瞭解,下面咱們繼續說說它.

Promise狀態也有缺點,如下:

1. 狀態的缺點無法取消 Promise ，一旦新建它就會立即執行，無法中途取消。
2. 如果不設置回調函數，Promise 內部拋出的錯誤，不會反應到外部。
3. 當處於 pending(進行中) 狀態時，無法得知目前進展到哪一個階段（剛剛開始還是即將完成）。

咱們在上面的代碼中可以看到Promise對象的 then()方法起到不小的作用.

then 方法接收兩個函數作爲參數，第一個參數是 Promise 執行成功時的回調，第二個參數是 Promise 執行失敗時的回調，兩個函數只會有一個被調用。

then()方法的特點:

• 在 JavaScript 事件隊列的當前運行完成之前，回調函數永遠不會被調用(咱們也是利用此特點呢去進行相關的異步代碼操作)。
• (鏈式調用)通過 .then 形式添加的回調函數，不論什麼時候，都會被調用。並且可以添加多個回調函數，它們會按照插入順序並且獨立運行。

使用then()方法也需要注意:

• 簡便的 Promise 鏈式編程最好保持扁平化，不要嵌套 Promise。
  注意總是返回或終止 Promise 鏈。
• 創建新 Promise 但忘記返回它時，對應鏈條被打破，導致後面的同時進行。
• 大多數瀏覽器中不能終止的 Promise 鏈裏的 rejection，建議後面都跟上 .catch(error => console.log(error));

---

all方法

與then同級的另一個方法，all方法，該方法提供了並行執行異步操作的能力，並且在所有異步操作執行完後並且執行結果都是成功的時候才執行回調。

//當需要多個的請求返回結果後,才能進行下一步操作，這個時候就可以使用all方法
loadimg(a).then(function(data){
    console.log("1功");
    return loadimg(a);
   }).then(function(data){
    console.log("2成功");
    return loadimg(a);
   }).then(function(data){
    console.log("3成功");
    return loadimg(a);
   }).all(function(data){
    console.log("全部成功!");
   });

今天的分享就告一段落咯 , 接下來還會繼續更新ES6相關的內容,看到這相信大家眼睛也疲憊了,趕緊放鬆放鬆吧 !