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 秒钟，对我来说是一个激励，感谢。

祝你有一个美好的一天~

微信 ducafecat
https://wiki.ducafecat.tech
https://ducafecat.com

# Flutter 检查网络连接情况

# 前言

# 正文

# 检查我们的连接

# 一个简单的用例

# 结束语

Flutter 检查网络连接情况

前言

正文

检查我们的连接

一个简单的用例

结束语