當我們在執行Flutter app時, 我們無法控制一切因素, 所以一定會有錯誤的出現, 那如何處理錯誤就成了一門必學的課程了!

基本的錯誤處理

Future<Response> getNetworkResponse() async {
  try {
    final uri = uri.parse('http://.....');
    final response = await.http.get(uri);
    switch(response.statusCode) {
      case 200:
        final data = json.decode(response.body);
        return Response.fromJson(data);
     default:
       throw Exception(response.reasonPhrase);
    }
  } catch(_) {
    rethrow;
  }
}

上方的程式碼是在透過 http package 去得做一個 GET 的請求, 拿到一份資料.

如果成功得到並拆解成功就會回傳一個 Response.

但當發生錯誤時我們就會拋出一個錯誤訊息

基本的使用如下:

try {
  final response = await getNetworkResponse();
  print(response);
} catch (e) {
  // 做錯誤處理
}

但是我們的 getNetworkResponse 並沒有特意提及到需要做錯誤處理, 所以常常會有人忘記加 try/catch, 導致網路有問題時 app 就會壞掉！

因此我們可以透過一些辦法來提醒需要使用這個 Function 的人來做處理.

最基本的方法就是 加註解, 當你的滑鼠移到Function上時會出現這些提示

但是！有些人是不會去看這些的, 所以我們要使用更強硬的方式！

MultipleResult

MultipleResult 是一個 pub.dev的套件, 可以提供多個回傳值, 我們可以用下面的方式來限制使用這個function必須要處理error

Future<Result<Response, Exception>> getNetworkResponse() async {
  try {
    final uri = uri.parse('http://.....');
    final response = await.http.get(uri);
    switch(response.statusCode) {
      case 200:
        final data = json.decode(response.body);
        final res = Response.fromJson(data)
        return Success(res);
     default:
       return Error(Exception());
    }
  } catch(_) {
     return Error(Exception());
  }
}

接著使用 when 來處理回傳的資料:

final response = getNetworkResponse();
response.when(
  (success) {
    // 處理結果
  },
  (exception) {
    // 錯誤處理
  },
);

其他更詳細的使用方法可以到他的網站去查看網站去查看, 裡面有更詳細的說明跟範例

客製化錯誤訊息

說完了一般的錯誤處理, 但是總是可能會有意外的發生, 因此我們可以在app的最外層加上一層保險,

一般如果沒有特別處理錯誤的話, 畫面會長成下面這個樣子

使用者看到就會覺得 ??? 發生什麼事情了?!

但是如果能放上自己客製化的Widget, 雖然還是遇到了錯誤, 但是對使用者來說就會覺得比較沒什麼, 而且還能即時處理.

下面我們就來講解該如何加入自己客製化的錯誤處理 Widget

void main() {
  ErrorWidget.builder = (details) {
    return CustomErrorWidget();
  };
  runApp(const MyApp());
}

只要將 CustomErrorWidget 改成自己想要的 Widget, 就可以在有錯誤沒有被catch時跑到這個畫面, 然後再做自己想要的處理！

今天就介紹到了這裡了,我的部落格還有其他Flutter的教學文 大家可以去看看！