Flutter日志记录插件simple_chopper_logger的使用

简介

Simple Chopper Logger 是一个 Chopper 拦截器，它以易读的格式打印请求和响应日志。这对于调试API调用非常有帮助。

使用方法

要使用 Simple Chopper Logger，只需将其添加到你的 ChopperClient 中：

import 'package:simple_chopper_logger/simple_chopper_logger.dart';

final chopperClient = ChopperClient(
  baseUrl: 'YOUR_BASE_URL',
  services: [
    // Your services here
  ],
  interceptors: [
    SimpleChopperLogger(),
  ],
);

配置选项

你可以通过传递参数来配置 Simple Chopper Logger 的行为：

• includeRequestHeaders: 是否包含请求头，默认为 false
• includeRequestBody: 是否包含请求体，默认为 false
• includeResponseHeaders: 是否包含响应头，默认为 false
• includeResponseBody: 是否包含响应体，默认为 false

例如：

SimpleChopperLogger(
  includeRequestHeaders: true,
  includeRequestBody: true,
  includeResponseHeaders: true,
  includeResponseBody: true,
)

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用 Simple Chopper Logger 来记录HTTP请求和响应的日志。

import 'package:chopper/chopper.dart';
import 'package:flutter/material.dart';
import 'package:simple_chopper_logger/simple_chopper_logger.dart';
import 'package:example/chopper_api.dart'; // 假设这是你定义的服务API文件

void main() {
  final chopperClient = ChopperClient(
    baseUrl: Uri.parse('https://jsonplaceholder.typicode.com'),
    services: [
      ChopperExampleService.create(),
    ],
    interceptors: [
      SimpleChopperLogger(
        includeRequestHeaders: true,
        includeRequestBody: true,
        includeResponseHeaders: true,
        includeResponseBody: true,
      ),
    ],
    converter: const JsonConverter(),
  );

  runApp(MyApp(client: chopperClient));
}

class MyApp extends StatefulWidget {
  const MyApp({
    required this.client,
    super.key,
  });

  final ChopperClient client;

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<dynamic>? posts;

  Future<void> getPosts() async {
    final response =
        await widget.client.getService<ChopperExampleService>().getPosts();
    if (response.isSuccessful) {
      setState(() {
        posts = response.body as List?;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Simple Chopper Logger Example'),
        ),
        body: posts == null
            ? const Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: posts?.length ?? 0,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(posts?[index]['title']),
                    subtitle: Text(posts?[index]['body']),
                  );
                },
              ),
        floatingActionButton: Builder(builder: (context) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              ElevatedButton(
                onPressed: getPosts,
                child: const Text('(GET) Fetch a list of posts'),
              ),
              ElevatedButton(
                onPressed: () async {
                  // showCreatePostDialog(context, widget.client.getService<ChopperExampleService>());
                },
                child: const Text('(POST) Create a post'),
              ),
              ElevatedButton(
                onPressed: () async {
                  // showUpdatePostDialog(context, widget.client.getService<ChopperExampleService>());
                },
                child: const Text('(PUT) Update a post'),
              ),
              ElevatedButton(
                onPressed: () async {
                  // showPatchPostDialog(context, widget.client.getService<ChopperExampleService>());
                },
                child: const Text('(PATCH) Patch a post'),
              ),
              ElevatedButton(
                onPressed: () async {
                  // showDeletePostDialog(context, widget.client.getService<ChopperExampleService>());
                },
                child: const Text('(DELETE) Delete a post'),
              ),
            ],
          );
        }),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用程序，它使用 Simple Chopper Logger 来记录与 jsonplaceholder.typicode.com API交互的日志。你可以通过点击浮动按钮来触发不同的HTTP请求，并在控制台中查看详细的日志信息。

日志输出示例

请求日志

响应日志

希望这个示例能帮助你更好地理解和使用 Simple Chopper Logger 插件。如果你有任何问题或需要进一步的帮助，请随时提问！