跳到主要內容

掌握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 { }, Promise { }, Promise { }, Promise { } ]
  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+的版本不妨嘗試一下，或許會有新的收穫。
如有錯誤麻煩留言告訴我進行改正，謝謝閱讀

留言

張貼留言

這個網誌中的熱門文章

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智能眼罩 觸...
張貼留言
閱讀完整內容
opencv4nodejs Asynchronous OpenCV 3.x Binding for node.js   122     2715     414   0   0 Author Contributors Repository https://github.com/justadudewhohacks/opencv4nodejs Wiki Page https://github.com/justadudewhohacks/opencv4nodejs/wiki Last Commit Mar. 8, 2019 Created Aug. 20, 2017 opencv4nodejs           By its nature, JavaScript lacks the performance to implement Computer Vision tasks efficiently. Therefore this package brings the performance of the native OpenCV library to your Node.js application. This project targets OpenCV 3 and provides an asynchronous as well as an synchronous API. The ultimate goal of this project is to provide a comprehensive collection of Node.js bindings to the API of OpenCV and the OpenCV-contrib modules. An overview of available bindings can be found in the  API Documentation . Furthermore, contribution is highly appreciated....
張貼留言
閱讀完整內容

完形心理學！？讓我們了解“介面設計師”為什麼這樣設計

完形心理學！？讓我們了解“介面設計師”為什麼這樣設計 — 說服客戶與老闆、跟工程師溝通、強化設計概念的有感心理學 — 情況 1 : 為何要留那麼多空白? 害我還要滾動滑鼠(掀桌) 情況 2 : 為什麼不能直接用一頁展現? 把客戶的需求塞滿不就完工啦! (無言) 情況 3: 這種設計好像不錯，但是為什麼要這樣做? (直覺大神告訴我這樣設計，但我說不出來為什麼..) 雖然世界上有許多 GUI 已經走得又長又遠又厲害，但別以為這種古代人對話不會出現，一直以來我們只是習慣這些 GUI 被如此呈現，但為何要這樣設計我們卻不一定知道。 由於 完形心理學 歸納出人類大腦認知之普遍性的規則，因此無論是不是 UI/UX 設計師都很適合閱讀本篇文章。但還是想特別強調，若任職於傳統科技公司，需要對上說服老闆，需要平行說服（資深）工程師，那請把它收進最愛；而習慣套用設計好的 UI 套件，但不知道為何這樣設計的 IT 工程師，也可以透過本文來強化自己的產品說服力。 那就開始吧~（擊掌） 完形心理學，又稱作格式塔（Gestalt）心理學，於二十世紀初由德國心理學家提出 — 用以說明人類大腦如何解釋肉眼所觀察到的事物，並轉化為我們所認知的物件。它可說是現代認知心理學的基礎，其貫徹的概念就是「整體大於個體的總合 “The whole is other than the sum of the parts.” —  Kurt Koffka」。 若深究完整的理論將會使本文變得非常的艱澀，因此筆者直接抽取個人認為與 UI 設計較為相關的 7 個原則（如下），並搭配實際案例做說明。有興趣了解全部理論的話可以另外 Google。 1. 相似性 (Similarity)  — 我們的大腦會把相似的事物看成一體 如果數個元素具有類似的尺寸、體積、顏色，使用者會自動為它們建立起關聯。這是因為我們的眼睛和大腦較容易將相似的事物組織在一起。如下圖所示，當一連串方塊和一連串的圓形並排時，我們會看成（a）一列方塊和兩列圓形（b）一排圓形和兩排三角形。 對應用到介面設計上，FB 每則文章下方的按鈕圖標（按讚 Like / 留言Comment / 分享 Share）雖然功能各不相同，但由於它們在視覺上顏色、大小、排列上的相似性，用戶會將它們視認為...
張貼留言
閱讀完整內容