掌握Node.js中的Async和Await

在本文中，你將學習如何使用Node.js中的async函數(async/await)來簡化callback或Promise.

異步語言結構在其餘語言中已經存在了，像c#的async/await、Kotlin的coroutines、go的goroutines，隨着Node.js 8的發佈，期待已久的async函數也在其中默認實現了。

Node中的async函數是什麼？

當函數聲明爲一個Async函數它會返回一個AsyncFunction對象，它們相似於Generator由於執能夠被暫停。惟一的區別是它們返回的是Promise而不是{ value: any, done: Boolean }對象。不過它們仍是很是類似，你可使用co包來獲取一樣的功能。

在async函數中，能夠等待Promise完成或捕獲它拒絕的緣由。

若是你要在Promise中實現一些本身的邏輯的話

function handler (req, res) {
  return request('https://user-handler-service')
    .catch((err) => {
      logger.error('Http error', err)
      error.logged = true
      throw err
    })
    .then((response) => Mongo.findOne({ user: response.body.user }))
    .catch((err) => {
      !error.logged && logger.error('Mongo error', err)
      error.logged = true
      throw err
    })
    .then((document) => executeLogic(req, res, document))
    .catch((err) => {
      !error.logged && console.error(err)
      res.status(500).send()
    })
}
複製代碼

可使用async/await讓這個代碼看起來像同步執行的代碼

async function handler (req, res) {
  let response
  try {
    response = await request('https://user-handler-service')  
  } catch (err) {
    logger.error('Http error', err)
    return res.status(500).send()
  }

  let document
  try {
    document = await Mongo.findOne({ user: response.body.user })
  } catch (err) {
    logger.error('Mongo error', err)
    return res.status(500).send()
  }

  executeLogic(document, req, res)
}
複製代碼

在老的v8版本中，若是有有個promise的拒絕沒有被處理你會獲得一個警告，能夠不用建立一個拒絕錯誤監聽函數。然而，建議在這種狀況下退出你的應用程序。由於當你不處理錯誤時，應用程序處於一個未知的狀態。

process.on('unhandledRejection', (err) => { 
  console.error(err)
  process.exit(1)
})
複製代碼

async函數模式

在處理異步操做時，有不少例子讓他們就像處理同步代碼同樣。若是使用Promise或callbacks來解決問題時須要使用很複雜的模式或者外部庫。

當須要再循環中使用異步獲取數據或使用if-else條件時就是一種很複雜的狀況。

指數回退機制

使用Promise實現回退邏輯至關笨拙

function requestWithRetry (url, retryCount) {
  if (retryCount) {
    return new Promise((resolve, reject) => {
      const timeout = Math.pow(2, retryCount)
 
      setTimeout(() => {
        console.log('Waiting', timeout, 'ms')
        _requestWithRetry(url, retryCount)
          .then(resolve)
          .catch(reject)
      }, timeout)
    })
  } else {
    return _requestWithRetry(url, 0)
  }
}

function _requestWithRetry (url, retryCount) {
  return request(url, retryCount)
    .catch((err) => {
      if (err.statusCode && err.statusCode >= 500) {
        console.log('Retrying', err.message, retryCount)
        return requestWithRetry(url, ++retryCount)
      }
      throw err
    })
}

requestWithRetry('http://localhost:3000')
  .then((res) => {
    console.log(res)
  })
  .catch(err => {
    console.error(err)
  })
複製代碼

代碼看的讓人很頭疼，你也不會想看這樣的代碼。咱們可使用async/await從新這個例子，使其更簡單

function wait (timeout) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve()
    }, timeout)
  })
}

async function requestWithRetry (url) {
  const MAX_RETRIES = 10
  for (let i = 0; i <= MAX_RETRIES; i++) {
    try {
      return await request(url)
    } catch (err) {
      const timeout = Math.pow(2, i)
      console.log('Waiting', timeout, 'ms')
      await wait(timeout)
      console.log('Retrying', err.message, i)
    }
  }
}
複製代碼

上面代碼看起來很舒服對不對

中間值

不像前面的例子那麼嚇人，若是你有3個異步函數依次相互依賴的狀況，那麼你必須從幾個難看的解決方案中進行選擇。

functionA返回一個Promise，那麼functionB須要這個值而functioinC須要functionA和functionB完成後的值。

方案1：then 聖誕樹

function executeAsyncTask () {
  return functionA()
    .then((valueA) => {
      return functionB(valueA)
        .then((valueB) => {          
          return functionC(valueA, valueB)
        })
    })
}
複製代碼

用這個解決方案，咱們在第三個then中能夠得到valueA和valueB，而後能夠向前面兩個then同樣得到valueA和valueB的值。這裏不能將聖誕樹(毀掉地獄)拉平，若是這樣作的話會丟失閉包，valueA在functioinC中將不可用。

方案2：移動到上一級做用域

function executeAsyncTask () {
  let valueA
  return functionA()
    .then((v) => {
      valueA = v
      return functionB(valueA)
    })
    .then((valueB) => {
      return functionC(valueA, valueB)
    })
}
複製代碼

在這顆聖誕樹中，咱們使用更高的做用域保變量valueA，由於valueA做用域在全部的then做用域外面，因此functionC能夠拿到第一個functionA完成的值。

這是一個頗有效扁平化.then鏈"正確"的語法，然而，這種方法咱們須要使用兩個變量valueA和v來保存相同的值。

方案3：使用一個多餘的數組

function executeAsyncTask () {
  return functionA()
    .then(valueA => {
      return Promise.all([valueA, functionB(valueA)])
    })
    .then(([valueA, valueB]) => {
      return functionC(valueA, valueB)
    })
}
複製代碼

在函數functionA的then中使用一個數組將valueA和Promise一塊兒返回，這樣能有效的扁平化聖誕樹(回調地獄)。

方案4：寫一個幫助函數

const converge = (...promises) => (...args) => {
  let [head, ...tail] = promises
  if (tail.length) {
    return head(...args)
      .then((value) => converge(...tail)(...args.concat([value])))
  } else {
    return head(...args)
  }
}

functionA(2)
  .then((valueA) => converge(functionB, functionC)(valueA))
複製代碼

這樣是可行的，寫一個幫助函數來屏蔽上下文變量聲明。可是這樣的代碼很是不利於閱讀，對於不熟悉這些魔法的人就更難了。

使用async/await咱們的問題神奇般的消失

async function executeAsyncTask () {
  const valueA = await functionA()
  const valueB = await functionB(valueA)
  return function3(valueA, valueB)
}
複製代碼

使用async/await處理多個平行請求

和上面一個差很少，若是你想一次執行多個異步任務，而後在不一樣的地方使用它們的值可使用async/await輕鬆搞定。

async function executeParallelAsyncTasks () {
  const [ valueA, valueB, valueC ] = await Promise.all([ functionA(), functionB(), functionC() ])
  doSomethingWith(valueA)
  doSomethingElseWith(valueB)
  doAnotherThingWith(valueC)
}
複製代碼

數組迭代方法

你能夠在map、filter、reduce方法中使用async函數，雖然它們看起來不是很直觀，可是你能夠在控制檯中實驗如下代碼。

1.map

function asyncThing (value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 100)
  })
}

async function main () {
  return [1,2,3,4].map(async (value) => {
    const v = await asyncThing(value)
    return v * 2
  })
}

main()
  .then(v => console.log(v))
  .catch(err => console.error(err))
複製代碼

2.filter

function asyncThing (value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 100)
  })
}

async function main () {
  return [1,2,3,4].filter(async (value) => {
    const v = await asyncThing(value)
    return v % 2 === 0
  })
}

main()
  .then(v => console.log(v))
  .catch(err => console.error(err))
複製代碼

3.reduce

function asyncThing (value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(value), 100)
  })
}

async function main () {
  return [1,2,3,4].reduce(async (acc, value) => {
    return await acc + await asyncThing(value)
  }, Promise.resolve(0))
}

main()
  .then(v => console.log(v))
  .catch(err => console.error(err))
複製代碼

解決方案：

1. [ Promise { <pending> }, Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]

2. [ 1, 2, 3, 4 ]

3. 10

若是是map迭代數據你會看到返回值爲[ 2, 4, 6, 8 ]，惟一的問題是每一個值被AsyncFunction函數包裹在了一個Promise中

因此若是想要得到它們的值，須要將數組傳遞給Promise.All()來解開Promise的包裹。

main()
  .then(v => Promise.all(v))
  .then(v => console.log(v))
  .catch(err => console.error(err))
複製代碼

一開始你會等待Promise解決，而後使用map遍歷每一個值

function main () {
  return Promise.all([1,2,3,4].map((value) => asyncThing(value)))
}

main()
  .then(values => values.map((value) => value * 2))
  .then(v => console.log(v))
  .catch(err => console.error(err))
複製代碼

這樣好像更簡單一些？

若是在你的迭代器中若是你有一個長時間運行的同步邏輯和另外一個長時間運行的異步任務，async/await版本任然常有用

這種方式當你能拿到第一個值，就能夠開始作一些計算，而沒必要等到全部Promise完成才運行你的計算。儘管結果包裹在Promise中，可是若是按順序執行結果會更快。

關於filter的問題

你可能發覺了，即便上面filter函數裏面返回了[ false, true, false, true ]，await asyncThing(value)會返回一個promise那麼你確定會獲得一個原始的值。你能夠在return以前等待全部異步完成，在進行過濾。

Reducing很簡單，有一點須要注意的就是須要將初始值包裹在Promise.resolve中

重寫基於callback的node應用成

Async函數默認返回一個Promise，因此你可使用Promises來重寫任何基於callback的函數，而後await等待他們執行完畢。在node中也可使用util.promisify函數將基於回調的函數轉換爲基於Promise的函數

重寫基於Promise的應用程序

要轉換很簡單，.then將Promise執行流串了起來。如今你能夠直接使用`async/await。

function asyncTask () {
  return functionA()
    .then((valueA) => functionB(valueA))
    .then((valueB) => functionC(valueB))
    .then((valueC) => functionD(valueC))
    .catch((err) => logger.error(err))
}
 
複製代碼

轉換後

async function asyncTask () {
  try {
    const valueA = await functionA()
    const valueB = await functionB(valueA)
    const valueC = await functionC(valueB)
    return await functionD(valueC)
  } catch (err) {
    logger.error(err)
  }
}
Rewriting Nod
複製代碼

使用Async/Await將很大程度上的使應用程序具備高可讀性，下降應用程序的處理複雜度(如：錯誤捕獲)，若是你也使用 node v8+的版本不妨嘗試一下，或許會有新的收穫。

若有錯誤麻煩留言告訴我進行改正，謝謝閱讀

原文連接