摘要：它們其實(shí)是在運(yùn)行完成后，主動(dòng)向該回調(diào)函數(shù)中傳入的參數(shù)。該方法其實(shí)是的別名，用于指定狀態(tài)轉(zhuǎn)為失敗時(shí)的回調(diào)函數(shù)。構(gòu)造器回調(diào)函數(shù)參數(shù)中的和用于更改當(dāng)前的狀態(tài)，并將其值返回給當(dāng)前的方法的參數(shù)。

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

@-v-@

Promise本質(zhì)上是一個(gè) 函數(shù) ，更確切地說，它是一個(gè) 構(gòu)造器 ，專門用來構(gòu)造對(duì)象的。
它接受一個(gè)函數(shù)作為參數(shù)，并返回一個(gè)對(duì)象，大致情況如下：

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

Promise函數(shù)的參數(shù)，作為函數(shù)形式存在，需要我們手動(dòng)去編寫。
它需要兩個(gè)參數(shù)，情況如下：

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

Promise函數(shù)的返回值是一個(gè)對(duì)象，準(zhǔn)確來說，是Promise自己生成的實(shí)例。
其實(shí)Promise函數(shù)的使命，就是構(gòu)建出它的實(shí)例，并且負(fù)責(zé)幫我們管理這些實(shí)例。
該實(shí)例有三種狀態(tài)，分別是： 進(jìn)行 狀態(tài)、 完成 狀態(tài) 和 失敗 狀態(tài)。
該實(shí)例只能從“ 進(jìn)行 狀態(tài)”轉(zhuǎn)變?yōu)椤?完成 狀態(tài)”，或從“ 進(jìn)行 狀態(tài)”轉(zhuǎn)變?yōu)椤?失敗 狀態(tài)”，這個(gè)過程不可逆轉(zhuǎn)，也不可能存在其他可能。因?yàn)镻romise就是用來管理業(yè)務(wù)狀態(tài)的一種機(jī)制，它能夠保證業(yè)務(wù)的順序執(zhí)行，而不出現(xiàn)混亂。

這就好比我們?cè)诩依锍匆环莶耍侵豢赡艽嬖凇?正在炒菜 ”、“ 炒好了 ”和“ 炒糊了 ”這三個(gè)階段的，而“正在炒菜”的狀態(tài)肯定是會(huì)優(yōu)先存在于“炒好了”和“炒糊了”兩個(gè)狀態(tài)前面，“炒好了”和“炒糊了”本身又是兩個(gè) 互斥的事件 ，所以這個(gè)過程，只可能出現(xiàn)從“正在炒菜”狀態(tài)過渡到“炒好了”或者“炒糊了”狀態(tài)的情況，永遠(yuǎn)不可能從“炒好了”過渡到“炒糊了”狀態(tài)，也不可能從“炒糊了”過渡到“炒好了”狀態(tài)。

那么，這些由Promise函數(shù)構(gòu)建出來的對(duì)象，究竟有著什么用處呢？
我們先來看一組代碼：

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

像這樣回調(diào)之中調(diào)回調(diào)的情況，在Node開發(fā)中，是一件很常見的事。
Node本身是一個(gè)無阻塞、無空耗、并發(fā)、依賴于系統(tǒng)底層讀寫事件的運(yùn)行環(huán)境，它的回調(diào)機(jī)制保證了它在異步并發(fā)執(zhí)行過程中回調(diào)鏈的獨(dú)立性和抗干擾能力，但同時(shí)也帶來了很大的副作用，最大的麻煩就是，采用普通回調(diào)方式書寫出來的Node回調(diào)代碼十分混亂。

其實(shí)，面向過程或面向?qū)ο蟮暮瘮?shù)式編程，本身就是一個(gè)巨大的“函數(shù)調(diào)用”過程。我們?cè)诖a中使用函數(shù)，并在函數(shù)中調(diào)用函數(shù)，運(yùn)行環(huán)境幫助我們維護(hù)一個(gè)或多個(gè)函數(shù)棧，以實(shí)現(xiàn)程序的有序執(zhí)行，及增強(qiáng)軟件后期維護(hù)的便利性。

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

每一個(gè)返回值為Promise實(shí)例的函數(shù)，都是 Promise調(diào)用鏈條上的一個(gè)結(jié)點(diǎn) ，這個(gè)Promise實(shí)例維護(hù)著該處函數(shù)的運(yùn)行狀態(tài)，并決定著自身的生存周期。它的寫法大致是這樣的：

  // 執(zhí)行一個(gè)返回值為promise的函數(shù) 并通過resolve或reject返回
  promiseFn_1(...)
  // 將多個(gè)返回值為promise的函數(shù)合成一個(gè) 并通過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)=>{ ... }
  )

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

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

上面Promise參數(shù)函數(shù)中，出現(xiàn)了兩個(gè)陌生的參數(shù)，resolve和reject。它們其實(shí)是在Promise運(yùn)行完成后，主動(dòng)向該回調(diào)函數(shù)中傳入的參數(shù)。這個(gè)過程，由Promise函數(shù)自動(dòng)幫我們完成。
resolve和reject都是與Promise實(shí)例相關(guān)的函數(shù)，用于改變Promise實(shí)例的狀態(tài)。
resolve函數(shù)能使Promise實(shí)例從“進(jìn)行”狀態(tài)變成“完成”狀態(tài)，并將自己接受到的參數(shù)傳給下一個(gè)promise對(duì)象。
reject函數(shù)能使Promise實(shí)例從“進(jìn)行”狀態(tài)變成“失敗”狀態(tài)，并將自己接受到的參數(shù)傳給下一個(gè)promise對(duì)象（一般是一個(gè)錯(cuò)誤對(duì)象）。

  @param resolveFn( ...args )  
    函數(shù)，當(dāng)Promise實(shí)例狀態(tài)變?yōu)椤巴瓿伞睜顟B(tài)時(shí)會(huì)被執(zhí)行，  
    用于將從當(dāng)前promise中取出reresolve( ...args )中得到的參數(shù)（...args），  
    并進(jìn)行相應(yīng)的操作，比如將（args）傳入另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    并將該函數(shù)執(zhí)行完成后返回的promise實(shí)例返回  
    @param ...args  
      參數(shù)列表，當(dāng)前promise實(shí)例處于“完成”狀態(tài)時(shí)，通過resolve(...args)得到的值。  
  @param [rejectFn( ...args )]  
    函數(shù)，可選，當(dāng)Promise實(shí)例狀態(tài)變?yōu)椤笆　睜顟B(tài)時(shí)會(huì)被執(zhí)行，  
    用于將從當(dāng)前promise中取出reject( ...args )中得到的參數(shù)（...args），  
    并進(jìn)行相應(yīng)的操作，比如將（args）傳入另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    并將該函數(shù)執(zhí)行完成后返回的promise實(shí)例返回  
    @param ...args  
      參數(shù)列表，當(dāng)前promise處于“完成”狀態(tài)時(shí)，通過resolve(...args)得到的值。  
  @return promise  
    promise對(duì)象，resolveFn或rejectFn執(zhí)行后的返回值，  
    我們一般會(huì)在fn中調(diào)用另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    然后將其返回給then()方法，then()方法再將其作為then的返回值返回給當(dāng)前鏈?zhǔn)秸{(diào)用處，  
    如果fn()返回的不是一個(gè)promise對(duì)象，then()會(huì)幫我們將fn()返回值封裝成promise對(duì)象，  
    這樣，我們就可以確保能夠鏈?zhǔn)秸{(diào)用then()方法，并取得當(dāng)前promise中獲得的函數(shù)運(yùn)行結(jié)果。  

then()方法定義在Promise.prototype上，用于為Promise實(shí)例添加狀態(tài)更改時(shí)的回調(diào)函數(shù)，相當(dāng)于監(jiān)聽一樣。
當(dāng)當(dāng)前promise實(shí)例狀態(tài)變?yōu)椤巴瓿伞睜顟B(tài)時(shí)，resolveFn函數(shù)自動(dòng)執(zhí)行。
當(dāng)當(dāng)前promise實(shí)例狀態(tài)變?yōu)椤笆　睜顟B(tài)時(shí)，rejectFn函數(shù)自動(dòng)執(zhí)行。

  @param rejectFn( ...args )  
    函數(shù)，當(dāng)Promise實(shí)例狀態(tài)變?yōu)椤笆　睜顟B(tài)時(shí)會(huì)被執(zhí)行，  
    用于將從當(dāng)前promise中取出reject( ...args )中得到的參數(shù)（...args），  
    并進(jìn)行相應(yīng)的操作，比如將（args）傳入另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    并將該函數(shù)執(zhí)行完成后返回的promise實(shí)例返回  
    @param ...args  
      參數(shù)列表，當(dāng)前promise處于“完成”狀態(tài)時(shí)，通過resolve(...args)得到的值。  
  @return promise  
    promise對(duì)象，rejectFn執(zhí)行后的返回值，  
    如果fn()返回的不是一個(gè)promise對(duì)象，catch()會(huì)幫我們將fn()返回值封裝成promise對(duì)象，  
    并將其返回，以確保promise能夠被繼續(xù)鏈?zhǔn)秸{(diào)用下去。  

該方法其實(shí)是“.then(null, rejectFn)”的別名，用于指定狀態(tài)轉(zhuǎn)為“失敗”時(shí)的回調(diào)函數(shù)。
建議不要在then()方法中定義第二個(gè)參數(shù)，而應(yīng)該使用catch()，結(jié)構(gòu)層次會(huì)更好一些。
如果沒有使用catch()方法指定錯(cuò)誤錯(cuò)誤處理的回調(diào)函數(shù)，promise實(shí)例拋出的錯(cuò)誤不會(huì)傳遞到外層代碼。
如果promise狀態(tài)已經(jīng)變?yōu)榱藃esolved（“失敗”狀態(tài)），再拋出任何錯(cuò)誤，都是無效的。
promise實(shí)例中拋出的錯(cuò)誤具有冒泡的特性，它會(huì)一直向后傳遞，直到被捕獲為止。

  @param [promise1, promise2, ..., promisen]
    可遍歷對(duì)象，一個(gè)由promise對(duì)象構(gòu)成的可遍歷對(duì)象，常用數(shù)組表示
  @return promise
    promise對(duì)象

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

可遍歷對(duì)象中的Promise實(shí)例狀態(tài)全變?yōu)?完成 狀態(tài)時(shí)，該實(shí)例的狀態(tài)才會(huì)轉(zhuǎn)變?yōu)?完成 狀態(tài)，此時(shí)，可遍歷對(duì)象中的Promise實(shí)例的返回值會(huì)組成一個(gè)數(shù)組，傳給該實(shí)例的回調(diào)。

可遍歷對(duì)象只要存在Promise實(shí)例狀態(tài)轉(zhuǎn)為 失敗 狀態(tài)時(shí)，該實(shí)例的狀態(tài)就會(huì)轉(zhuǎn)變?yōu)?失敗 狀態(tài)，此時(shí)，第一個(gè)轉(zhuǎn)為 失敗 狀態(tài)的Promise實(shí)例的返回值會(huì)傳給該實(shí)例的回調(diào)。

  @param [promise1, promise2, ..., promisen]
    可遍歷對(duì)象，一個(gè)由promise對(duì)象構(gòu)成的可遍歷對(duì)象，常用數(shù)組表示
  @return promise
    promise對(duì)象

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

可遍歷對(duì)象只要存在Promise實(shí)例狀態(tài)轉(zhuǎn)為 完成 狀態(tài)時(shí)，該實(shí)例的狀態(tài)才會(huì)轉(zhuǎn)變?yōu)?完成 狀態(tài)，此時(shí)，第一個(gè)轉(zhuǎn)為 完成 狀態(tài)的Promise實(shí)例的返回值，會(huì)作為該實(shí)例的then()方法的回調(diào)函數(shù)的參數(shù)。

可遍歷對(duì)象只要存在Promise實(shí)例狀態(tài)轉(zhuǎn)為 失敗 狀態(tài)時(shí)，該實(shí)例的狀態(tài)就會(huì)轉(zhuǎn)變?yōu)?失敗 狀態(tài)，此時(shí)，第一個(gè)轉(zhuǎn)為 失敗 狀態(tài)的Promise實(shí)例的返回值，會(huì)作為該實(shí)例的then()方法的回調(diào)函數(shù)的參數(shù)。

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

如果Promise.resolve()的參數(shù)的原型鏈上不具有then方法，則返回一個(gè)新的Promise實(shí)例，且其狀態(tài)為 完成 狀態(tài)，并且會(huì)將它的參數(shù)作為該實(shí)例的then()方法的回調(diào)函數(shù)的參數(shù)。
如果Promise.resolve()的參數(shù)是一個(gè)Promise實(shí)例（原型鏈上具有then方法），則將其原封不動(dòng)地返回。
Promise.resolve()方法允許調(diào)用時(shí)不使用任何參數(shù)。

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

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

Promise構(gòu)造器回調(diào)函數(shù)參數(shù)中的 resolve 和 reject 和Promise構(gòu)造器方法中的 reject() 和 resolve() 效果是不一樣的。
Promise構(gòu)造器回調(diào)函數(shù)參數(shù)中的 resolve 和 reject 用于更改當(dāng)前Promise的狀態(tài)，并將其值返回給當(dāng)前Promise的then()方法的參數(shù)。
Promise構(gòu)造器方法中的 reject() 和 resolve() 可以直接返回一個(gè)已經(jīng)改變狀態(tài)的新的Promise對(duì)象。

Promise.reject() Promise.resolve()

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

  @param [resolveFn( ...args )]  
    函數(shù)，可選，當(dāng)Promise實(shí)例狀態(tài)變?yōu)椤巴瓿伞睜顟B(tài)時(shí)會(huì)被執(zhí)行，  
    用于將從當(dāng)前promise中取出reresolve( ...args )中得到的參數(shù)（...args），  
    并進(jìn)行相應(yīng)的操作，比如將（args）傳入另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    并將該函數(shù)執(zhí)行完成后返回的promise實(shí)例返回  
    @param ...args  
      參數(shù)列表，當(dāng)前promise實(shí)例處于“完成”狀態(tài)時(shí)，通過resolve(...args)得到的值。  
  @param [rejectFn( ...args )]  
    函數(shù)，可選，當(dāng)Promise實(shí)例狀態(tài)變?yōu)椤笆　睜顟B(tài)時(shí)會(huì)被執(zhí)行，  
    用于將從當(dāng)前promise中取出reject( ...args )中得到的參數(shù)（...args），  
    并進(jìn)行相應(yīng)的操作，比如將（args）傳入另一個(gè)封裝了promise構(gòu)造器的函數(shù)，  
    并將該函數(shù)執(zhí)行完成后返回的promise實(shí)例返回  
    @param ...args  
      參數(shù)列表，當(dāng)前promise處于“完成”狀態(tài)時(shí)，通過resolve(...args)得到的值。  

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

  @param simpleFn  
    一個(gè)普通函數(shù)，這個(gè)普通函數(shù)無論如何都會(huì)被執(zhí)行。  

finally方法指定，不管Promise對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作。

  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 => {
        // 這是一個(gè)把需要執(zhí)行的代碼，從任務(wù)隊(duì)列中拉出來的技巧
        setTimeout( () => { throw error }, 0)
      } )
  }

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

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

最終結(jié)果是：

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

javascript除了維護(hù)著當(dāng)前任務(wù)隊(duì)列，還維護(hù)著一個(gè)setTimeout隊(duì)列。所有未被執(zhí)行的setTimeout任務(wù)，會(huì)按順序放到setTimeout隊(duì)列中，等待普通任務(wù)隊(duì)列中的任務(wù)執(zhí)行完，才開始按順序執(zhí)行積累在setTimeout中的任務(wù)。
簡(jiǎn)而言之， javascript會(huì)在執(zhí)行完當(dāng)前任務(wù)隊(duì)列中的任務(wù)后，再執(zhí)行setTimeout隊(duì)列中的任務(wù) 。
我們?cè)O(shè)置任務(wù)在0s后執(zhí)行，可以將該任務(wù)調(diào)到setTimeout隊(duì)列中，延遲該任務(wù)發(fā)生，使之異步執(zhí)行。
這是異步執(zhí)行方案當(dāng)中，最常用，也最省時(shí)省事的一種方式。

  function preloadImage(path){
    return new Promise( (resolve, reject) => {
      let img = document.createElement("img")
      img.style.display = "none"
      document.body.appendChild(img)
      // 當(dāng)圖片加載完成后，promise轉(zhuǎn)為完成狀態(tài)
      // 此時(shí)，我們可以把該節(jié)點(diǎn)的圖片加載在應(yīng)有的地方，并且將其刪除
      img.addEventListener("load", resolve)
      // 當(dāng)圖片加載出錯(cuò)后，promise轉(zhuǎn)為失敗狀態(tài)
      img.addEventListener("error", reject)
      img.src = path
    } )
  }

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

本文更新信息

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

本文作者信息

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

支持網(wǎng)站列表

易杭網(wǎng) [www.freeedit.cn]

本文知識(shí)參考

ES6標(biāo)準(zhǔn)入門第二版（阮一峰）