怎樣更好的編寫async函數

2024年2月3日 105次阅读 来源: 賈順名

2018年已到了5月份，
node的
4.x版本也已住手了保護

我司的某個效勞也已切到了
8.x，現在正在做
koa2.x的遷徙

將之前的
generator悉數替代為
async

然則，在替代的歷程當中，發明一些濫用
async致使的時刻上的糟蹋

所以來談一下，怎樣優化
async代碼，更充足的應用異步事宜流
根絕濫用async

起首，你須要相識Promise

Promise是運用async/await的基本，所以你肯定要先相識Promise是做什麼的
Promise是協助處置懲罰回調地獄的一個好東西，能夠讓異步流程變得更清楚。
一個簡樸的Error-first-callback轉換為Promise的例子：

const fs = require('fs')

function readFile (fileName) {
  return new Promise((resolve, reject) => {
    fs.readFile(fileName, (err, data) => {
      if (err) reject(err)

      resolve(data)
    })
  })
}

readFile('test.log').then(data => {
  console.log('get data')
}, err => {
  console.error(err)
})

我們挪用函數返回一個Promise的實例，在實例化的歷程當中舉行文件的讀取，當文件讀取的回調觸髮式，舉行Promise狀況的變動，resolved或許rejected
狀況的變動我們運用then來監聽，第一個回調為resolve的處置懲罰，第二個回調為reject的處置懲罰。

async與Promise的關聯

async函數相當於一個簡寫的返回Promise實例的函數，效果以下：

function getNumber () {
  return new Promise((resolve, reject) => {
    resolve(1)
  })
}
// =>
async function getNumber () {
  return 1
}

二者在運用上體式格局上完整一樣，都能夠在挪用getNumber函數后運用then舉行監聽返回值。
以及與async對應的await語法的運用體式格局：

getNumber().then(data => {
  // got data
})
// =>
let data = await getNumber()

await的實行會獵取表達式後邊的Promise實行效果，相當於我們挪用then獵取回調效果一樣。
P.S. 在async/await支撐度還不是很高的時刻，人人都邑挑選運用generator/yield結合著一些相似於co的庫來完成相似的效果

async函數代碼實行是同步的，效果返回是異步的

async函數總是會返回一個Promise的實例 這點兒很主要
所以說挪用一個async函數時，能夠理解為裡邊的代碼都是處於new Promise中，所以是同步實行的
而末了return的操縱，則相當於在Promise中挪用resolve：

async function getNumber () {
  console.log('call getNumber()')

  return 1
}

getNumber().then(_ => console.log('resolved'))
console.log('done')

// 輸出遞次：
// call getNumber()
// done
// resolved

Promise內部的Promise會被消化

也就是說，假如我們有以下的代碼：

function getNumber () {
  return new Promise(resolve => {
    resolve(Promise.resolve(1))
  })
}

getNumber().then(data => console.log(data)) // 1

假如根據上邊說的話，我們在then裡邊獵取到的data應當是傳入resolve中的值 ，也就是另一個Promise的實例。
但實際上，我們會直接取得返回值：1，也就是說，假如在Promise中返回一個Promise，實際上順序會幫我們實行這個Promise，並在內部的Promise狀況轉變時觸發then之類的回調。
一個有意思的事變：

function getNumber () {
  return new Promise(resolve => {
    resolve(Promise.reject(new Error('Test')))
  })
}

getNumber().catch(err => console.error(err)) // Error: Test

假如我們在resolve中傳入了一個reject，則我們在外部則能夠直接運用catch監聽到。
這類體式格局常常用於在async函數中拋出非常
怎樣在async函數中拋出非常：

async function getNumber () {
  return Promise.reject(new Error('Test'))
}
try {
  let number = await getNumber()
} catch (e) {
  console.error(e)
}

肯定不要忘了await關鍵字

假如遺忘增加await關鍵字，代碼層面並不會報錯，然則我們接收到的返回值倒是一個Promise

let number = getNumber()
console.log(number) // Promise

所以在運用時肯定要牢記await關鍵字

let number = await getNumber()
console.log(number) // 1

不是一切的處所都須要增加await

在代碼的實行歷程當中，有時刻，並非一切的異步都要增加await的。
比以下邊的對文件的操縱：
我們假定fs一切的API都被我們轉換為了Promise版本

async function writeFile () {
  let fd = await fs.open('test.log')
  fs.write(fd, 'hello')
  fs.write(fd, 'world')
  return fs.close(fd)
}

就像上邊說的，Promise內部的Promise會被消化，所以我們在末了的close也沒有運用await
我們經由歷程await翻開一個文件，然後舉行兩次文件的寫入。
然則注重了，在兩次文件的寫入操縱前邊，我們並沒有增加await關鍵字。
由於這是過剩的，我們只須要關照API，我要往這個文件裡邊寫入一行文本，遞次天然會由fs來掌握 。
末了再舉行close，由於假如我們上邊在實行寫入的歷程還沒有完成時，close的回調是不會觸發的，
也就是說，回調的觸發就意味着上邊兩步的write已實行完成了。

兼并多個不相干的async函數挪用

假如我們現在要獵取一個用戶的頭像和用戶的詳細信息（而這是兩個接口 雖然說平常情況下不太會湧現）

async function getUser () {
  let avatar = await getAvatar()
  let userInfo = await getUserInfo()

  return {
    avatar,
    userInfo
  }
}

如許的代碼就造成了一個題目，我們獵取用戶信息的接口並不依靠於頭像接口的返回值。
然則如許的代碼卻會在獵取到頭像今後才會去發送獵取用戶信息的要求。
所以我們對這類代碼能夠如許處置懲罰：

async function getUser () {
  let [avatar, userInfo] = await Promise.all([getAvatar(), getUserInfo()])

  return {
    avatar,
    userInfo
  }
}

如許的修正就會讓getAvatar與getUserInfo內部的代碼同時實行，同時發送兩個要求，在外層經由歷程包一層Promise.all來確保二者都返回效果。

讓互相沒有依靠關聯的異步函數同時實行

一些輪迴中的注重事項

forEach

當我們挪用如許的代碼時：

async function getUsersInfo () {
  [1, 2, 3].forEach(async uid => {
    console.log(await getUserInfo(uid))
  })
}

function getuserInfo (uid) {
  return new Promise(resolve => {
    setTimeout(_ => resolve(uid), 1000)
  })
}

await getUsersInfo()

如許的實行彷佛並沒有什麼題目，我們也會獲得1、2、3三條log的輸出，
然則當我們在await getUsersInfo()下邊再增加一條console.log('done')的話，就會發明：
我們會先獲得done，然後才是三條uid的log，也就是說，getUsersInfo返回效果時，實在內部Promise並沒有實行完。
這是由於forEach並不會體貼回調函數的返回值是什麼，它只是運轉回調。

不要在一般的for、while輪迴中運用await

運用一般的for、while輪迴會致使順序變成串行：

for (let uid of [1, 2, 3]) {
  let result = await getUserInfo(uid)
}

如許的代碼運轉，會在拿到uid: 1的數據后才會去要求uid: 2的數據

關於這兩種題目的處置懲罰方案：

現在最優的就是將其替代為map結合著Promise.all來完成：

await Promise.all([1, 2, 3].map(async uid => await getUserInfo(uid)))

如許的代碼完成會同時實例化三個Promise，並要求getUserInfo

P.S. 草案中有一個await*，能夠省去Promise.all

await* [1, 2, 3].map(async uid => await getUserInfo(uid))

P.S. 為安在運用Generator+co時沒有這個題目

在運用koa1.x的時刻，我們直接寫yield [].map是不會湧現上述所說的串行題目的
看過co源碼的小夥伴應當都邃曉，裡邊有這麼兩個函數（刪除了其他不相關的代碼）：

function toPromise(obj) {
  if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
  return obj;
}

function arrayToPromise(obj) {
  return Promise.all(obj.map(toPromise, this));
}

co是協助我們增加了Promise.all的處置懲罰的（敬拜TJ大佬）。

總結

總結一下關於async函數編寫的幾個小提示：

  1. 運用return Promise.reject()在async函數中拋出非常
  2. 讓互相之間沒有依靠關聯的異步函數同時實行
  3. 不要在輪迴的回調中/for、while輪迴中運用await，用map來替代它

參考資料

  1. async-function-tips

本人GitHub：
jiasm
迎接小夥伴們follow、交換

    原文作者：賈順名
    原文地址: https://segmentfault.com/a/1190000014836153
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞