Flutter网络请求日志插件carapacik_dio_logger的使用

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

Flutter网络请求日志插件carapacik_dio_logger的使用

pub version pub likes dart style

CarapacikDioLogger 是一个 dio 拦截器,它以易于阅读的格式记录网络请求,并支持生成 curl 命令和彩色输出。

使用方法

安装

首先,在你的 pubspec.yaml 文件中添加 carapacik_dio_logger 依赖:

dependencies:
  carapacik_dio_logger: ^最新版本号

然后,将 CarapacikDioLogger 添加到你的 Dio 拦截器中:

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

void main() {
  final dio = Dio();

  // 添加默认配置的拦截器
  dio.interceptors.add(const CarapacikDioLogger());

  // 或者自定义拦截器配置
  dio.interceptors.add(
    const CarapacikDioLogger(
      error: true,
      request: true,
      requestHeader: true,
      requestQueryParameters: true,
      requestBody: true,
      response: true,
      responseHeader: true,
      responseBody: true,
      convertFormData: true,
      colorized: false,
      showCurl: true,
      chunkSize: 1024,
      logPrint: print,
      showLog: kDebugMode,
    ),
  );

  // 发起网络请求
  dio.get('https://jsonplaceholder.typicode.com/posts').then((response) {
    print(response.data);
  }).catchError((error) {
    print(error);
  });
}

示例代码

以下是一个完整的示例代码,展示了如何在 Flutter 应用中使用 CarapacikDioLogger

// ignore_for_file: avoid_redundant_argument_values
import 'package:carapacik_dio_logger/carapacik_dio_logger.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CarapacikDioLogger Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _makeNetworkRequest();
            },
            child: Text('Make Network Request'),
          ),
        ),
      ),
    );
  }

  void _makeNetworkRequest() async {
    final dio = Dio();

    dio.interceptors.add(
      const CarapacikDioLogger(
        error: true,
        request: true,
        requestHeader: true,
        requestQueryParameters: true,
        requestBody: true,
        response: true,
        responseHeader: true,
        responseBody: true,
        convertFormData: true,
        colorized: false,
        showCurl: true,
        chunkSize: 1024,
        logPrint: print,
        showLog: kDebugMode,
      ),
    );

    try {
      final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
      print('Response data: ${response.data}');
    } catch (e) {
      print('Error: $e');
    }
  }
}

在这个示例中,我们创建了一个简单的 Flutter 应用,包含一个按钮。点击按钮时,会发起一个网络请求并使用 CarapacikDioLogger 记录请求和响应的详细信息。

希望这个示例对你有所帮助!如果你有任何问题或建议,请随时在 GitHub 上提交 issue。


更多关于Flutter网络请求日志插件carapacik_dio_logger的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络请求日志插件carapacik_dio_logger的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter项目中使用carapacik_dio_logger插件来进行网络请求日志记录的示例代码。carapacik_dio_logger是一个基于dio库的日志记录插件,可以帮助开发者轻松地在控制台中打印网络请求的详细信息。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加carapacik_dio_loggerdio的依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0  # 确保使用兼容的版本
  carapacik_dio_logger: ^latest_version  # 使用最新版本

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

2. 配置Dio和CarapacikDioLogger

在你的Flutter项目中,通常会在一个单独的文件(如api_service.dart)中配置Dio实例和日志记录器。下面是一个示例配置:

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

class ApiService {
  late Dio dio;

  ApiService() {
    // 创建Dio实例
    dio = Dio(BaseOptions(
      baseUrl: "https://api.example.com", // 替换为你的API基础URL
      connectTimeout: 5000,
      receiveTimeout: 3000,
      sendTimeout: 3000,
    ));

    // 配置CarapacikDioLogger
    dio.interceptors.add(CarapacikDioLogger(
      requestLogger: (options, headers) {
        // 自定义请求日志输出,例如打印到控制台
        print("REQUEST: ${options.method.toUpperCase()} ${options.path}");
        print("HEADERS: $headers");
        if (options.data != null) {
          print("DATA: ${options.data}");
        }
      },
      responseLogger: (response, headers) {
        // 自定义响应日志输出,例如打印到控制台
        print("RESPONSE STATUS: ${response.statusCode}");
        print("HEADERS: $headers");
        print("DATA: ${response.data}");
      },
      errorLogger: (err, errorResponse) {
        // 自定义错误日志输出,例如打印到控制台
        print("ERROR: ${err.message}");
        if (errorResponse != null) {
          print("ERROR RESPONSE STATUS: ${errorResponse.statusCode}");
          print("ERROR RESPONSE DATA: ${errorResponse.data}");
        }
      },
    ));
  }

  // 示例请求方法
  Future<dynamic> fetchData() async {
    try {
      Response response = await dio.get("/endpoint"); // 替换为你的实际API端点
      return response.data;
    } catch (e) {
      print("Error fetching data: $e");
      return null;
    }
  }
}

3. 使用ApiService

现在你可以在你的Flutter组件或页面中使用这个ApiService来进行网络请求并查看日志输出。例如:

import 'package:flutter/material.dart';
import 'api_service.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Network Logging Example'),
        ),
        body: Center(
          child: NetworkLoggingExample(),
        ),
      ),
    );
  }
}

class NetworkLoggingExample extends StatefulWidget {
  @override
  _NetworkLoggingExampleState createState() => _NetworkLoggingExampleState();
}

class _NetworkLoggingExampleState extends State<NetworkLoggingExample> {
  String? data;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  void fetchData() async {
    ApiService apiService = ApiService();
    dynamic responseData = await apiService.fetchData();
    setState(() {
      data = responseData?.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Network Response:'),
        if (data != null) Text(data!),
      ],
    );
  }
}

以上代码展示了如何在Flutter项目中配置和使用carapacik_dio_logger来记录网络请求的日志。确保在实际项目中替换示例API URL和端点,并根据需要进行调整。

回到顶部