async/await 并行請求和錯誤處理

seanlook 發布于2019-08-22 18:30 / 1791人閱讀

摘要：順序并發請求使用的時候，代碼執行的順序很容易出錯，比如我們要同時發起兩個請求，可能會寫出下面的代碼在上面的代碼中，我們認為，會并行執行，實際上并不會。會等待執行完之后才開始請求。

async 順序 并發請求

使用async的時候，代碼執行的順序很容易出錯，比如我們要同時發起兩個請求，可能會寫出下面的代碼

function fetchName () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("lujs")
    }, 3000)
  })
}

function fetchAvatar () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("https://avatars3.githubusercontent.com/u/16317354?s=88&v=4")
    }, 4000)
  })
}

async fetchUser () {
  const name = await fetchName()
  const avatar = await fetchAvatar()
  return {
    name,
    avatar
  }
}

(async function () {
  console.time("should be 7s ")
  const user = await fetchUser()
  console.log(user)
  console.timeEnd("should be 3s ")
})()

在上面的代碼中，我們認為fetchName，fetchAvatar會并行執行，實際上并不會。fetchAvatar會等待fetchName執行完之后才開始請求。fetchUser函數的執行時間不是三秒而是7秒

要并行請求的話需要像下面這樣寫，fetchUserParallel的執行時間為4秒

async function fetchUserParallel () {
  const namePromise = fetchName()
  const avatarPromise = fetchAvatar()
  return {
    name: await namePromise,
    avatar: await avatarPromise 
  }
}
(async function () {
  console.time("should be 3s, but time is ")
  const user = await fetchUser()
  console.log(user)
  console.timeEnd("should be 3s, but time is ")

  console.time("should be 3s : ")
  const user2 = await fetchUserParallel()
  console.log(user2)
  console.timeEnd("should be 3s : ")
})()

使用Promise.all來并發請求

function fetchList (id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`id is : ${id}`)
    }, 5000)
  })
}

async function getList () {
  const ary = [1, 2, 3, 4]
  const list =  Promise.all(
    ary.map(
      (id) => fetchList(id)))
  return await list
}
(async function () {
  // 使用promise并發請求
  console.time("should be 3s ")
  const list = await getList()
  console.log(list)
  console.timeEnd("should be 3s ")
})()

錯誤獲取 使用try...catch

  try {
    const user3 = await fetchUser(true)
  } catch (err) {
    console.error("user3 error:", err)
  }

包裝promise，使其返回統一的格式的代碼

參考文章

  /**
   * 包裝promise, 使其返回統一的錯誤格式
   * @param {Promise} promise 
   */
  function to (promise) {
    return promise.then(res => [null, res]).catch(err => [err])
  }
  .
  .
  .
  const [err, res] = await to(fetchUser(true))
  if (err) {
    console.error("touser err:", err)
  }

繼續使用catch

  // 因為async 返回的promise對象，所以可以使用catch
  const user4 = await fetchUser(true).catch(err => {
    console.error("user4 error:", err)
  })

有興趣的可以用弄得運行一下代碼，
在線例子
測試代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/95934.html

以圖表和示例的角度解讀async/await

摘要：在中，表示抽象的非阻塞異步執行。在完成之后安排代碼的唯一方式是通過方法綁定回調函數。下圖描述了該示例的計算過程方法中綁定的回調函數只有當成功的時候才會調用。為了處理失敗的，需要通過綁定另一個回調函數。介紹 ES7中，async/await 語法使異步promise的協調變得很簡單。如果你需要以特定順序異步獲取來自多個數據庫或API的數據，可以使用雜亂的promise或回調函數。asy...

sutaking 2019-08-21 17:32 評論0 收藏0
異步Promise及Async/Await可能最完整入門攻略

摘要：的和我們通過的原型方法拿到我們的返回值輸出我延遲了毫秒后輸出的輸出下列的值我延遲了毫秒后輸出的。有人說，我不想耦合性這么高，想先執行函數再執行，但不想用上面那種寫法，可以嗎，答案是當然可以。此文只介紹Async/Await與Promise基礎知識與實際用到注意的問題，將通過很多代碼實例進行說明，兩個實例代碼是setDelay和setDelaySecond。 tips:本文系原創轉自...

lingdududu 2019-08-23 12:31 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

Blackjun 2019-08-29 16:56 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

Neilyo 2019-08-02 11:43 評論0 收藏0
異步解決方案----Promise與Await

摘要：前言異步編程模式在前端開發過程中，顯得越來越重要。隨著新標準的到來，處理異步數據流又有了新的方案。接下來我們介紹這兩種處理異步編程的方案。仍在繼續執行，但執行結果將被丟棄。使得異步代碼看起來像同步代碼，再也沒有回調函數。前言異步編程模式在前端開發過程中，顯得越來越重要。從最開始的XHR到封裝后的Ajax都在試圖解決異步編程過程中的問題。隨著ES6新標準的到來，處理異步數據流又有了新...

entner 2019-08-23 12:20 評論0 收藏0