umi-request 統一異常處理實踐

• 2020 年 12 月 29 日
• 筆記

首發於語雀文檔

前言

本人在工作中用到了 umi-request，百度Google搜了一遍，感覺都沒找到超過 3 篇合適且含程式碼的文章，因此只能自行實踐總結了。

umi-request 有點不同

umi-request 與 axios & xhr 不太一樣，它是基於 fetch 實現的，因此它只有在網路錯誤的情況下，才會拋出錯誤（即：catch），即使介面返回的是 404/500 等錯誤。

umi-request 自帶提供一個錯誤處理函數 errorHandler，所有在 umi-request 中執行的程式碼如果拋出錯誤，都會被捕獲。

參考：
//github.com/umijs/umi-request/blob/master/README_zh-CN.md#錯誤處理

統一異常處理

官方文檔中提供的 errorHandler 示例比較簡單，只簡單判斷了所拋錯誤 error 是否有 response 屬性（比如說網路錯誤這個場景，error 中就是沒有 response 屬性）。
這就容易出現一個問題：程式碼執行出錯（比如獲取不到外部傳入的參數），它所拋的 error 也是沒有 response 屬性。。。

我覺得目前其實還挺簡單的，主要搞清楚以下兩點：

1. 錯誤捕獲順序
2. 自定義 Error，擴展 Error

錯誤捕獲順序

1. 發生錯誤
2. errorHandler（是個 Promise）
   1. 如果拋出錯誤或 reject，則進入下一個 Promise 的 catch，即：request(“”,{}).then().catch()
   2. 否則進入下一個 Promise 的 then，即：request(“”,{}).then()
      

自定義 Error，擴展 Error

我希望能判斷區分以下幾類錯誤：

1. 網路錯誤
2. HTTP 錯誤
3. 介面錯誤
4. 其他錯誤（如程式碼執行錯誤）

那就使用 ES6 Class 繼承一下 Error 進行封裝。

參考：
//zh.javascript.info/custom-errors

後續

後續還可以再複雜一點，自定義擴展一下請求錯誤和響應錯誤以示區分，不過應該都差不多。

Github

github 上的程式碼是本人的一整套 umi-request 實踐，並非只含 umi-request 錯誤處理

//github.com/blueju/umi-request-practice