摘要：它們其實是在運行完成后，主動向該回調函數中傳入的參數。該方法其實是的別名，用于指定狀態轉為失敗時的回調函數。構造器回調函數參數中的和用于更改當前的狀態，并將其值返回給當前的方法的參數。

ES6中，新增了Promise對象，它主要用于處理異步回調代碼，讓代碼不至于陷入回調嵌套的死路中。

@-v-@

Promise本質上是一個 函數 ，更確切地說，它是一個 構造器 ，專門用來構造對象的。
它接受一個函數作為參數，并返回一個對象，大致情況如下：

  function Promise( fn ){
    // var this = {}
    // Object.setPrototypeOf(this, Promise.prototype)
    // 接下來，是Promise函數具體要實現的功能，這部分由系統幫我們完成
    ...  
    // 最后返回這個Promise實例
    return this
  }

Promise函數的參數，作為函數形式存在，需要我們手動去編寫。
它需要兩個參數，情況如下：

  function fn(resolve, reject){
    ...  // 我們自己寫的邏輯代碼
  }

Promise函數的返回值是一個對象，準確來說，是Promise自己生成的實例。
其實Promise函數的使命，就是構建出它的實例，并且負責幫我們管理這些實例。
該實例有三種狀態，分別是： 進行 狀態、 完成 狀態 和 失敗 狀態。
該實例只能從“ 進行 狀態”轉變為“ 完成 狀態”，或從“ 進行 狀態”轉變為“ 失敗 狀態”，這個過程不可逆轉，也不可能存在其他可能。因為Promise就是用來管理業務狀態的一種機制，它能夠保證業務的順序執行，而不出現混亂。

這就好比我們在家里炒一份菜，是只可能存在“ 正在炒菜 ”、“ 炒好了 ”和“ 炒糊了 ”這三個階段的，而“正在炒菜”的狀態肯定是會優先存在于“炒好了”和“炒糊了”兩個狀態前面，“炒好了”和“炒糊了”本身又是兩個 互斥的事件 ，所以這個過程，只可能出現從“正在炒菜”狀態過渡到“炒好了”或者“炒糊了”狀態的情況，永遠不可能從“炒好了”過渡到“炒糊了”狀態，也不可能從“炒糊了”過渡到“炒好了”狀態。

那么，這些由Promise函數構建出來的對象，究竟有著什么用處呢？
我們先來看一組代碼：

  fn( ( ( ( ()=>{} )=>{} )=>{} )=>{} )

像這樣回調之中調回調的情況，在Node開發中，是一件很常見的事。
Node本身是一個無阻塞、無空耗、并發、依賴于系統底層讀寫事件的運行環境，它的回調機制保證了它在異步并發執行過程中回調鏈的獨立性和抗干擾能力，但同時也帶來了很大的副作用，最大的麻煩就是，采用普通回調方式書寫出來的Node回調代碼十分混亂。

其實，面向過程或面向對象的函數式編程，本身就是一個巨大的“函數調用”過程。我們在代碼中使用函數，并在函數中調用函數，運行環境幫助我們維護一個或多個函數棧，以實現程序的有序執行，及增強軟件后期維護的便利性。

但如果我們能把這種不斷調用的過程給攤開成 平面 ，而不要使函數相互嵌套，就會使我們的軟件可維護性提升很大一個臺階。我們只需要將原本寫好的功能一個個羅列出來，并構造出一根供函數調用的鏈條，把這些功能一個個地按需調用，軟件的功能不就實現了么？而且還更清晰明了。
Promise幫助我們將函數攤開來，形成一根調用鏈條，讓程序有序執行。

每一個返回值為Promise實例的函數，都是 Promise調用鏈條上的一個結點 ，這個Promise實例維護著該處函數的運行狀態，并決定著自身的生存周期。它的寫法大致是這樣的：

  // 執行一個返回值為promise的函數 并通過resolve或reject返回
  promiseFn_1(...)
  // 將多個返回值為promise的函數合成一個 并通過resolve或reject返回
  // Promise.all( promiseFn_all_1, promiseFn_all_2, ... )
  // Promise.race( promiseFn_race_1, promiseFn_race_2, ... )
  //
  .then(
    (...resolveArgs)=>{ ... promiseFn_resolve_1(...) ... },
    (...rejectArgs)=>{ ... promiseFn_reject_1(...) ... },
  )
  .then(
    (...resolveArgs)=>{ ... promiseFn3_resolve_2(...) ... },
    (...rejectArgs)=>{ ... promiseFn3_reject_2(...) ... },
  )
  ...
  .catch(
    (...rejectArgs)=>{ ... promiseFn_catch_1(...) ... }
  )
  ...
  .finally(
    (...simpleArgs)=>{ ... }
  )

上面的代碼看似及其繁瑣，其實結構層次已經比使用普通回調方式書寫的代碼好很多了（雖然還是顯得有些混亂）。
當我們了解了Promise中這些函數（如then()、catch()、finally()）的具體意思，就會明白它的具體意思了。
接下來我們就來構建一個Promise實例，看一看這根“鏈條”上的結點（也就是上面以“promiseFn_”開頭的函數）到底長什么樣。

  function promiseFn_1(path, options){
    return new Promise((resolve,reject)=>{
      // 需要執行的具體代碼，一般情況下，是調用一個帶有回調參數的函數
      // 此處使用fs模塊中的readFile函數作為示例
      fs.readFile(path, options, (err,data)=>{
        if(err){
          reject(err)
          // 這樣使用可能會更好：
          // throw new Error(path+" :  文件讀取出現未知的錯誤!")
        }
        resolve(data)
      })
    })
  }

上面Promise參數函數中，出現了兩個陌生的參數，resolve和reject。它們其實是在Promise運行完成后，主動向該回調函數中傳入的參數。這個過程，由Promise函數自動幫我們完成。
resolve和reject都是與Promise實例相關的函數，用于改變Promise實例的狀態。
resolve函數能使Promise實例從“進行”狀態變成“完成”狀態，并將自己接受到的參數傳給下一個promise對象。
reject函數能使Promise實例從“進行”狀態變成“失敗”狀態，并將自己接受到的參數傳給下一個promise對象（一般是一個錯誤對象）。

  @param resolveFn( ...args )  
    函數，當Promise實例狀態變為“完成”狀態時會被執行，  
    用于將從當前promise中取出reresolve( ...args )中得到的參數（...args），  
    并進行相應的操作，比如將（args）傳入另一個封裝了promise構造器的函數，  
    并將該函數執行完成后返回的promise實例返回  
    @param ...args  
      參數列表，當前promise實例處于“完成”狀態時，通過resolve(...args)得到的值。  
  @param [rejectFn( ...args )]  
    函數，可選，當Promise實例狀態變為“失敗”狀態時會被執行，  
    用于將從當前promise中取出reject( ...args )中得到的參數（...args），  
    并進行相應的操作，比如將（args）傳入另一個封裝了promise構造器的函數，  
    并將該函數執行完成后返回的promise實例返回  
    @param ...args  
      參數列表，當前promise處于“完成”狀態時，通過resolve(...args)得到的值。  
  @return promise  
    promise對象，resolveFn或rejectFn執行后的返回值，  
    我們一般會在fn中調用另一個封裝了promise構造器的函數，  
    然后將其返回給then()方法，then()方法再將其作為then的返回值返回給當前鏈式調用處，  
    如果fn()返回的不是一個promise對象，then()會幫我們將fn()返回值封裝成promise對象，  
    這樣，我們就可以確保能夠鏈式調用then()方法，并取得當前promise中獲得的函數運行結果。  

then()方法定義在Promise.prototype上，用于為Promise實例添加狀態更改時的回調函數，相當于監聽一樣。
當當前promise實例狀態變為“完成”狀態時，resolveFn函數自動執行。
當當前promise實例狀態變為“失敗”狀態時，rejectFn函數自動執行。

  @param rejectFn( ...args )  
    函數，當Promise實例狀態變為“失敗”狀態時會被執行，  
    用于將從當前promise中取出reject( ...args )中得到的參數（...args），  
    并進行相應的操作，比如將（args）傳入另一個封裝了promise構造器的函數，  
    并將該函數執行完成后返回的promise實例返回  
    @param ...args  
      參數列表，當前promise處于“完成”狀態時，通過resolve(...args)得到的值。  
  @return promise  
    promise對象，rejectFn執行后的返回值，  
    如果fn()返回的不是一個promise對象，catch()會幫我們將fn()返回值封裝成promise對象，  
    并將其返回，以確保promise能夠被繼續鏈式調用下去。  

該方法其實是“.then(null, rejectFn)”的別名，用于指定狀態轉為“失敗”時的回調函數。
建議不要在then()方法中定義第二個參數，而應該使用catch()，結構層次會更好一些。
如果沒有使用catch()方法指定錯誤錯誤處理的回調函數，promise實例拋出的錯誤不會傳遞到外層代碼。
如果promise狀態已經變為了resolved（“失敗”狀態），再拋出任何錯誤，都是無效的。
promise實例中拋出的錯誤具有冒泡的特性，它會一直向后傳遞，直到被捕獲為止。

  @param [promise1, promise2, ..., promisen]
    可遍歷對象，一個由promise對象構成的可遍歷對象，常用數組表示
  @return promise
    promise對象

Promise.all()用于將多個Promise實例包裝成一個新的Promise實例，并返回。
Promise.all()方法接受一個由Promise實例組成的可遍歷對象。如果可遍歷對象中存在有不是Promise實例的元素，就會調用Promise.resolve()方法，將其轉為Promise實例。
本文的可遍歷對象，指的是那些具有Iterator接口的對象，如Array、WeakSet、Map、Set、WeakMap等函數的實例。
Promise.all()方法返回的Promise實例的狀態分成兩種情況：

可遍歷對象中的Promise實例狀態全變為 完成 狀態時，該實例的狀態才會轉變為 完成 狀態，此時，可遍歷對象中的Promise實例的返回值會組成一個數組，傳給該實例的回調。

可遍歷對象只要存在Promise實例狀態轉為 失敗 狀態時，該實例的狀態就會轉變為 失敗 狀態，此時，第一個轉為 失敗 狀態的Promise實例的返回值會傳給該實例的回調。

  @param [promise1, promise2, ..., promisen]
    可遍歷對象，一個由promise對象構成的可遍歷對象，常用數組表示
  @return promise
    promise對象

Promise.race()與Promise.all()用法基本上一致，功能上也幾乎相同，唯一的差異就是：
Promise.race()方法返回的Promise實例的狀態分成兩種情況：

可遍歷對象只要存在Promise實例狀態轉為 完成 狀態時，該實例的狀態才會轉變為 完成 狀態，此時，第一個轉為 完成 狀態的Promise實例的返回值，會作為該實例的then()方法的回調函數的參數。

可遍歷對象只要存在Promise實例狀態轉為 失敗 狀態時，該實例的狀態就會轉變為 失敗 狀態，此時，第一個轉為 失敗 狀態的Promise實例的返回值，會作為該實例的then()方法的回調函數的參數。

  @param notHaveThenMethodObject
    對象，一個原型鏈上不具有then()方法的對象
  @return promise
    promise對象

如果Promise.resolve()的參數的原型鏈上不具有then方法，則返回一個新的Promise實例，且其狀態為 完成 狀態，并且會將它的參數作為該實例的then()方法的回調函數的參數。
如果Promise.resolve()的參數是一個Promise實例（原型鏈上具有then方法），則將其原封不動地返回。
Promise.resolve()方法允許調用時不使用任何參數。

  @param something
    任意值，用于傳遞給返回值的then()方法的回調函數參數的值
  @return promise
    promise對象

Promise.reject方法的用法和resolve方法基本一樣，只是它返回的Promise實例，狀態都是 失敗 狀態。
Promise.reject方法的參數會被作為該實例的then()方法的回調函數的參數。
Promise.resolve()方法允許調用時不使用任何參數。

Promise構造器回調函數參數中的 resolve 和 reject 和Promise構造器方法中的 reject() 和 resolve() 效果是不一樣的。
Promise構造器回調函數參數中的 resolve 和 reject 用于更改當前Promise的狀態，并將其值返回給當前Promise的then()方法的參數。
Promise構造器方法中的 reject() 和 resolve() 可以直接返回一個已經改變狀態的新的Promise對象。

Promise.reject() Promise.resolve()

new Promise((resolve, reject)=>{ resolve(...) 或 reject(...) })

  @param [resolveFn( ...args )]  
    函數，可選，當Promise實例狀態變為“完成”狀態時會被執行，  
    用于將從當前promise中取出reresolve( ...args )中得到的參數（...args），  
    并進行相應的操作，比如將（args）傳入另一個封裝了promise構造器的函數，  
    并將該函數執行完成后返回的promise實例返回  
    @param ...args  
      參數列表，當前promise實例處于“完成”狀態時，通過resolve(...args)得到的值。  
  @param [rejectFn( ...args )]  
    函數，可選，當Promise實例狀態變為“失敗”狀態時會被執行，  
    用于將從當前promise中取出reject( ...args )中得到的參數（...args），  
    并進行相應的操作，比如將（args）傳入另一個封裝了promise構造器的函數，  
    并將該函數執行完成后返回的promise實例返回  
    @param ...args  
      參數列表，當前promise處于“完成”狀態時，通過resolve(...args)得到的值。  

不管以then()或catch()方法結尾，若最后一個方法拋出錯誤，則在內部可能無法捕捉到該錯誤，外界也無法獲得，為了避免這種情況發生，Promise構造器的原型鏈上提供了done()方法。
promise.done()方法總是處于會調鏈的低端，它可以捕捉到任何在回調鏈上拋出的錯誤，并將其拋出。

  @param simpleFn  
    一個普通函數，這個普通函數無論如何都會被執行。  

finally方法指定，不管Promise對象最后狀態如何，都會執行的操作。

  Promise.prototype.finally = function( simpleFn ){
    let Pro = this.constructor
    return this.then(
      value => Pro.resolve( simpleFn() ).then( () => value ),
      error => Pro.resolve( simpleFn() ).then( () => { throw error } )
    )
  }

  Promise.prototype.done = function( resolveFn, rejectFn ){
    this
      .then( resolveFn, rejectFn )
      .catch( error => {
        // 這是一個把需要執行的代碼，從任務隊列中拉出來的技巧
        setTimeout( () => { throw error }, 0)
      } )
  }

這兒使用了一個很常用的技巧：
我們來看一下這個例子：

  for(let i of [1,2,3]){
    setTimeout( () => { console.log( "setTimeout " + i ) }, 0)
    console.log( "console " + i )
  }

最終結果是：

  > console 1  
  > console 2  
  > console 3  
  > undefined  
  > setTimeout 1  
  > setTimeout 2  
  > setTimeout 3  

javascript除了維護著當前任務隊列，還維護著一個setTimeout隊列。所有未被執行的setTimeout任務，會按順序放到setTimeout隊列中，等待普通任務隊列中的任務執行完，才開始按順序執行積累在setTimeout中的任務。
簡而言之， javascript會在執行完當前任務隊列中的任務后，再執行setTimeout隊列中的任務 。
我們設置任務在0s后執行，可以將該任務調到setTimeout隊列中，延遲該任務發生，使之異步執行。
這是異步執行方案當中，最常用，也最省時省事的一種方式。

  function preloadImage(path){
    return new Promise( (resolve, reject) => {
      let img = document.createElement("img")
      img.style.display = "none"
      document.body.appendChild(img)
      // 當圖片加載完成后，promise轉為完成狀態
      // 此時，我們可以把該節點的圖片加載在應有的地方，并且將其刪除
      img.addEventListener("load", resolve)
      // 當圖片加載出錯后，promise轉為失敗狀態
      img.addEventListener("error", reject)
      img.src = path
    } )
  }

  // Promise的包裝函數 getFoo()
  function getFoo(){
    // ......something
    return new Promise( (resolve, reject) => {
      // ......something
      resolve("foo")
    } )
  }
  // Generator函數 generator()
  function* generator(){
    try{
      let foo = yield getFoo()
      console.log(foo)
    }
    catch(error){
      console.log(error)
    }
  }
  // 自動執行generator函數的函數，現在可以用async語法替代它
  function run(generator){
    // 讓generator函數運行至第一個yield語句前，
    // 并獲得getFoo()的結果---一個promise函數
    let it = generator()
    function go(result){
      if(result.done) return result.value
      return result.value.then( value => {
          // 利用尾遞歸來實現自動執行，讓本次遞歸產生的棧單元項只有一個
          return go( it.next(value) )
        }, error => {
          return go( it.throw(error) )
        }
      )
    }
    go(it.next())
  }
  // 調用run方法
  run(generator)

本文更新信息

易杭 2017/4/24 23:10 11840字

本文作者信息

易杭 歡迎大家參觀我的博客和我的Github

支持網站列表

易杭網 [www.freeedit.cn]

本文知識參考

ES6標準入門第二版（阮一峰）