懂 Vue、React 就懂 Flutter 异常管理

有前端工开发经验的同学，你可能已经熟悉了JavaScript中的异常处理方式，恭喜你，这意味着Flutter中的异常处理机制，你已经掌握了80％。

在JavaScript中，我们通常使用try-catch语句块来捕获和处理异常。类似地，在Flutter中，我们可以使用try-catch语句块来捕获和处理异常。然而，Flutter提供了更多的异常处理选项，如使用on语句来捕获特定类型的异常。

在本文中，我们将探讨Flutter中的异常处理机制，包括如何处理异步代码中的异常，以及如何自定义异常类和处理程序。此外，我们还将介绍一些最佳实践和常见的异常处理模式，以帮助你编写更健壮和可靠的Flutter应用程序。

关于Flutter异常处理

什么是异常？

异常是在程序执行过程中发生的错误或意外情况。当出现异常时，程序的正常流程被打断，并且需要采取适当的措施来处理异常。在Flutter中，异常可以是编程错误、运行时错误或外部因素导致的错误。

为什么需要处理异常？

处理异常的主要目的是确保程序在出现错误或异常情况时能够正确地继续执行，而不会导致程序崩溃或出现不可预料的行为。通过适当地处理异常，我们可以提高应用程序的健壮性和可靠性。

我对异常处理的理解是，这个东西代表着自己对程序的掌控力，要对自己的程序非常了解，了解什么地方可能会报错，给出友好的错误消息。而不是程序突然崩了: 服务端500，前端白屏， flutter 闪退。

如何在Flutter中处理异常？

在Flutter中，我们同样可以使用try-catch语句块来捕获和处理异常。try语句块用于包裹可能会抛出异常的代码，而catch语句块用于捕获并处理异常。以下是一个简单的示例：

dart 复制代码

try {
  // 可能会抛出异常的代码
  int result = 10 ~/ 0; // 除以0会抛出异常
  print('结果：$result');
} catch (e) {
  // 捕获并处理异常
  print('出现异常：$e');
}

在上面的示例中，我们尝试计算10除以0的结果，这将导致除以零异常。通过使用try-catch语句块，我们能够捕获并处理这个异常，以避免程序崩溃。

但是，有时你可能只对特定类型的异常感兴趣，就可以使用on语句来捕获特定类型的异常。

dart 复制代码

try {
  // 可能会抛出异常的代码
  int result = 10 ~/ 0; // 除以0会抛出异常
  print('结果：$result');
} on IntegerDivisionByZeroException {
  // 捕获并处理除以零异常
  print('除以零异常');
} catch (e) {
  // 捕获并处理其他类型的异常
  print('其他异常：$e');
}

在上面的示例中，我们使用on语句来捕获除以零异常（IntegerDivisionByZeroException），并提供相应的处理逻辑。如果出现其他类型的异常，我们将使用catch语句块来捕获并处理。

在异步代码中处理异常是非常重要的，比如网络请求，用户等了半天如果出错都不知道发生了什么，这用户体验就非常差。Flutter提供了一些机制来处理异步代码中的异常。

dart 复制代码

Future<void> fetchData() async {
  try {
    // 异步操作，可能会抛出异常
    var data = await fetchDataFromApi();
    print('数据：$data');
  } catch (e) {
    // 捕获并处理异常
    print('出现异常：$e');
  }
}

在上面的示例中，我们定义了一个异步函数fetchData()，其中包含了一个异步操作fetchDataFromApi()。通过使用try-catch语句块，我们能够捕获并处理在异步操作中可能抛出的异常。如果遇到一些网络请求的错误，比如网络超时，网络地址错误，比如服务端返回的数据格式异常，客户端无法解析，我们都可以抓住这个错误，给用户一个友好的异常提示。

除了使用内置的异常类，Flutter还允许我们自定义异常类来满足特定需求

dart 复制代码

class CustomException implements Exception {
  final String message;

  CustomException(this.message);

  @override
  String toString() {
    return 'CustomException: $message';
  }
}

void processData(int value) {
  try {
    if (value < 0) {
      throw CustomException('值不能为负数');
    }
    // 其他处理逻辑
  } catch (e) {
    if (e is CustomException) {
      // 处理自定义异常
      print('自定义异常：${e.message}');
    } else {
      // 处理其他类型的异常
    }
  }
}

在上面的示例中，我们定义了一个自定义异常类CustomException。在processData()函数中，如果传入的value小于0，我们会抛出自定义异常。通过捕获并判断异常类型，我们能够根据需要进行处理。

最佳实践

最后我们分享一些关于Flutter异常处理的最佳实践。

无论何时何地，使用try-catch语句块来捕获和处理异常，确保程序在遇到错误时，也是按照我们期望的结果运行。像flutter和前端都是客户端，客户端是跑在用户手里的，我们不可能像在服务端一样，在server上看log，所以有条件的话，当异常发生时，将客户端的错误采集上来，无论采用自研的，还是类似instana这样的可观测性基建
设置顶层错误处理程序，做一个错误处理的兜底。

dart 复制代码

void main() {
  FlutterError.onError = (FlutterErrorDetails details) {
    // 处理未被捕获的异常
    // ...
  };
  runApp(MyApp());
}

在上述代码中，我们在main函数中设置了FlutterError.onError回调函数，用于处理未被捕获的异常。当应用程序发生未被处理的异常时，该回调函数会被调用，并传递异常的详细信息。

使用ErrorWidget显示自定义的错误界面：

dart 复制代码

class MyApp extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      builder: (BuildContext context, Widget? child) {
        ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
          // 自定义错误界面的构建逻辑
          // ...
          return CustomErrorWidget();
        };
        return child!;
      },
    );
  }
}

class CustomErrorWidget extends StatelessWidget {
  // ...

  @override
  Widget build(BuildContext context) {
    // 自定义错误界面的UI布局
    // ...
  }
}

在上述代码中，我们通过设置ErrorWidget.builder来自定义错误界面的构建逻辑。当应用程序发生错误时，Flutter会使用自定义的错误界面来替代默认的错误界面，提供更好的用户体验。

结束语

希望通过本文的介绍，你可以对Flutter中的异常处理机制感兴趣。如果本文对你有帮助，请点个赞和关注吧❤️，我会持续更新有价值的技术和视野，谢谢！