1. 程式人生 > >深入理解Node.js中的Async和Await函式

深入理解Node.js中的Async和Await函式

這篇文章主要介紹了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
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
 .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()
 }/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
 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)
}/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920

在老的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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
 } 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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920

程式碼看的讓人很頭疼,你也不會想看這樣的程式碼。我們可以使用async/await重新這個例子,使其更簡單

function wait (timeout) {
 return new Promise((resolve) => {
 setTimeout(() => {
  resolve()
 }, timeout)
 })
}
 /歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
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)
  })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
 })
}

用這個解決方案,我們在第三個 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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}

在這顆聖誕樹中,我們使用更高的作用域保變數 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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}

在函式 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)
 }/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}
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)
}/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920

使用 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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}
 
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)
 })/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}
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 { <pending> }, Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
[ 1, 2, 3, 4 ]
10/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920

如果是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))
/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920

如果在你的迭代器中如果你有一個長時間執行的同步邏輯和另一個長時間執行的非同步任務,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)
 }/歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:619586920
}
Rewriting Nod

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

**歡迎加入我們**為了幫助大家讓學習變得輕鬆、高效,給大家免費分享一大批資料,幫助大家在成為全棧工程師,乃至架構師的路上披荊斬棘。在這裡給大家推薦一個前端全棧學習交流圈:864305860 歡迎大家進群交流討論,學習交流,共同進步。