Promise+async+Generator的實(shí)現(xiàn)原理

更新時(shí)間：2022年09月25日 09:39:00 作者：前端小菜雞就是我???????

這篇文章主要介紹了Promise+async+Generator的實(shí)現(xiàn)原理，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言

筆者剛接觸async/await時(shí)，就被其暫停執(zhí)行的特性吸引了，心想在沒有原生API支持的情況下，await居然能掛起當(dāng)前方法，實(shí)現(xiàn)暫停執(zhí)行，我感到十分好奇。好奇心驅(qū)使我一層一層剝開有關(guān)JS異步編程的一切。閱讀完本文，讀者應(yīng)該能夠了解：

Promise的實(shí)現(xiàn)原理
async/await的實(shí)現(xiàn)原理
Generator的實(shí)現(xiàn)原理

在成文過程中，筆者查閱了很多講解Promise實(shí)現(xiàn)的文章，但感覺大多文章都很難稱得上條理清晰，有的上來就放大段Promise規(guī)范翻譯，有的在Promise基礎(chǔ)使用上浪費(fèi)篇幅，又或者把一個(gè)簡(jiǎn)單的東西長(zhǎng)篇大論，過度講解，我推薦頭鐵的同學(xué)直接拉到本章小結(jié)看最終實(shí)現(xiàn)，結(jié)合著注釋直接啃代碼也能理解十之八九

回歸正題，文章開頭我們先點(diǎn)一下Promise為我們解決了什么問題：在傳統(tǒng)的異步編程中，如果異步之間存在依賴關(guān)系，我們就需要通過層層嵌套回調(diào)來滿足這種依賴，如果嵌套層數(shù)過多，可讀性和可維護(hù)性都變得很差，產(chǎn)生所謂“回調(diào)地獄”，而Promise將回調(diào)嵌套改為鏈?zhǔn)秸{(diào)用，增加可讀性和可維護(hù)性。下面我們就來一步步實(shí)現(xiàn)一個(gè)Promise：

1. 觀察者模式

我們先來看一個(gè)最簡(jiǎn)單的Promise使用：

const p1 = newPromise((resolve, reject) => {
    setTimeout(() => {
        resolve('result')
    },
    1000);
})
p1.then(res =>console.log(res), err => console.log(err))

觀察這個(gè)例子，我們分析Promise的調(diào)用流程：

Promise的構(gòu)造方法接收一個(gè)executor()，在new Promise()時(shí)就立刻執(zhí)行這個(gè)executor回調(diào)
executor()內(nèi)部的異步任務(wù)被放入宏/微任務(wù)隊(duì)列，等待執(zhí)行
then()被執(zhí)行，收集成功/失敗回調(diào)，放入成功/失敗隊(duì)列
executor()的異步任務(wù)被執(zhí)行，觸發(fā)resolve/reject，從成功/失敗隊(duì)列中取出回調(diào)依次執(zhí)行

其實(shí)熟悉設(shè)計(jì)模式的同學(xué)，很容易就能意識(shí)到這是個(gè)**「觀察者模式」**，這種收集依賴 -> 觸發(fā)通知 -> 取出依賴執(zhí)行 的方式，被廣泛運(yùn)用于觀察者模式的實(shí)現(xiàn)，在Promise里，執(zhí)行順序是then收集依賴 -> 異步觸發(fā)resolve -> resolve執(zhí)行依賴。依此，我們可以勾勒出Promise的大致形狀：

class MyPromise {
  // 構(gòu)造方法接收一個(gè)回調(diào)
  constructor(executor) {
    this._resolveQueue = []    // then收集的執(zhí)行成功的回調(diào)隊(duì)列
    this._rejectQueue = []     // then收集的執(zhí)行失敗的回調(diào)隊(duì)列
 
    // 由于resolve/reject是在executor內(nèi)部被調(diào)用, 因此需要使用箭頭函數(shù)固定this指向, 否則找不到this._resolveQueue
    let _resolve = (val) => {
      // 從成功隊(duì)列里取出回調(diào)依次執(zhí)行
      while(this._resolveQueue.length) {
        const callback = this._resolveQueue.shift()
        callback(val)
      }
    }
    // 實(shí)現(xiàn)同resolve
    let _reject = (val) => {
      while(this._rejectQueue.length) {
        const callback = this._rejectQueue.shift()
        callback(val)
      }
    }
    // new Promise()時(shí)立即執(zhí)行executor,并傳入resolve和reject
    executor(_resolve, _reject)
  }
  // then方法,接收一個(gè)成功的回調(diào)和一個(gè)失敗的回調(diào)，并push進(jìn)對(duì)應(yīng)隊(duì)列
  then(resolveFn, rejectFn) {
    this._resolveQueue.push(resolveFn)
    this._rejectQueue.push(rejectFn)
  }
}

寫完代碼我們可以測(cè)試一下:

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('result')
  }, 1000);
})
p1.then(res =>console.log(res))
//一秒后輸出result

我們運(yùn)用觀察者模式簡(jiǎn)單的實(shí)現(xiàn)了一下then和resolve，使我們能夠在then方法的回調(diào)里取得異步操作的返回值，但我們這個(gè)Promise離最終實(shí)現(xiàn)還有很長(zhǎng)的距離，下面我們來一步步補(bǔ)充這個(gè)Promise：

2. Promise A+規(guī)范

上面我們已經(jīng)簡(jiǎn)單地實(shí)現(xiàn)了一個(gè)超低配版Promise，但我們會(huì)看到很多文章和我們寫的不一樣，他們的Promise實(shí)現(xiàn)中還引入了各種狀態(tài)控制，這是由于ES6的Promise實(shí)現(xiàn)需要遵循Promise/A+規(guī)范，是規(guī)范對(duì)Promise的狀態(tài)控制做了要求。Promise/A+的規(guī)范比較長(zhǎng)，這里只總結(jié)兩條核心規(guī)則：

?

Promise本質(zhì)是一個(gè)狀態(tài)機(jī)，且狀態(tài)只能為以下三種：Pending（等待態(tài)）、Fulfilled（執(zhí)行態(tài)）、Rejected（拒絕態(tài)），狀態(tài)的變更是單向的，只能從Pending -> Fulfilled 或 Pending -> Rejected，狀態(tài)變更不可逆

then方法接收兩個(gè)可選參數(shù)，分別對(duì)應(yīng)狀態(tài)改變時(shí)觸發(fā)的回調(diào)。then方法返回一個(gè)promise。then 方法可以被同一個(gè) promise 調(diào)用多次。

?

根據(jù)規(guī)范，我們補(bǔ)充一下Promise的代碼：

//Promise/A+規(guī)范的三種狀態(tài)
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
 
class MyPromise {
  // 構(gòu)造方法接收一個(gè)回調(diào)
  constructor(executor) {
    this._status = PENDING     // Promise狀態(tài)
    this._resolveQueue = []    // 成功隊(duì)列, resolve時(shí)觸發(fā)
    this._rejectQueue = []     // 失敗隊(duì)列, reject時(shí)觸發(fā)
 
    // 由于resolve/reject是在executor內(nèi)部被調(diào)用, 因此需要使用箭頭函數(shù)固定this指向, 否則找不到this._resolveQueue
    let _resolve = (val) => {
      if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
      this._status = FULFILLED              // 變更狀態(tài)
 
      // 這里之所以使用一個(gè)隊(duì)列來儲(chǔ)存回調(diào),是為了實(shí)現(xiàn)規(guī)范要求的 "then 方法可以被同一個(gè) promise 調(diào)用多次"
      // 如果使用一個(gè)變量而非隊(duì)列來儲(chǔ)存回調(diào),那么即使多次p1.then()也只會(huì)執(zhí)行一次回調(diào)
      while(this._resolveQueue.length) {
        const callback = this._resolveQueue.shift()
        callback(val)
      }
    }
    // 實(shí)現(xiàn)同resolve
    let _reject = (val) => {
      if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
      this._status = REJECTED               // 變更狀態(tài)
      while(this._rejectQueue.length) {
        const callback = this._rejectQueue.shift()
        callback(val)
      }
    }
    // new Promise()時(shí)立即執(zhí)行executor,并傳入resolve和reject
    executor(_resolve, _reject)
  }
 
  // then方法,接收一個(gè)成功的回調(diào)和一個(gè)失敗的回調(diào)
  then(resolveFn, rejectFn) {
    this._resolveQueue.push(resolveFn)
    this._rejectQueue.push(rejectFn)
  }
}

3. then的鏈?zhǔn)秸{(diào)用

補(bǔ)充完規(guī)范，我們接著來實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用，這是Promise實(shí)現(xiàn)的重點(diǎn)和難點(diǎn)，我們先來看一下then是如何鏈?zhǔn)秸{(diào)用的：

const p1 = newPromise((resolve, reject) => {
  resolve(1)
})
 
p1
  .then(res => {
    console.log(res)
    //then回調(diào)中可以return一個(gè)Promise
    returnnewPromise((resolve, reject) => {
      setTimeout(() => {
        resolve(2)
      }, 1000);
    })
  })
  .then(res => {
    console.log(res)
    //then回調(diào)中也可以return一個(gè)值
    return3
  })
  .then(res => {
    console.log(res)
  })

輸出：

1
2
3

我們思考一下如何實(shí)現(xiàn)這種鏈?zhǔn)秸{(diào)用：

顯然.then()需要返回一個(gè)Promise，這樣才能找到then方法，所以我們會(huì)把then方法的返回值包裝成Promise。
.then()的回調(diào)需要順序執(zhí)行，以上面這段代碼為例，雖然中間return了一個(gè)Promise，但執(zhí)行順序仍要保證是1->2->3。我們要等待當(dāng)前Promise狀態(tài)變更后，再執(zhí)行下一個(gè)then收集的回調(diào)，這就要求我們對(duì)then的返回值分類討論

// then方法
then(resolveFn, rejectFn) {
  //return一個(gè)新的promise
  returnnewPromise((resolve, reject) => {
    //把resolveFn重新包裝一下,再push進(jìn)resolve執(zhí)行隊(duì)列,這是為了能夠獲取回調(diào)的返回值進(jìn)行分類討論
    const fulfilledFn = value => {
      try {
        //執(zhí)行第一個(gè)(當(dāng)前的)Promise的成功回調(diào),并獲取返回值
        let x = resolveFn(value)
        //分類討論返回值,如果是Promise,那么等待Promise狀態(tài)變更,否則直接resolve
        x instanceofPromise ? x.then(resolve, reject) : resolve(x)
      } catch (error) {
        reject(error)
      }
    }
    //把后續(xù)then收集的依賴都push進(jìn)當(dāng)前Promise的成功回調(diào)隊(duì)列中(_rejectQueue), 這是為了保證順序調(diào)用
    this._resolveQueue.push(fulfilledFn)
 
    //reject同理
    const rejectedFn  = error => {
      try {
        let x = rejectFn(error)
        x instanceofPromise ? x.then(resolve, reject) : resolve(x)
      } catch (error) {
        reject(error)
      }
    }
    this._rejectQueue.push(rejectedFn)
  })
}

然后我們就能測(cè)試一下鏈?zhǔn)秸{(diào)用：

const p1 = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve(1)
  }, 500);
})
 
p1
  .then(res => {
    console.log(res)
    return2
  })
  .then(res => {
    console.log(res)
    return3
  })
  .then(res => {
    console.log(res)
  })
 
//輸出 1 2 3

4.值穿透 & 狀態(tài)已變更的情況

我們已經(jīng)初步完成了鏈?zhǔn)秸{(diào)用，但是對(duì)于 then() 方法，我們還要兩個(gè)細(xì)節(jié)需要處理一下

「值穿透」：根據(jù)規(guī)范，如果 then() 接收的參數(shù)不是function，那么我們應(yīng)該忽略它。如果沒有忽略，當(dāng)then()回調(diào)不為function時(shí)將會(huì)拋出異常，導(dǎo)致鏈?zhǔn)秸{(diào)用中斷
「處理狀態(tài)為resolve/reject的情況」：其實(shí)我們上邊 then() 的寫法是對(duì)應(yīng)狀態(tài)為padding的情況，但是有些時(shí)候，resolve/reject 在 then() 之前就被執(zhí)行（比如Promise.resolve().then()），如果這個(gè)時(shí)候還把then()回調(diào)push進(jìn)resolve/reject的執(zhí)行隊(duì)列里，那么回調(diào)將不會(huì)被執(zhí)行，因此對(duì)于狀態(tài)已經(jīng)變?yōu)?code>fulfilled或rejected的情況，我們直接執(zhí)行then回調(diào)：

// then方法,接收一個(gè)成功的回調(diào)和一個(gè)失敗的回調(diào)
  then(resolveFn, rejectFn) {
    // 根據(jù)規(guī)范，如果then的參數(shù)不是function，則我們需要忽略它, 讓鏈?zhǔn)秸{(diào)用繼續(xù)往下執(zhí)行
    typeof resolveFn !== 'function' ? resolveFn = value => value : null
    typeof rejectFn !== 'function' ? rejectFn = error => error : null
  
    // return一個(gè)新的promise
    returnnewPromise((resolve, reject) => {
      // 把resolveFn重新包裝一下,再push進(jìn)resolve執(zhí)行隊(duì)列,這是為了能夠獲取回調(diào)的返回值進(jìn)行分類討論
      const fulfilledFn = value => {
        try {
          // 執(zhí)行第一個(gè)(當(dāng)前的)Promise的成功回調(diào),并獲取返回值
          let x = resolveFn(value)
          // 分類討論返回值,如果是Promise,那么等待Promise狀態(tài)變更,否則直接resolve
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
  
      // reject同理
      const rejectedFn  = error => {
        try {
          let x = rejectFn(error)
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
      switch (this._status) {
        // 當(dāng)狀態(tài)為pending時(shí),把then回調(diào)push進(jìn)resolve/reject執(zhí)行隊(duì)列,等待執(zhí)行
        case PENDING:
          this._resolveQueue.push(fulfilledFn)
          this._rejectQueue.push(rejectedFn)
          break;
        // 當(dāng)狀態(tài)已經(jīng)變?yōu)閞esolve/reject時(shí),直接執(zhí)行then回調(diào)
        case FULFILLED:
          fulfilledFn(this._value)    // this._value是上一個(gè)then回調(diào)return的值(見完整版代碼)
          break;
        case REJECTED:
          rejectedFn(this._value)
          break;
      }
    })
  }

5.兼容同步任務(wù)

完成了then的鏈?zhǔn)秸{(diào)用以后，我們?cè)偬幚硪粋€(gè)前邊的細(xì)節(jié)，然后放出完整代碼。上文我們說過，Promise的執(zhí)行順序是new Promise -> then()收集回調(diào) -> resolve/reject執(zhí)行回調(diào)，這一順序是建立在**「executor是異步任務(wù)」**的前提上的，如果executor是一個(gè)同步任務(wù)，那么順序就會(huì)變成new Promise -> resolve/reject執(zhí)行回調(diào) -> then()收集回調(diào)，resolve的執(zhí)行跑到then之前去了，為了兼容這種情況，我們給resolve/reject執(zhí)行回調(diào)的操作包一個(gè)setTimeout，讓它異步執(zhí)行。

?

這里插一句，有關(guān)這個(gè)setTimeout，其實(shí)還有一番學(xué)問。雖然規(guī)范沒有要求回調(diào)應(yīng)該被放進(jìn)宏任務(wù)隊(duì)列還是微任務(wù)隊(duì)列，但其實(shí)Promise的默認(rèn)實(shí)現(xiàn)是放進(jìn)了微任務(wù)隊(duì)列，我們的實(shí)現(xiàn)（包括大多數(shù)Promise手動(dòng)實(shí)現(xiàn)和polyfill的轉(zhuǎn)化）都是使用setTimeout放入了宏任務(wù)隊(duì)列（當(dāng)然我們也可以用MutationObserver模擬微任務(wù)）

?

//Promise/A+規(guī)定的三種狀態(tài)
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
 
class MyPromise {
  // 構(gòu)造方法接收一個(gè)回調(diào)
  constructor(executor) {
    this._status = PENDING     // Promise狀態(tài)
    this._value = undefined// 儲(chǔ)存then回調(diào)return的值
    this._resolveQueue = []    // 成功隊(duì)列, resolve時(shí)觸發(fā)
    this._rejectQueue = []     // 失敗隊(duì)列, reject時(shí)觸發(fā)
 
    // 由于resolve/reject是在executor內(nèi)部被調(diào)用, 因此需要使用箭頭函數(shù)固定this指向, 否則找不到this._resolveQueue
    let _resolve = (val) => {
      //把resolve執(zhí)行回調(diào)的操作封裝成一個(gè)函數(shù),放進(jìn)setTimeout里,以兼容executor是同步代碼的情況
      const run = () => {
        if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
        this._status = FULFILLED              // 變更狀態(tài)
        this._value = val                     // 儲(chǔ)存當(dāng)前value
 
        // 這里之所以使用一個(gè)隊(duì)列來儲(chǔ)存回調(diào),是為了實(shí)現(xiàn)規(guī)范要求的 "then 方法可以被同一個(gè) promise 調(diào)用多次"
        // 如果使用一個(gè)變量而非隊(duì)列來儲(chǔ)存回調(diào),那么即使多次p1.then()也只會(huì)執(zhí)行一次回調(diào)
        while(this._resolveQueue.length) {
          const callback = this._resolveQueue.shift()
          callback(val)
        }
      }
      setTimeout(run)
    }
    // 實(shí)現(xiàn)同resolve
    let _reject = (val) => {
      const run = () => {
        if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
        this._status = REJECTED               // 變更狀態(tài)
        this._value = val                     // 儲(chǔ)存當(dāng)前value
        while(this._rejectQueue.length) {
          const callback = this._rejectQueue.shift()
          callback(val)
        }
      }
      setTimeout(run)
    }
    // new Promise()時(shí)立即執(zhí)行executor,并傳入resolve和reject
    executor(_resolve, _reject)
  }
 
  // then方法,接收一個(gè)成功的回調(diào)和一個(gè)失敗的回調(diào)
  then(resolveFn, rejectFn) {
    // 根據(jù)規(guī)范，如果then的參數(shù)不是function，則我們需要忽略它, 讓鏈?zhǔn)秸{(diào)用繼續(xù)往下執(zhí)行
    typeof resolveFn !== 'function' ? resolveFn = value => value : null
    typeof rejectFn !== 'function' ? rejectFn = error => error : null
  
    // return一個(gè)新的promise
    returnnewPromise((resolve, reject) => {
      // 把resolveFn重新包裝一下,再push進(jìn)resolve執(zhí)行隊(duì)列,這是為了能夠獲取回調(diào)的返回值進(jìn)行分類討論
      const fulfilledFn = value => {
        try {
          // 執(zhí)行第一個(gè)(當(dāng)前的)Promise的成功回調(diào),并獲取返回值
          let x = resolveFn(value)
          // 分類討論返回值,如果是Promise,那么等待Promise狀態(tài)變更,否則直接resolve
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
  
      // reject同理
      const rejectedFn  = error => {
        try {
          let x = rejectFn(error)
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
      switch (this._status) {
        // 當(dāng)狀態(tài)為pending時(shí),把then回調(diào)push進(jìn)resolve/reject執(zhí)行隊(duì)列,等待執(zhí)行
        case PENDING:
          this._resolveQueue.push(fulfilledFn)
          this._rejectQueue.push(rejectedFn)
          break;
        // 當(dāng)狀態(tài)已經(jīng)變?yōu)閞esolve/reject時(shí),直接執(zhí)行then回調(diào)
        case FULFILLED:
          fulfilledFn(this._value)    // this._value是上一個(gè)then回調(diào)return的值(見完整版代碼)
          break;
        case REJECTED:
          rejectedFn(this._value)
          break;
      }
    })
  }
}

然后我們可以測(cè)試一下這個(gè)Promise：

const p1 = new MyPromise((resolve, reject) => {
  resolve(1)          //同步executor測(cè)試
})
 
p1
  .then(res => {
    console.log(res)
    return2//鏈?zhǔn)秸{(diào)用測(cè)試
  })
  .then()             //值穿透測(cè)試
  .then(res => {
    console.log(res)
    returnnew MyPromise((resolve, reject) => {
      resolve(3)      //返回Promise測(cè)試
    })
  })
  .then(res => {
    console.log(res)
    thrownewError('reject測(cè)試')   //reject測(cè)試
  })
  .then(() => {}, err => {
    console.log(err)
  })
 
// 輸出
// 1
// 2
// 3
// Error: reject測(cè)試

到這里，我們已經(jīng)實(shí)現(xiàn)了Promise的主要功能(｀∀´)Ψ剩下的幾個(gè)方法都非常簡(jiǎn)單，我們順手收拾掉：

Promise.prototype.catch()

?

catch()方法返回一個(gè)Promise，并且處理拒絕的情況。它的行為與調(diào)用Promise.prototype.then(undefined, onRejected) 相同。

?

//catch方法其實(shí)就是執(zhí)行一下then的第二個(gè)回調(diào)
catch(rejectFn) {
  returnthis.then(undefined, rejectFn)
}
復(fù)制代碼

Promise.prototype.finally()

?

finally()方法返回一個(gè)Promise。在promise結(jié)束時(shí)，無論結(jié)果是fulfilled或者是rejected，都會(huì)執(zhí)行指定的回調(diào)函數(shù)。在finally之后，還可以繼續(xù)then。并且會(huì)將值原封不動(dòng)的傳遞給后面的then

?

//finally方法
finally(callback) {
  returnthis.then(
    value => MyPromise.resolve(callback()).then(() => value),             // MyPromise.resolve執(zhí)行回調(diào),并在then中return結(jié)果傳遞給后面的Promise
    reason => MyPromise.resolve(callback()).then(() => { throw reason })  // reject同理
  )
}

Promise.resolve()

?

Promise.resolve(value)方法返回一個(gè)以給定值解析后的Promise 對(duì)象。如果該值為promise，返回這個(gè)promise；如果這個(gè)值是thenable（即帶有"then" 方法)），返回的promise會(huì)“跟隨”這個(gè)thenable的對(duì)象，采用它的最終狀態(tài)；否則返回的promise將以此值完成。此函數(shù)將類promise對(duì)象的多層嵌套展平。

?

//靜態(tài)的resolve方法
static resolve(value) {
  if(value instanceof MyPromise) return value // 根據(jù)規(guī)范, 如果參數(shù)是Promise實(shí)例, 直接return這個(gè)實(shí)例
  returnnew MyPromise(resolve => resolve(value))
}

Promise.reject()

?

Promise.reject()方法返回一個(gè)帶有拒絕原因的Promise對(duì)象。

?

//靜態(tài)的reject方法
static reject(reason) {
  returnnew MyPromise((resolve, reject) => reject(reason))
}

Promise.all()

?

Promise.all(iterable)方法返回一個(gè) Promise 實(shí)例，此實(shí)例在 iterable 參數(shù)內(nèi)所有的 promise 都“完成（resolved）”或參數(shù)中不包含 promise 時(shí)回調(diào)完成（resolve）；如果參數(shù)中 promise 有一個(gè)失?。╮ejected），此實(shí)例回調(diào)失?。╮eject），失敗原因的是第一個(gè)失敗 promise 的結(jié)果。

?

//靜態(tài)的all方法
static all(promiseArr) {
  let index = 0
  let result = []
  returnnew MyPromise((resolve, reject) => {
    promiseArr.forEach((p, i) => {
      //Promise.resolve(p)用于處理傳入值不為Promise的情況
      MyPromise.resolve(p).then(
        val => {
          index++
          result[i] = val
          //所有then執(zhí)行后, resolve結(jié)果
          if(index === promiseArr.length) {
            resolve(result)
          }
        },
        err => {
          //有一個(gè)Promise被reject時(shí)，MyPromise的狀態(tài)變?yōu)閞eject
          reject(err)
        }
      )
    })
  })
}

Promise.race()

?

Promise.race(iterable)方法返回一個(gè) promise，一旦迭代器中的某個(gè)promise解決或拒絕，返回的 promise就會(huì)解決或拒絕。

?

static race(promiseArr) {
  returnnew MyPromise((resolve, reject) => {
    //同時(shí)執(zhí)行Promise,如果有一個(gè)Promise的狀態(tài)發(fā)生改變,就變更新MyPromise的狀態(tài)
    for (let p of promiseArr) {
      Promise.resolve(p).then(  //Promise.resolve(p)用于處理傳入值不為Promise的情況
        value => {
          resolve(value)        //注意這個(gè)resolve是上邊new MyPromise的
        },
        err => {
          reject(err)
        }
      )
    }
  })
}

6. 完整代碼

//Promise/A+規(guī)定的三種狀態(tài)
const PENDING = 'pending'
const FULFILLED = 'fulfilled'
const REJECTED = 'rejected'
 
class MyPromise {
  // 構(gòu)造方法接收一個(gè)回調(diào)
  constructor(executor) {
    this._status = PENDING     // Promise狀態(tài)
    this._value = undefined// 儲(chǔ)存then回調(diào)return的值
    this._resolveQueue = []    // 成功隊(duì)列, resolve時(shí)觸發(fā)
    this._rejectQueue = []     // 失敗隊(duì)列, reject時(shí)觸發(fā)
 
    // 由于resolve/reject是在executor內(nèi)部被調(diào)用, 因此需要使用箭頭函數(shù)固定this指向, 否則找不到this._resolveQueue
    let _resolve = (val) => {
      //把resolve執(zhí)行回調(diào)的操作封裝成一個(gè)函數(shù),放進(jìn)setTimeout里,以兼容executor是同步代碼的情況
      const run = () => {
        if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
        this._status = FULFILLED              // 變更狀態(tài)
        this._value = val                     // 儲(chǔ)存當(dāng)前value
 
        // 這里之所以使用一個(gè)隊(duì)列來儲(chǔ)存回調(diào),是為了實(shí)現(xiàn)規(guī)范要求的 "then 方法可以被同一個(gè) promise 調(diào)用多次"
        // 如果使用一個(gè)變量而非隊(duì)列來儲(chǔ)存回調(diào),那么即使多次p1.then()也只會(huì)執(zhí)行一次回調(diào)
        while(this._resolveQueue.length) {
          const callback = this._resolveQueue.shift()
          callback(val)
        }
      }
      setTimeout(run)
    }
    // 實(shí)現(xiàn)同resolve
    let _reject = (val) => {
      const run = () => {
        if(this._status !== PENDING) return// 對(duì)應(yīng)規(guī)范中的"狀態(tài)只能由pending到fulfilled或rejected"
        this._status = REJECTED               // 變更狀態(tài)
        this._value = val                     // 儲(chǔ)存當(dāng)前value
        while(this._rejectQueue.length) {
          const callback = this._rejectQueue.shift()
          callback(val)
        }
      }
      setTimeout(run)
    }
    // new Promise()時(shí)立即執(zhí)行executor,并傳入resolve和reject
    executor(_resolve, _reject)
  }
 
  // then方法,接收一個(gè)成功的回調(diào)和一個(gè)失敗的回調(diào)
  then(resolveFn, rejectFn) {
    // 根據(jù)規(guī)范，如果then的參數(shù)不是function，則我們需要忽略它, 讓鏈?zhǔn)秸{(diào)用繼續(xù)往下執(zhí)行
    typeof resolveFn !== 'function' ? resolveFn = value => value : null
    typeof rejectFn !== 'function' ? rejectFn = error => error : null
  
    // return一個(gè)新的promise
    returnnewPromise((resolve, reject) => {
      // 把resolveFn重新包裝一下,再push進(jìn)resolve執(zhí)行隊(duì)列,這是為了能夠獲取回調(diào)的返回值進(jìn)行分類討論
      const fulfilledFn = value => {
        try {
          // 執(zhí)行第一個(gè)(當(dāng)前的)Promise的成功回調(diào),并獲取返回值
          let x = resolveFn(value)
          // 分類討論返回值,如果是Promise,那么等待Promise狀態(tài)變更,否則直接resolve
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
  
      // reject同理
      const rejectedFn  = error => {
        try {
          let x = rejectFn(error)
          x instanceofPromise ? x.then(resolve, reject) : resolve(x)
        } catch (error) {
          reject(error)
        }
      }
  
      switch (this._status) {
        // 當(dāng)狀態(tài)為pending時(shí),把then回調(diào)push進(jìn)resolve/reject執(zhí)行隊(duì)列,等待執(zhí)行
        case PENDING:
          this._resolveQueue.push(fulfilledFn)
          this._rejectQueue.push(rejectedFn)
          break;
        // 當(dāng)狀態(tài)已經(jīng)變?yōu)閞esolve/reject時(shí),直接執(zhí)行then回調(diào)
        case FULFILLED:
          fulfilledFn(this._value)    // this._value是上一個(gè)then回調(diào)return的值(見完整版代碼)
          break;
        case REJECTED:
          rejectedFn(this._value)
          break;
      }
    })
  }
 
  //catch方法其實(shí)就是執(zhí)行一下then的第二個(gè)回調(diào)
  catch(rejectFn) {
    returnthis.then(undefined, rejectFn)
  }
 
  //finally方法
  finally(callback) {
    returnthis.then(
      value => MyPromise.resolve(callback()).then(() => value),             //執(zhí)行回調(diào),并returnvalue傳遞給后面的then
      reason => MyPromise.resolve(callback()).then(() => { throw reason })  //reject同理
    )
  }
 
  //靜態(tài)的resolve方法
  static resolve(value) {
    if(value instanceof MyPromise) return value //根據(jù)規(guī)范, 如果參數(shù)是Promise實(shí)例, 直接return這個(gè)實(shí)例
    returnnew MyPromise(resolve => resolve(value))
  }
 
  //靜態(tài)的reject方法
  static reject(reason) {
    returnnew MyPromise((resolve, reject) => reject(reason))
  }
 
  //靜態(tài)的all方法
  static all(promiseArr) {
    let index = 0
    let result = []
    returnnew MyPromise((resolve, reject) => {
      promiseArr.forEach((p, i) => {
        //Promise.resolve(p)用于處理傳入值不為Promise的情況
        MyPromise.resolve(p).then(
          val => {
            index++
            result[i] = val
            if(index === promiseArr.length) {
              resolve(result)
            }
          },
          err => {
            reject(err)
          }
        )
      })
    })
  }
 
  //靜態(tài)的race方法
  static race(promiseArr) {
    returnnew MyPromise((resolve, reject) => {
      //同時(shí)執(zhí)行Promise,如果有一個(gè)Promise的狀態(tài)發(fā)生改變,就變更新MyPromise的狀態(tài)
      for (let p of promiseArr) {
        Promise.resolve(p).then(  //Promise.resolve(p)用于處理傳入值不為Promise的情況
          value => {
            resolve(value)        //注意這個(gè)resolve是上邊new MyPromise的
          },
          err => {
            reject(err)
          }
        )
      }
    })
  }
}

洋洋灑灑150多行的代碼，到這里，我們終于可以給Promise的實(shí)現(xiàn)做一個(gè)結(jié)尾了。我們從一個(gè)最簡(jiǎn)單的Promise使用實(shí)例開始，通過對(duì)調(diào)用流程的分析，根據(jù)觀察者模式實(shí)現(xiàn)了Promise的大致骨架，然后依據(jù)Promise/A+規(guī)范填充代碼，重點(diǎn)實(shí)現(xiàn)了then 的鏈?zhǔn)秸{(diào)用，最后完成了Promise的靜態(tài)/實(shí)例方法。其實(shí)Promise實(shí)現(xiàn)在整體上并沒有太復(fù)雜的思想，但我們?nèi)粘Ｊ褂玫臅r(shí)候往往忽略了很多Promise細(xì)節(jié)，因而很難寫出一個(gè)符合規(guī)范的Promise實(shí)現(xiàn)，源碼的實(shí)現(xiàn)過程，其實(shí)也是對(duì)Promise使用細(xì)節(jié)重新學(xué)習(xí)的過程。

7. async/await實(shí)現(xiàn)

雖然前邊花了這么多篇幅講Promise的實(shí)現(xiàn)，不過探索async/await暫停執(zhí)行的機(jī)制才是我們的初衷，下面我們就來進(jìn)入這一塊的內(nèi)容。同樣地，開頭我們點(diǎn)一下async/await的使用意義。在多個(gè)回調(diào)依賴的場(chǎng)景中，盡管Promise通過鏈?zhǔn)秸{(diào)用取代了回調(diào)嵌套，但過多的鏈?zhǔn)秸{(diào)用可讀性仍然不佳，流程控制也不方便，ES7 提出的async 函數(shù)，終于讓 JS 對(duì)于異步操作有了終極解決方案，簡(jiǎn)潔優(yōu)美地解決了以上兩個(gè)問題。

設(shè)想一個(gè)這樣的場(chǎng)景，異步任務(wù)a->b->c之間存在依賴關(guān)系，如果我們通過then鏈?zhǔn)秸{(diào)用來處理這些關(guān)系，可讀性并不是很好，如果我們想控制其中某個(gè)過程，比如在某些條件下，b不往下執(zhí)行到c，那么也不是很方便控制

Promise.resolve(a)
  .then(b => {
    // do something
  })
  .then(c => {
    // do something
  })

但是如果通過async/await來實(shí)現(xiàn)這個(gè)場(chǎng)景，可讀性和流程控制都會(huì)方便不少。

async () =&gt; {
  const a = awaitPromise.resolve(a);
  const b = awaitPromise.resolve(b);
  const c = awaitPromise.resolve(c);
}
復(fù)制代碼

那么我們要如何實(shí)現(xiàn)一個(gè)async/await呢，首先我們要知道，「async/await實(shí)際上是對(duì)Generator（生成器）的封裝」，是一個(gè)語法糖。由于Generator出現(xiàn)不久就被async/await取代了，很多同學(xué)對(duì)Generator比較陌生，因此我們先來看看Generator的用法：

?

ES6 新引入了 Generator 函數(shù)，可以通過 yield 關(guān)鍵字，把函數(shù)的執(zhí)行流掛起，通過next()方法可以切換到下一個(gè)狀態(tài)，為改變執(zhí)行流程提供了可能，從而為異步編程提供解決方案。

?

function* myGenerator() {
  yield'1'
  yield'2'
  return'3'
}
 
const gen = myGenerator();  // 獲取迭代器
gen.next()  //{value: "1", done: false}
gen.next()  //{value: "2", done: false}
gen.next()  //{value: "3", done: true}

也可以通過給next()傳參, 讓yield具有返回值

function* myGenerator() {
  console.log(yield'1')  //test1
  console.log(yield'2')  //test2
  console.log(yield'3')  //test3
}
// 獲取迭代器
const gen = myGenerator();
gen.next()
gen.next('test1')
gen.next('test2')
gen.next('test3')

我們看到Generator的用法，應(yīng)該?會(huì)感到很熟悉，*/yield和async/await看起來其實(shí)已經(jīng)很相似了，它們都提供了暫停執(zhí)行的功能，但二者又有三點(diǎn)不同：

async/await自帶執(zhí)行器，不需要手動(dòng)調(diào)用next()就能自動(dòng)執(zhí)行下一步
async函數(shù)返回值是Promise對(duì)象，而Generator返回的是生成器對(duì)象
await能夠返回Promise的resolve/reject的值

我們對(duì)async/await的實(shí)現(xiàn)，其實(shí)也就是對(duì)應(yīng)以上三點(diǎn)封裝Generator

自動(dòng)執(zhí)行

我們先來看一下，對(duì)于這樣一個(gè)Generator，手動(dòng)執(zhí)行是怎樣一個(gè)流程

function* myGenerator() {
  yieldPromise.resolve(1);
  yieldPromise.resolve(2);
  yieldPromise.resolve(3);
}
 
const gen = myGenerator()
gen.next().value.then(val => {
  console.log(val)
  gen.next().value.then(val => {
    console.log(val)
    gen.next().value.then(val => {
      console.log(val)
    })
  })
})
 
//輸出1 2 3

我們也可以通過給gen.next()傳值的方式，讓yield能返回resolve的值

function* myGenerator() {
  console.log(yieldPromise.resolve(1))   //1
  console.log(yieldPromise.resolve(2))   //2
  console.log(yieldPromise.resolve(3))   //3
}
 
const gen = myGenerator()
gen.next().value.then(val => {
  // console.log(val)
  gen.next(val).value.then(val => {
    // console.log(val)
    gen.next(val).value.then(val => {
      // console.log(val)
      gen.next(val)
    })
  })
})

顯然，手動(dòng)執(zhí)行的寫法看起來既笨拙又丑陋，我們希望生成器函數(shù)能自動(dòng)往下執(zhí)行，且yield能返回resolve的值，基于這兩個(gè)需求，我們進(jìn)行一個(gè)基本的封裝，這里async/await是關(guān)鍵字，不能重寫，我們用函數(shù)來模擬：

function run(gen) {
  var g = gen()                     //由于每次gen()獲取到的都是最新的迭代器,因此獲取迭代器操作要放在step()之前,否則會(huì)進(jìn)入死循環(huán)
 
  function step(val) {              //封裝一個(gè)方法, 遞歸執(zhí)行next()
    var res = g.next(val)           //獲取迭代器對(duì)象，并返回resolve的值
    if(res.done) return res.value   //遞歸終止條件
    res.value.then(val => {         //Promise的then方法是實(shí)現(xiàn)自動(dòng)迭代的前提
      step(val)                     //等待Promise完成就自動(dòng)執(zhí)行下一個(gè)next，并傳入resolve的值
    })
  }
  step()  //第一次執(zhí)行
}

對(duì)于我們之前的例子，我們就能這樣執(zhí)行：

function* myGenerator() {
  console.log(yieldPromise.resolve(1))   //1
  console.log(yieldPromise.resolve(2))   //2
  console.log(yieldPromise.resolve(3))   //3
}
 
run(myGenerator)

這樣我們就初步實(shí)現(xiàn)了一個(gè)async/await

上邊的代碼只有五六行，但并不是一下就能看明白的，我們之前用了四個(gè)例子來做鋪墊，也是為了讓讀者更好地理解這段代碼。簡(jiǎn)單的說，我們封裝了一個(gè)run方法，run方法里我們把執(zhí)行下一步的操作封裝成step()，每次Promise.then()的時(shí)候都去執(zhí)行step()，實(shí)現(xiàn)自動(dòng)迭代的效果。在迭代的過程中，我們還把resolve的值傳入gen.next()，使得yield得以返回Promise的resolve的值

?

這里插一句，是不是只有.then方法這樣的形式才能完成我們自動(dòng)執(zhí)行的功能呢？答案是否定的，yield后邊除了接Promise，還可以接thunk函數(shù)，thunk函數(shù)不是一個(gè)新東西，所謂thunk函數(shù)，就是**「單參的只接受回調(diào)的函數(shù)」，詳細(xì)介紹可以看阮一峰Thunk 函數(shù)的含義和用法，無論是Promise還是thunk函數(shù)，其核心都是通過「?jìng)魅牖卣{(diào)」**的方式來實(shí)現(xiàn)Generator的自動(dòng)執(zhí)行。thunk函數(shù)只作為一個(gè)拓展知識(shí)，理解有困難的同學(xué)也可以跳過這里，并不影響后續(xù)理解。

?

返回Promise & 異常處理

雖然我們實(shí)現(xiàn)了Generator的自動(dòng)執(zhí)行以及讓yield返回resolve的值，但上邊的代碼還存在著幾點(diǎn)問題：

「需要兼容基本類型」：這段代碼能自動(dòng)執(zhí)行的前提是yield后面跟Promise，為了兼容后面跟著基本類型值的情況，我們需要把yield跟的內(nèi)容(gen().next.value)都用Promise.resolve()轉(zhuǎn)化一遍
「缺少錯(cuò)誤處理」：上邊代碼里的Promise如果執(zhí)行失敗，就會(huì)導(dǎo)致后續(xù)執(zhí)行直接中斷，我們需要通過調(diào)用Generator.prototype.throw()，把錯(cuò)誤拋出來，才能被外層的try-catch捕獲到
「返回值是Promise」：async/await的返回值是一個(gè)Promise，我們這里也需要保持一致，給返回值包一個(gè)Promise

我們改造一下run方法：

function run(gen) {
  //把返回值包裝成promise
  returnnewPromise((resolve, reject) => {
    var g = gen()
 
    function step(val) {
      //錯(cuò)誤處理
      try {
        var res = g.next(val)
      } catch(err) {
        return reject(err);
      }
      if(res.done) {
        return resolve(res.value);
      }
      //res.value包裝為promise，以兼容yield后面跟基本類型的情況
      Promise.resolve(res.value).then(
        val => {
          step(val);
        },
        err => {
          //拋出錯(cuò)誤
          g.throw(err)
        });
    }
    step();
  });
}

然后我們可以測(cè)試一下：

function* myGenerator() {
  try {
    console.log(yieldPromise.resolve(1))
    console.log(yield2)   //2
    console.log(yieldPromise.reject('error'))
  } catch (error) {
    console.log(error)
  }
}
 
const result = run(myGenerator)     //result是一個(gè)Promise
//輸出 1 2 error

到這里，一個(gè)async/await的實(shí)現(xiàn)基本完成了。最后我們可以看一下babel對(duì)async/await的轉(zhuǎn)換結(jié)果，其實(shí)整體的思路是一樣的，但是寫法稍有不同：

//相當(dāng)于我們的run()
function _asyncToGenerator(fn) {
  returnfunction() {
    var self = this
    var args = arguments
    returnnewPromise(function(resolve, reject) {
      var gen = fn.apply(self, args);
 
      //相當(dāng)于我們的step()
      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'next', value);
      }
      //處理異常
      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, 'throw', err);
      }
      _next(undefined);
    });
  };
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }
  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

使用方式：

const foo = _asyncToGenerator(function* () {
  try {
    console.log(yieldPromise.resolve(1))   //1
    console.log(yield2)                    //2
    return'3'
  } catch (error) {
    console.log(error)
  }
})
 
foo().then(res => {
  console.log(res)                          //3
})

有關(guān)async/await的實(shí)現(xiàn)，到這里告一段落。但是直到結(jié)尾，我們也不知道await到底是如何暫停執(zhí)行的，有關(guān)await暫停執(zhí)行的秘密，我們還要到Generator的實(shí)現(xiàn)中去尋找答案

8. Generator實(shí)現(xiàn)

我們從一個(gè)簡(jiǎn)單的例子開始，一步步探究Generator的實(shí)現(xiàn)原理：

function* foo() {
  yield'result1'
  yield'result2'
  yield'result3'
}
  
const gen = foo()
console.log(gen.next().value)
console.log(gen.next().value)
console.log(gen.next().value)

我們可以在babel官網(wǎng)上在線轉(zhuǎn)化這段代碼，看看ES5環(huán)境下是如何實(shí)現(xiàn)Generator的：

"use strict";
 
var _marked =
/*#__PURE__*/
regeneratorRuntime.mark(foo);
 
function foo() {
  return regeneratorRuntime.wrap(function foo$(_context) {
    while (1) {
      switch (_context.prev = _context.next) {
        case0:
          _context.next = 2;
          return'result1';
 
        case2:
          _context.next = 4;
          return'result2';
 
        case4:
          _context.next = 6;
          return'result3';
 
        case6:
        case"end":
          return _context.stop();
      }
    }
  }, _marked);
}
var gen = foo();
console.log(gen.next().value);
console.log(gen.next().value);
console.log(gen.next().value);

代碼咋一看不長(zhǎng)，但如果仔細(xì)觀察會(huì)發(fā)現(xiàn)有兩個(gè)不認(rèn)識(shí)的東西 —— regeneratorRuntime.mark和regeneratorRuntime.wrap，這兩者其實(shí)是 regenerator-runtime 模塊里的兩個(gè)方法，regenerator-runtime 模塊來自facebook的 regenerator 模塊，完整代碼在runtime.js，這個(gè)runtime有700多行...-_-||，因此我們不能全講，不太重要的部分我們就簡(jiǎn)單地過一下，重點(diǎn)講解暫停執(zhí)行相關(guān)部分代碼

?

個(gè)人覺得啃源碼的效果不是很好，建議讀者拉到末尾先看結(jié)論和簡(jiǎn)略版實(shí)現(xiàn)，源碼作為一個(gè)補(bǔ)充理解

?

regeneratorRuntime.mark()

regeneratorRuntime.mark(foo)這個(gè)方法在第一行被調(diào)用，我們先看一下runtime里mark()方法的定義

//runtime.js里的定義稍有不同，多了一些判斷，以下是編譯后的代碼
runtime.mark = function(genFun) {
  genFun.__proto__ = GeneratorFunctionPrototype;
  genFun.prototype = Object.create(Gp);
  return genFun;
};
復(fù)制代碼

這里邊GeneratorFunctionPrototype和Gp我們都不認(rèn)識(shí)，他們被定義在runtime里，不過沒關(guān)系，我們只要知道mark()方法為生成器函數(shù)（foo）綁定了一系列原型就可以了，這里就簡(jiǎn)單地過了

regeneratorRuntime.wrap()

從上面babel轉(zhuǎn)化的代碼我們能看到，執(zhí)行foo()，其實(shí)就是執(zhí)行wrap()，那么這個(gè)方法起到什么作用呢，他想包裝一個(gè)什么東西呢，我們先來看看wrap方法的定義：

//runtime.js里的定義稍有不同，多了一些判斷，以下是編譯后的代碼
function wrap(innerFn, outerFn, self) {
  var generator = Object.create(outerFn.prototype);
  var context = new Context([]);
  generator._invoke = makeInvokeMethod(innerFn, self, context);
 
  return generator;
}

wrap方法先是創(chuàng)建了一個(gè)generator，并繼承outerFn.prototype；然后new了一個(gè)context對(duì)象；makeInvokeMethod方法接收innerFn(對(duì)應(yīng)foo$)、context和this，并把返回值掛到generator._invoke上；最后return了generator。「其實(shí)wrap()相當(dāng)于是給generator增加了一個(gè)_invoke方法」

這段代碼肯定讓人產(chǎn)生很多疑問，outerFn.prototype是什么，Context又是什么，makeInvokeMethod又做了哪些操作。下面我們就來一一解答：

?

outerFn.prototype其實(shí)就是genFun.prototype，

?

這個(gè)我們結(jié)合一下上面的代碼就能知道

?

context可以直接理解為這樣一個(gè)全局對(duì)象，用于儲(chǔ)存各種狀態(tài)和上下文：

?

var ContinueSentinel = {};
 
var context = {
  done: false,
  method: "next",
  next: 0,
  prev: 0,
  abrupt: function(type, arg) {
    var record = {};
    record.type = type;
    record.arg = arg;
 
    returnthis.complete(record);
  },
  complete: function(record, afterLoc) {
    if (record.type === "return") {
      this.rval = this.arg = record.arg;
      this.method = "return";
      this.next = "end";
    }
 
    return ContinueSentinel;
  },
  stop: function() {
    this.done = true;
    returnthis.rval;
  }
};

?

makeInvokeMethod的定義如下，它return了一個(gè)invoke方法，invoke用于判斷當(dāng)前狀態(tài)和執(zhí)行下一步，其實(shí)就是我們調(diào)用的next()

?

//以下是編譯后的代碼
function makeInvokeMethod(innerFn, context) {
  // 將狀態(tài)置為start
  var state = "start";
 
  returnfunction invoke(method, arg) {
    // 已完成
    if (state === "completed") {
      return { value: undefined, done: true };
    }
    
    context.method = method;
    context.arg = arg;
 
    // 執(zhí)行中
    while (true) {
      state = "executing";
 
      var record = {
        type: "normal",
        arg: innerFn.call(self, context)    // 執(zhí)行下一步,并獲取狀態(tài)(其實(shí)就是switch里邊return的值)
      };
 
      if (record.type === "normal") {
        // 判斷是否已經(jīng)執(zhí)行完成
        state = context.done ? "completed" : "yield";
 
        // ContinueSentinel其實(shí)是一個(gè)空對(duì)象,record.arg === {}則跳過return進(jìn)入下一個(gè)循環(huán)
        // 什么時(shí)候record.arg會(huì)為空對(duì)象呢, 答案是沒有后續(xù)yield語句或已經(jīng)return的時(shí)候,也就是switch返回了空值的情況(跟著上面的switch走一下就知道了)
        if (record.arg === ContinueSentinel) {
          continue;
        }
        // next()的返回值
        return {
          value: record.arg,
          done: context.done
        };
      }
    }
  };
}

?

為什么generator._invoke實(shí)際上就是gen.next呢，因?yàn)樵趓untime對(duì)于next()的定義中，next()其實(shí)就return了_invoke方法

?

// Helper for defining the .next, .throw, and .return methods of the
// Iterator interface in terms of a single ._invoke method.
function defineIteratorMethods(prototype) {
    ["next", "throw", "return"].forEach(function(method) {
      prototype[method] = function(arg) {
        returnthis._invoke(method, arg);
      };
    });
}
 
defineIteratorMethods(Gp);

低配實(shí)現(xiàn) & 調(diào)用流程分析

這么一遍源碼下來，估計(jì)很多讀者還是懵逼的，畢竟源碼中糾集了很多概念和封裝，一時(shí)半會(huì)不好完全理解，讓我們跳出源碼，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Generator，然后再回過頭看源碼，會(huì)得到更清晰的認(rèn)識(shí)

// 生成器函數(shù)根據(jù)yield語句將代碼分割為switch-case塊，后續(xù)通過切換_context.prev和_context.next來分別執(zhí)行各個(gè)case
function gen$(_context) {
  while (1) {
    switch (_context.prev = _context.next) {
      case0:
        _context.next = 2;
        return'result1';
 
      case2:
        _context.next = 4;
        return'result2';
 
      case4:
        _context.next = 6;
        return'result3';
 
      case6:
      case"end":
        return _context.stop();
    }
  }
}
 
// 低配版context
var context = {
  next:0,
  prev: 0,
  done: false,
  stop: function stop () {
    this.done = true
  }
}
 
// 低配版invoke
let gen = function() {
  return {
    next: function() {
      value = context.done ? undefined: gen$(context)
      done = context.done
      return {
        value,
        done
      }
    }
  }
}
 
// 測(cè)試使用
var g = gen()
g.next()  // {value: "result1", done: false}
g.next()  // {value: "result2", done: false}
g.next()  // {value: "result3", done: false}
g.next()  // {value: undefined, done: true}

這段代碼并不難理解，我們分析一下調(diào)用流程：

我們定義的function*生成器函數(shù)被轉(zhuǎn)化為以上代碼
轉(zhuǎn)化后的代碼分為三大塊：
- gen$(_context)由yield分割生成器函數(shù)代碼而來
- context對(duì)象用于儲(chǔ)存函數(shù)執(zhí)行上下文
- invoke()方法定義next()，用于執(zhí)行g(shù)en$(_context)來跳到下一步
當(dāng)我們調(diào)用g.next()，就相當(dāng)于調(diào)用invoke()方法，執(zhí)行gen$(_context)，進(jìn)入switch語句，switch根據(jù)context的標(biāo)識(shí)，執(zhí)行對(duì)應(yīng)的case塊，return對(duì)應(yīng)結(jié)果
當(dāng)生成器函數(shù)運(yùn)行到末尾（沒有下一個(gè)yield或已經(jīng)return），switch匹配不到對(duì)應(yīng)代碼塊，就會(huì)return空值，這時(shí)g.next()返回{value: undefined, done: true}

從中我們可以看出，「Generator實(shí)現(xiàn)的核心在于上下文的保存，函數(shù)并沒有真的被掛起，每一次yield，其實(shí)都執(zhí)行了一遍傳入的生成器函數(shù)，只是在這個(gè)過程中間用了一個(gè)context對(duì)象儲(chǔ)存上下文，使得每次執(zhí)行生成器函數(shù)的時(shí)候，都可以從上一個(gè)執(zhí)行結(jié)果開始執(zhí)行，看起來就像函數(shù)被掛起了一樣」

到此這篇關(guān)于Promise+async+Generator的實(shí)現(xiàn)原理的文章就介紹到這了,更多相關(guān)Promise async Generator內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: