umi-request 統一異常處理實踐

首發於語雀文檔

前言

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

umi-request 有點不同

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


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

參考：
https://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 進行封裝。


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

后續

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

Github

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

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