一文詳解如何有效的處理Promise并發(fā)

更新時間：2023年04月19日 10:17:57 作者：liangyue

這篇文章主要為大家介紹如何有效的處理Promise并發(fā)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

如上圖所示的代碼，相信大家在平時的開發(fā)中肯定用到不少，我們可以進行優(yōu)化，使得只用短短一半的時間就可以完成。在上面的函數(shù)中，我們等待用戶信息請求完成后再請求詳情信息。但這兩個函數(shù)之間并沒有任何關(guān)聯(lián)，所以我們可以同時觸發(fā)兩個請求，并同時等待完成。那么，我們有多少種方式來實現(xiàn)呢？你真的可以處理好Promise的并發(fā)么？接下來，我們進入正題。

Promise.all

如何實現(xiàn)

Promise.all 大家應該是比較熟悉的，Promise.all方法接收一個promise的iterable類型，如果所有傳入的promise都變成完成狀態(tài)，Promise.all返回的Promise異步的變?yōu)橥瓿伞Ｈ绻麄魅氲?code>promise中有一個失敗(rejected),Promise.all將失敗的結(jié)果給失敗狀態(tài)的回調(diào)函數(shù)，而不管其他promise是否完成。我們可以如下實現(xiàn)剛才的代碼

async function init() {
  const [user, info] = await Promise.all([
    getUser(),
    getInfo()
  ])
  console.log('init', user, info)
}

現(xiàn)在這種方式，如果我們之前每個請求都需要1秒，一共需要2秒，那么現(xiàn)在兩個同時執(zhí)行只需要1秒就完成了！但是這樣也有一個問題：我們并沒有考慮報錯問題。你可能會認為，這個很簡單，把代碼放在一個try...cahtch中不就可以了，就像這樣：

async function init() {
  try {
    const [user, info] = await Promise.all([
      getUser(),
      getInfo()
    ])
    console.log('init ==== ', user, info)
  } catch(err) {
    console.log('err', err);
  }
}

但是，這樣的話會有一個問題，就像這樣：

function getUser() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('user reject')
    }, 500);
  })
}
function getInfo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('info reject')
    }, 1000);
  })
}
// 輸出 err user reject

由于getUser優(yōu)先完成并出現(xiàn)錯誤，此時觸發(fā)了catch，而當getInfo再次完成并出現(xiàn)錯誤時，將不會觸發(fā)catch。因為catch代碼已經(jīng)運行，函數(shù)已經(jīng)完成。那么，要怎么做呢？接下來，我們就講講應該如何處理報錯問題。

如何處理報錯

解決方式是，給Promise.all中的每個函數(shù)加上catch，如下：

function handle(err) {
  console.log('err', err)
}
function onReject(err) {
  handle(err);
  return new Error(err);
}
async function init() {
  const [user, info] = await Promise.all([
    getUser().catch(onReject),
    getInfo().catch(onReject)
  ])
  console.log('init', user instanceof Error, info instanceof Error) // init true true
}

這樣，我們在onReject函數(shù)中處理錯誤，并返回這個錯誤。所以現(xiàn)在我們生成的user和info要么是Error要么是我們期望的效果，而Error我們可以用instanceof檢查它。

Promise.allSettled

解決并發(fā)我們還可以使用 Promise.allSettled ，我們會得到一個包含每個Promise結(jié)果的值或錯誤信息。

如何實現(xiàn)

接下來，我們來使用一下，代碼如下：

async function init() {
  const [userStatus, infoStatus] = await Promise.allSettled([
    getUser(),
    getInfo()
  ])
  console.log('info', userStatus, infoStatus)
}

現(xiàn)在，我們可以得到這樣的數(shù)據(jù)：

結(jié)果對象有3個屬性：

status: fulfilled 或 rejected
value: 僅在status為fulfilled時出現(xiàn)，為Promise為resolve返回的值
reason: 僅在status為rejected時出現(xiàn)，為Promise被reject時返回的值

因此，我們可以讀取到每個Promise的狀態(tài)，并單獨處理每個錯誤而不會遺漏任何的信息。

最后兩個技巧

Promise.race

Promise.race方法可接受一個可迭代的promise返回一個promise，一旦迭代器中某個promise解決或拒絕，返回的promise就會resolve或reject。

我們可以這樣實現(xiàn)一個簡單的超時功能，代碼如下：

function getUser() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('user resolve')
    }, 5100);
  })
}
async function init() {
  // Race to see which Promise completes first
  const racePromise = Promise.race([
    getUser(),
    new Promise((resolve, reject) =>
      // Time out after 5 seconds
      setTimeout(() => reject(new Error('Timeout')), 5000)
    )
  ])
  try {
    const result = await racePromise
    console.log('result', result)
  } catch (err) {
    console.log('err', err)
    // Timed out!
  }
}

注意，通常情況下，如果有超時，那么你需要盡量的取消未完成的待處理任務。

另外，最好還是處理所有promise的reject：

const racePromise = Promise.race([
    getUser().catch(onReject),
    // xxx
  ])

Promise.any

Promise.any 等待任何一個promise成功則為成功，只有全部的promise都被reject，才會返回reject。通常我們可以使用Promise.any來實現(xiàn)，當一個promise先完成后，取消其他的promise，不過要注意的是，我們并不總是同時要處理多個數(shù)據(jù)，只是因為我們可以做到，所以要謹慎的使用它。

通常，我們不想出現(xiàn)未被處理的reject，所以，我們應該這樣寫：

const anyPromise = Promise.any([
    getUser().catch(onReject),
    getInfo().catch(onReject)
])

總結(jié)

前面我們已經(jīng)介紹了在使用promise處理并發(fā)問題時，應該如何的處理promise的reject。但是也需要注意：過度的并發(fā)會導致網(wǎng)絡抖動、磁盤抖動或其他問題，雖然可以，但并不是一定要這樣做，有時使用async await也可以使代碼更容易理解和維護，所以，在使用之前我們更需要考慮是否需要。