Flutter 檢查網絡連接配接情況

Flutter 檢查網絡連接配接情況

原文 https://medium.com/pinch-nl/checking-connectivity-in-flutter-52c655cee49d

前言

https://pub.dev/packages/connectivity_plus

connectivity_plus 它可以讓您輕松地檢查是否存在連接配接，進而為您和使用者都提供更好的回報。讓我們親自動手，讓它旋轉起來！

難道你不讨厭當你得到這個“出錯了”的錯誤，而不知道到底是什麼出錯了嗎？我們都經曆過這種情況，但可能在我們自己的應用程式中也都經曆過: 我們試圖擺脫一些基本的錯誤處理，隻是確定我們讓使用者知道有一個錯誤，而沒有告訴他們實際的問題是什麼。他們可能會再次嘗試，希望下一個請求會成功，但這也可能是沒有希望的。

毫不奇怪，這是一個糟糕的使用者體驗，幸運的是，連接配接包幫助我們改善我們的應用程式的使用者體驗！一個包，幫助我們檢查裝置是否有一個蜂窩(移動)網絡，無線，或根本沒有連接配接！通過使用這個包，我們可以改進錯誤處理，例如告訴使用者他們沒有連接配接到任何網絡。

正文

檢查我們的連接配接

很好，首先，讓我們把這個包放到 pubspec.yaml 檔案中:

connectivity_plus: 1.0.3
           

現在 flutter pub get ，準備出發！

我們有兩種檢查連接配接的方法: 使用 Future 或 Stream。讓我們從這裡使用 Future 開始，通過使用 sync/wait 擷取目前連接配接狀态:

final connectionState = await Connectivity().checkConnectivity();

switch (connectionState) {
  case ConnectivityResult.wifi:
    // Device is connected to wifi
    break;
  case ConnectivityResult.mobile:
    // Device is connected to a cellular network
    break;
  case ConnectivityResult.none:
    // No connection at all
    break;
}
           

正如您所看到的，我們隻是通過異步/等待從上到下檢視代碼，并且可以檢查裝置是否連接配接到 wifi、 mobile，或者根本沒有活動連接配接。

酷! 但是如果我們想觀察我們關系的變化呢？

Connectivity().onConnectivityChanged.listen((connectionState) {
  switch (connectionState) {
    case ConnectivityResult.wifi:
    // Device is connected to wifi
      break;
    case ConnectivityResult.mobile:
    // Device is connected to a cellular network
      break;
    case ConnectivityResult.none:
    // No connection at all
      break;
  }
});
           

正如您所看到的，連接配接性包還為我們提供了一個 Stream 而不是 Future，這樣我們就可以監聽連接配接性的變化。太棒了！

一個簡單的用例

好吧，這看起來很簡單，但我們怎樣才能把它用好呢？

我們傾向于使用 Dio HTTP 用戶端，它使得處理請求、添加逾時以及: 攔截器變得更加容易！攔截器是用來，出其不意地攔截我們的請求的。我們傾向于使用它來添加一個授權頭來進行身份驗證請求或添加一些日志記錄，但它也可以幫助我們攔截每個請求，以便我們可以檢查裝置是否首先連接配接到網絡。如果沒有，我們可以簡單地抛出一個異常，說我們現在沒有一個活動的連接配接，而不是先執行一個請求，然後隻是等待，直到失敗。讓我們編寫一些代碼來看看如何實作這一點:

class NetworkInterceptor implements InterceptorsWrapper {
  @override
  void onError(DioError error, ErrorInterceptorHandler handler) => handler.next(error);

  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
    final connectivityResult = await Connectivity().checkConnectivity();
    if (connectivityResult == ConnectivityResult.none) return handler.reject(NoNetworkException(options));
    return handler.next(options);
  }

  @override
  void onResponse(Response<dynamic> response, ResponseInterceptorHandler handler) => handler.next(response);
}

class NoNetworkException extends DioError {
  @override
  RequestOptions requestOptions;

  NoNetworkException(this.requestOptions) : super(requestOptions: requestOptions);

  @override
  String get message => 'No network connection!';
}
           

這裡我們主要關注 onRequest 方法。這個方法在我們執行實際請求之前被觸發，聽起來像是一個檢查裝置是否有活動連接配接的好地方！如果沒有連接配接，繼續執行請求就沒有意義，是以在這種情況下，我們使用請求處理程式的拒絕函數抛出一個錯誤。 如您所見，我們還決定建立一個專用的 NoNetworkException，以便在拒絕請求時使用。這樣我們可以很容易地檢查錯誤的類型，以便在我們的 UI 中處理它。因為拒絕接受 DioError，是以我們必須 extension 它，而不是預設的 Error/Exception。

基本上就是這樣！是以，現在，無論何時執行請求，都可以捕獲錯誤并檢查它是否是 NoNetworkException，以便輕松檢視它是否由于沒有連接配接而失敗。太棒了！

結束語

如果本文對你有幫助，請轉發讓更多的朋友閱讀。

也許這個操作隻要你 3 秒鐘，對我來說是一個激勵，感謝。

祝你有一個美好的一天~

© 貓哥

• wx ducafecat