機器人的... 一天...

在本文中，你將學習如何使用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))
复制代码

解決方案：

[ Promise { }, Promise { }, Promise { }, Promise { } ]
[ 1, 2, 3, 4 ]
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+的版本不妨嘗試一下，或許會有新的收穫。

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

原文鏈接

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐！作品都在11月24日頒獎典禮進行展示

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐！作品都在11月24日頒獎典禮進行展示 LIS 發表於 2017年11月16日 10:31 收藏此文 2017通訊大賽「聯發科技物聯網開發競賽」決賽於11月4日在台北文創大樓舉行，共有29個隊伍進入決賽，角逐最後的大獎，並於11月24日進行頒獎，現場會有全部進入決賽團隊的展示攤位，總計約為100個，各種創意作品琳琅滿目，非常值得一看，這次錯過就要等一年。「聯發科技物聯網開發競賽」決賽持續一整天，每個團隊都有15分鐘面對評審團做簡報與展示，並接受評審們的詢問。在所有團隊完成簡報與展示後，主辦單位便統計所有評審的分數，並由評審們進行審慎的討論，決定冠亞季軍及其他各獎項得主，結果將於11月24日的「2017通訊大賽頒獎典禮暨成果展」現場公佈並頒獎。在「2017通訊大賽頒獎典禮暨成果展」現場，所有入圍決賽的團隊會設置攤位，總計約為100個，展示他們辛苦研發並實作的作品，無論是想觀摩別人的成品、了解物聯網應用有那些新的創意、尋找投資標的、尋找人才、尋求合作機會或是單純有興趣，都很適合花點時間到現場看看。頒獎典禮暨成果展資訊如下：日期：2017年11月24日(星期五) 地點：中油大樓國光廳(台北市信義區松仁路3號) 我要報名參加「2017通訊大賽頒獎典禮暨成果展」>>> 在參加「2017通訊大賽頒獎典禮暨成果展」之前，可以先在本文觀看各團隊的作品介紹。決賽29強團隊如下：長者安全救星可隨意描繪或書寫之電子筆記系統微觀天下體適能訓練管理裝置肌少症之行走速率檢測系統 Sugar Robot 賽亞人的飛機維修輔助器 iTemp你的溫度個人化管家語音行動冰箱 MR模擬飛行智慧防盜自行車跨平台X-Y視覺馬達控制 Ironmet 菸消雲散無人小艇 (Mini-USV) 救OK-緊急救援小幫手穿戴式長照輔助系統應用於教育之模組機器人教具這味兒很台味 Aquarium Hub 發展遲緩兒童之擴增實境學習系統蚊房四寶車輛相控陣列聲納環境偵測系統戶外團隊運動管理裝置懷舊治療數位桌曆 SeeM智能眼罩觸...

閱讀完整內容

機器人的... 一天...

----------- 未完... 待續... ---------------

搜尋此網誌

掌握Node.js中的Async和Await

Node中的async函數是什麼？

async函數模式

指數回退機制

中間值

方案1：`then`聖誕樹

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

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

方案4：寫一個幫助函數

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

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

數組迭代方法

1.map

2.filter

3.reduce

解決方案：

關於`filter`的問題

重寫基於callback的node應用成

重寫基於Promise的應用程序

留言

張貼留言

這個網誌中的熱門文章

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐！作品都在11月24日頒獎典禮進行展示

機器人的... 一天...

----------- 未完... 待續... ---------------

掌握Node.js中的Async和Await

Node中的async函數是什麼？

async函數模式

指數回退機制

中間值

方案1：then聖誕樹

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

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

方案4：寫一個幫助函數

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

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

數組迭代方法

1.map

2.filter

3.reduce

解決方案：

關於filter的問題

重寫基於callback的node應用成

重寫基於Promise的應用程序

留言

張貼留言

這個網誌中的熱門文章

2017通訊大賽「聯發科技物聯網開發競賽」決賽團隊29強出爐！作品都在11月24日頒獎典禮進行展示

方案1：`then`聖誕樹

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

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

關於`filter`的問題