關於es6--promise

看了不少關於promise的文章，此篇文章作以總結。
因爲Javascript是一種單線程的語言，全部的代碼必須按照所謂的「自上而下」的順序來執行。本特性帶來的問題就是，一些未來的、未知的操做，必須異步實現。promise就是一個比較常見的異步解決方案。

Promise有如下兩個特色：
（1）狀態不受外界影響。Promise對象表明一個異步操做，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）。只有異步操做的結果，能夠決定當前是哪種狀態，任何其餘操做都沒法改變這個狀態。這也是Promise這個名字的由來，它的英語意思就是「承諾」，表示其餘手段沒法改變。
（2）一旦狀態改變，就不會再變，任什麼時候候均可以獲得這個結果。Promise對象的狀態改變，只有兩種可能：從Pending變爲Resolved和從Pending變爲Rejected。只要這兩種狀況發生，狀態就凝固了，不會再變了，會一直保持這個結果。就算改變已經發生了，你再對Promise對象添加回調函數，也會當即獲得這個結果。這與事件（Event）徹底不一樣，事件的特色是，若是你錯過了它，再去監聽，是得不到結果的。
有了Promise對象，就能夠將異步操做以同步操做的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操做更加容易。

首先，看一個例子，new一個promise

var p = new Promise(function(resolve, reject){
  //作一些異步操做
  setTimeout(function(){
    console.log('執行完成');
    resolve('成功的數據');
  }, 2000);
});

Promise的構造函數接收一個參數，是函數，而且傳入兩個參數：resolve，reject，分別表示異步操做執行成功後的回調函數和異步操做執行失敗後的回調函數，按照標準來說，resolve是將Promise的狀態置爲fullfiled，reject是將Promise的狀態置爲rejected。

在上面的代碼中，咱們執行了一個異步操做，也就是setTimeout，2秒後，輸出「執行完成」，而且調用resolve方法。

運行代碼，會在2秒後輸出「執行完成」。注意！我只是new了一個對象，並無調用它，咱們傳進去的函數就已經執行了，這是須要注意的一個細節。因此咱們用Promise的時候通常是包在一個函數中，在須要的時候去運行這個函數，如：

function runAsync(){
  var p = new Promise(function(resolve, reject){
    //作一些異步操做
    setTimeout(function(){
        console.log('執行完成');
        resolve('隨便什麼數據');
    }, 2000);
  });
  return p;            
}
runAsync()

在上面的代碼中，咱們包裝好的函數最後會return一個promise對象，也就是說promise是一個對象，接下來就是promise的一些方法了：then/ catch /all/ race等
首先了解一下沒有promise的回調地獄

setTimeout(function(){
  left(function(){
    setTimeout(function(){
      left(function(){
        setTimeout(function(){
          left();
        },2000);
      });
    }, 2000);
  });
}, 2000);

以上代碼就是傳說中的回調地獄，若是有多層業務邏輯嵌套的話，不只會使代碼閱讀困難，並且後面維護起來也是難點。
以後在ES6，Promise就應運而生。
用then來進行回調操做（鏈式操做）

function runAsync1(){
  var p = new Promise(function(resolve, reject){
    //作一些異步操做
    setTimeout(function(){
      console.log('異步任務1執行完成');
      resolve('隨便什麼數據1');
    }, 1000);
  });
  return p;            
}
function runAsync2(){
  var p = new Promise(function(resolve, reject){
    //作一些異步操做
    setTimeout(function(){
      console.log('異步任務2執行完成');
      resolve('隨便什麼數據2');
    }, 2000);
  });
  return p;           
  }
function runAsync3(){
  var p = new Promise(function(resolve, reject){
    //作一些異步操做
    setTimeout(function(){
      console.log('異步任務3執行完成');
      resolve('隨便什麼數據3');
    }, 2000);
  });
  return p;            
}
runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2();
})
.then(function(data){
  console.log(data);
  return runAsync3();
})
.then(function(data){
  console.log(data);
});

這樣可以按順序，每隔兩秒輸出每一個異步回調中的內容，在runAsync2中傳給resolve的數據，能在接下來的then方法中拿到。運行結果

在then方法中，你也能夠直接return數據而不是Promise對象，在後面的then中就能夠接收到數據了，好比咱們把上面的代碼修改爲這樣：

runAsync1()
.then(function(data){
  console.log(data);
  return runAsync2();
})
.then(function(data){
  console.log(data);
  return '直接返回數據';  //這裏直接返回數據
})
.then(function(data){
  console.log(data);
});

結果以下：

接下來講一下reject的用法：
reject的做用就是把Promise的狀態置爲rejected，這樣咱們在then中就能捕捉到，而後執行「失敗」狀況的回調。看下面的代碼。

function getNumber(){
  var p = new Promise(function(resolve, reject){
    //作一些異步操做
    setTimeout(function(){
      var num = Math.ceil(Math.random()*10); //生成1-10的隨機數
      if(num<=5){
        resolve(num);
      }
      else{
        reject('數字太大了');
      }
    }, 2000);
  });
  return p;            
}

getNumber()
.then(
    function(data){
      console.log('resolved');
      console.log(data);
    }, 
    function(reason, data){
      console.log('rejected');
      console.log(reason);
    }
);

getNumber函數用來異步獲取一個數字，2秒後執行完成，若是數字小於等於5，咱們認爲是「成功」了，調用resolve修改Promise的狀態。不然咱們認爲是「失敗」了，調用reject並傳遞一個參數，做爲失敗的緣由。

運行getNumber而且在then中傳了兩個參數，then方法能夠接受兩個參數，第一個對應resolve的回調，第二個對應reject的回調。因此咱們可以分別拿到他們傳過來的數據。屢次運行這段代碼，你會隨機獲得下面兩種結果：

注意，Promise.reject()方法的參數，會原封不動地做爲reject的理由，變成後續方法的參數。這一點與Promise.resolve方法不一致。
catch方法
catch的用法和then的第二個參數同樣，用來指定reject的回調

getNumber()
.then(function(data){
  console.log('resolved');
  console.log(data);
})
.catch(function(reason){
  console.log('rejected');
  console.log(reason);
});

效果和寫在then的第二個參數裏面同樣。不過它還有另一個做用：在執行resolve的回調（也就是上面then中的第一個參數）時，若是拋出異常了（代碼出錯了），那麼並不會報錯卡死js，而是會進到這個catch方法中。請看下面的代碼：

getNumber()
.then(function(data){
  console.log('resolved');
  console.log(data);
  console.log(somedata); //此處的somedata未定義
})
.catch(function(reason){
  console.log('rejected');
  console.log(reason);
});

在resolve的回調中，咱們console.log(somedata);而somedata這個變量是沒有被定義的。若是咱們不用Promise，代碼運行到這裏就直接在控制檯報錯了，不往下運行了。可是在這裏，會獲得這樣的結果：

關於catch
1.catch是用於指定發生錯誤時的回調函數。（建議不要在then的第二個參數寫rejected狀態，老是使用catch）
2.catch()使回調報錯時不會卡死js而是會繼續往下執行。
3.Promise 對象的錯誤具備「冒泡」性質，會一直向後傳遞，直到被捕獲爲止。也就是說，錯誤老是會被下一個catch語句捕獲。
這裏要注意，不論是then或者catch返回的都是一個新的Promise實例！而每一個Primise實例都有最原始的Pending（進行中）到Resolve（已完成），或者Pending（進行中）到Reject（已失敗）的過程。

all的用法
Promise的all方法提供了並行執行異步操做的能力，而且在全部異步操做執行完後才執行回調。咱們仍舊使用上面定義好的runAsync一、runAsync二、runAsync3這三個函數，看下面的例子：

Promise
.all([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
  console.log(results);
});

用Promise.all來執行，all接收一個數組參數，裏面的值最終都算返回Promise對象。這樣，三個異步操做的並行執行的，等到它們都執行完後纔會進到then裏面。那麼，三個異步操做返回的數據哪裏去了呢？都在then裏面呢，all會把全部異步操做的結果放進一個數組中傳給then，就是上面的results。因此上面代碼的輸出結果就是：「誰跑的慢，以誰爲準執行回調」

有了all，你就能夠並行執行多個異步操做，而且在一個回調中處理全部的返回數據，有一個場景是很適合用這個的，一些遊戲類的素材比較多的應用，打開網頁時，預先加載須要用到的各類資源如圖片、flash以及各類靜態文件。全部的都加載完後，咱們再進行頁面的初始化。（我的感受很想&&符號連接）
race的用法
all方法的效果其實是「誰跑的慢，以誰爲準執行回調」，那麼相對的就有另外一個方法「誰跑的快，以誰爲準執行回調」，這就是race方法，這個詞原本就是賽跑的意思。race的用法與all同樣，咱們把上面runAsync1的延時改成1秒來看一下：

Promise
.race([runAsync1(), runAsync2(), runAsync3()])
.then(function(results){
  console.log(results);
});

這三個異步操做一樣是並行執行的。結果你應該能夠猜到，1秒後runAsync1已經執行完了，此時then裏面的就執行了。結果是這樣的：

在then裏面的回調開始執行時，runAsync2()和runAsync3()並無中止，仍舊再執行。因而再過1秒後，輸出了他們結束的標誌，resolve/reject一旦輸出不會改變。（感受就是||符號操做~~~）

還有一些關於promise的面試題。感興趣的能夠看一下：https://mp.weixin.qq.com/s/Wv...以上感謝:王漢炎 枸杞辣條 IT平頭哥聯盟