Flutter错误处理插件error_handler的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter错误处理插件error_handler的使用

Motivation

try{}catch(e){} 或 then((){}).catch((){}) 使得代码难以阅读和修改。

Functionality

  • 处理所有API可能的状态：初始化/加载/数据/错误。
  • 记录状态。
  • 基于freezed构建。
  • 与任何HTTP客户端兼容，如chopper、dio等。

如何使用

安装

对于Flutter项目：

flutter pub add error_handler
flutter pub add dio

对于Dart项目：

flutter pub add error_handler
flutter pub add dio
示例

Future获取API结果直接示例

import 'package:dio/dio.dart';
import 'package:error_handler/error_handler.dart';

FutureResponse<Post> getPost() async {
  const path = "https://jsonplaceholder.typicode.com/posts/1";
  final response = await Dio().get(path);
  return response.convert(Post.fromJson);
}

void main() async {
  final state = await errorHandler.future(getPost);

  state.whenOrNull(
    data: (post, response) {
      print("title: ${post.title}");
    },
    error: (error) {
      print(getErrorMessage(error));
    },
  );
}
  • errorHandler.future((){...}) 返回安全的数据。

Stream提供加载和空闲状态示例

/// wrap the api call with [ErrorHandler.stream]
///
/// to handle loading state
void main() {
  final event = errorHandler.stream(getPost);

  event.listen((state) {
    state.whenOrNull(
      
      loading: () {
        print("loading");
      },
      data: (post, response) {
        print("title: ${post.title}");
      },
      error: (error) {
        print(getErrorMessage(error));
      },
    );
  });
}
  • errorHandler.stream((){...}) 首先返回加载状态，然后返回数据或错误。

进阶登录示例（POST请求）

/// First create API call
FutureResponse<User> login(String gmail, String password) async {
  final body = {"gmail": gmail, "password": password};

  final response = await Dio().post("http://your.domain.com/login", data: body);

  return response.convert(User.fromJson);
}

/// Wrap it with [ErrorHandler.stream] or [ErrorHandler.future]
StreamState&lt;User&gt; safeLogin(String gmail, String password) =&gt;
    errorHandler.stream(() =&gt; login(gmail, password));

void main() {
  final event = safeLogin("example@domain.com", "password");
  event.listen((event) {
    event.whenOrNull(
      loading: () {
        print("please wait");
      },
      data: (data, response) {
        print("login successfully");
        print(data);
      },
      error: (exception) {
        print(exception.defaultErrorMessage());
      },
    );
  });
}

更多关于Flutter错误处理插件error_handler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter错误处理插件error_handler的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用error_handler插件进行错误处理的代码示例。需要注意的是，error_handler这个具体的包名可能不是官方或广泛使用的包，但我会基于错误处理的概念展示一个通用的实现方法，你可以根据实际的插件文档进行调整。

首先，确保你的pubspec.yaml文件中包含了错误处理相关的依赖。虽然error_handler可能不是确切的包名，但我们可以使用类似fluttertoast（用于显示错误消息）和catcher（一个流行的错误报告库）这样的包来模拟错误处理流程。

dependencies:
  flutter:
    sdk: flutter
  fluttertoast: ^8.0.8
  catcher: ^0.6.5

然后，运行flutter pub get来安装这些依赖。

接下来，在你的Flutter应用中配置错误处理。以下是一个基本的实现示例：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:catcher/catcher.dart';

void main() {
  // 配置Catcher
  CatcherOptions debugOptions = CatcherOptions(
      DialogReportOptions(
        title: 'Error Occurred',
        message: 'Something went wrong!',
        okText: 'Close',
      ),
      [
        // 你可以添加多个报告处理器，比如发送到服务器、保存到文件等
        ConsoleHandler(),
      ],
      applicationParameters: "Flutter App v1.0"
  );

  Catcher(context, debugOptions)..listen();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _handleError() {
    try {
      throw Exception("This is a test error!");
    } catch (e, stackTrace) {
      // 使用Catcher报告错误
      Catcher.reportCheckedError(e, stackTrace);
      
      // 显示Toast消息
      Fluttertoast.showToast(
          msg: "Error: ${e.toString()}",
          toastLength: Toast.LENGTH_SHORT,
          gravity: ToastGravity.BOTTOM,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          fontSize: 16.0
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Error Handling Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _handleError,
          child: Text('Trigger Error'),
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 配置Catcher：在main函数中，我们配置了Catcher的错误报告选项，并添加了一个ConsoleHandler来在控制台打印错误信息。你可以根据需要添加更多的处理器。

  2. 错误处理逻辑：在_MyHomePageState类中，我们定义了一个_handleError方法，该方法模拟了一个错误，并使用Catcher报告该错误，同时使用Fluttertoast显示一个错误消息。

  3. UI组件：在UI中，我们添加了一个按钮，当用户点击该按钮时，会触发_handleError方法。

请注意，这个示例使用了catcher和fluttertoast两个包来处理错误报告和显示错误消息。如果你确实有一个名为error_handler的特定包，你需要查阅该包的文档并按照其API进行相应的调整。

希望这个示例能帮助你理解如何在Flutter中进行错误处理！

回到顶部