是 Ray 不是 Array

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement
2022-05-15 JavaScript

JavaScript 核心觀念(82) - ES6 章節：Async/Await - 撰寫高可用性高的錯誤捕捉

#JavaScript #Promise #Async #Await #JavaScript 核心篇 #ES6 章節：Async/Await #Axios

前言

接下來聊一下該如何撰寫可用性高的錯誤捕抓。

撰寫高可用性高的錯誤捕捉

開始之前先來看一下範例程式碼

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function promiseFn (boolean) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if(boolean) {
        resolve('resolve');
      } else {
        reject('reject')
      }
    }, 1000)
  })
}

const asyncFn = async () => {
  try {
    const res = await promiseFn(true);
    console.log(res);
  } catch(error) {
    console.log('error', error);
  }
}

其實我們可以看到上面程式碼中如果我們要使用 async 與 await 時都會建議使用 try...catch... 來包覆，否則無法正確捕捉到錯誤。

但這個寫法狀況下並不是那麼漂亮，因為變成每一次使用 async 、 await 時都必須寫很多 try...catch...，因此 try...catch... 結構是可以省略的，但這邊要注意 catch 的部分，因為我們會使用 try...catch... 的主要原因在於捕捉錯誤並提示出來，因此 catch 的部分必須是具有一制性的（意指統一行為，如 window.alert(error); 等）。

那麼首先這邊我們接下來看一下該如何改寫，首先先宣告一個 catchError 函式，並且將會傳入一個 async function，一率就會從這邊統一處理 catch

1
2
3
4
5
const catchError = (asFn) => {
  return asFn.catch((error) => {
    console.log('error', error);
  })
}

因此我們就可以這樣子呼叫使用

1
catchError(asyncFn(1));

catchError

但這個寫法並不是那麼好，因為假設今天如果要傳入參數的話，然後剛好又是一個迴圈是要戳 API 的

1
2
3
[1, 2].forEach(catchError(async (n) => {
  await axios.get(`https://jsonplaceholder.typicode.com/todos/${n}`)
}))

你會發現根本沒有辦法傳入迴圈的值，因此上面是第一種常見寫法，如果要解決這種狀況的話，就要改一下 catchError，我們必須在外層再包一個函示

1
2
3
4
5
6
7
const catchError = (asFn) => {
  return (n) => {
    return asFn(n).catch((error) => {
      console.log('error', error);
    })
  }
}

看到這邊你應該會發現這個概念就是一個閉包概念，因此這樣子你再跑迴圈時，才能夠正確的將值往裡面傳遞。

而這個其實是一種設計模式，稱之為 Functional programming 的部分，利用的就是一級函式概念來實作，我早期也有寫過相關的文章，所以也提供參考

簡單趣談 Functional Programming in JavaScript

參考文獻

整理這些技術筆記真的很花時間，如果你願意 關閉 Adblock 支持我，我會把這份感謝轉換成更多「踩坑轉避坑」的內容給你！ヽ(・∀・)ﾉ

Advertisement

你的支持會直接轉換成更多技術筆記

如果我的筆記讓你少踩一個坑、節省 Debug 的時間，
也許你可以請我喝杯咖啡，讓我繼續當個不是 Array 的 Ray ☕

Buy Me A Coffee | Portaly

我想要說...

ray — -zsh — 80x24
➜ ~ mkdir israynotarray
➜ ~ cd israynotarray
➜ israynotarray git:(main) pnpm run start

相關文章

JavaScript 核心觀念(81) - ES6 章節：Async/Await - 使用 Async Function 改寫實戰範例

2022-05-14

JavaScript 核心觀念(80) - ES6 章節：Async/Await - Async Function 與 Promise 之間的關聯性

2022-05-13

JavaScript 核心觀念(79) - ES6 章節：Async/Await - 為什麼要使用 Async 與基本介紹

2022-05-13

JavaScript 中的 Promise 是什麼？以及為什麼你要懂 Promise

2021-11-28

分享這篇文章

留言