iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
Modern Web

從 Next.js 開始的 Functional Programming系列 第 16

D16 - 實作異步流程 (二)

  • 分享至 

  • xImage
  •  

程式碼請參考
D15/asynchronous
src\app\edit\courses\all\components\add-course-form\users\feature\add-user.ts

接下來會把前端的部分講完再來講後端,所以今天會講的是步驟 6。

步驟 6 非常重要,假設我們收到一個無法確定型別的資料,例如 any 或 unknown,我們該怎麼確定它是我們要的型別呢? 以 GET /api/v1/users/:user 來說,該如何確定是否符合我們的 User interface 定義 ?

type User = Administrator | Participant

interface Administrator {
  _tag: "Administrator"
  name: string
}

interface Participant {
  _tag: "Participant"
  name: string
}

依照原生的方法我們可能會這樣做


const response: unknown = await axios .....

const isResponse = (response: unknown): response is User=>(response._tag === 'Administrator' || response._tag === "Participant") && typeof response.name === 'string')

if(isResponse(response)){
	// do something to response
}else {
	throw Error
}

這樣做也不是不行,但是有幾個非常致命的缺點,就是 難以組合、難以重複使用、難以整合錯誤訊息。當我們要檢查基於 User 型別堆疊而成的更複雜的大型別時,類似的判斷是會變得非常複雜。所以我們需要依靠工具來幫我們處理這些惱人的檢查流程。

安裝 @effect/schema

npm i @effect/schema

簡介 @effect/schema

https://ithelp.ithome.com.tw/upload/images/20231001/201586158zgCte3yXd.png

當我們把滑鼠放到 Schema 提供的預設型別上,可以看到它包含了兩個 generic type
前面的叫做 From 後面的叫 To 。其中 From 表示它期待的輸入型別,To 代表轉換後的型別會是什麼樣子。

我們舉例說明,當我們把 123 交給 dateSchema 解析,它會拋出錯誤,因為型別檢查沒通過,所以它具備 型別檢查 功能。

S.parseSync(dateSchema)(123)

當我們把 test 交給 dateSchema 解析,它還是會拋出錯誤,因為格式檢查沒通過,它只接受能解析為日期的字串,所以它具備 內容檢查 功能。

S.parseSync(dateSchema)('test')

當我們把 2023-10-01T00:00:00Z 交給 dateSchema ,所有驗證都通過後,它自動將日期字串置轉換成日期物件,所以它具備 型別/內容轉換 功能。

S.parseSync(dateSchema)('2023-10-01T00:00:00Z')

D07 - 軌道導向設計 有提到拋出錯誤是相對危險的錯誤處理方式,所以它也支援安全的 effect Either 型別。

S.parseEither(dateSchema)('2023-10-01T00:00:00Z')
//Either<ParseError, Date>

最後,最最最重要的是它有非常一目了然的錯誤訊息,會清楚的告訴你是哪裡出錯了。

import { formatErrors } from "@effect/schema/TreeFormatter";

const result = S.parseEither(Person)({})

if (Either.isLeft(result)) {
  console.error(formatErrors(result.left.errors));
}
/*
error(s) found
└─ ["name"]
   └─ is missing
*/

不過前面有提到傳統方法最大的問題是難以組合,那 @effect/schema 是怎麼做到方便組合使用的呢? 明天分享給大家 !


上一篇
D15 - 實作異步流程 (一)
下一篇
D17 - 實作異步流程 (三)
系列文
從 Next.js 開始的 Functional Programming30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言