首頁 > web前端 > js教程 > 在Node.js中使用Async和Await函數

在Node.js中使用Async和Await函數

亚连
發布: 2018-06-05 14:49:35
原創
2663 人瀏覽過

這篇文章主要介紹了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(&#39;Waiting&#39;, timeout, &#39;ms&#39;)
  await wait(timeout)
  console.log(&#39;Retrying&#39;, 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 { <pending> }, Promise { <pending> }, Promise { <pending> }, Promise { <pending> } ]
[ 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+的版本不妨尝试一下,或许会有新的收获。

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

如何获取Vue中的this.$router.push参数

在angularJs-$http中如何实现百度搜索时的动态下拉框

在angularjs数组中如何判断是否含有某个元素

以上是在Node.js中使用Async和Await函數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板