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

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

dio_logging_interceptor 是一个用于 Dio 的拦截器插件，它可以记录 HTTP 请求和响应的数据。这对于调试网络请求非常有用。

安装

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  dio: ^5.0.0 # 或者最新版本
  dio_logging_interceptor: ^2.0.0 # 或者最新版本

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

使用方法

基本用法

首先，你需要创建一个 Dio 实例，并将 DioLoggingInterceptor 添加到拦截器列表中。

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

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

  // 添加 DioLoggingInterceptor 到拦截器列表
  dio.interceptors.add(
    DioLoggingInterceptor(
      level: Level.body,  // 日志级别：只记录请求体和响应体
      compact: false,     // 是否压缩输出日志
    ),
  );

  // 示例：发送一个 POST 请求
  sendRequest(dio);
}

Future<void> sendRequest(Dio dio) async {
  try {
    final response = await dio.post(
      'http://localhost:9002/graphql',
      data: {
        "operationName": "viewer",
        "variables": {},
        "query": """query viewer {
          __typename
          viewer {
            __typename
            id
            username
            firstName
            lastName
            email
            password
            phone
            userStatus
          }
        }"""
      },
    );
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

日志级别

Level 枚举定义了不同的日志级别：

  • Level.none: 不记录任何日志。
  • Level.headers: 只记录请求和响应的头部信息。
  • Level.body: 记录请求和响应的头部以及主体信息（默认值）。

紧凑模式

compact 参数控制日志输出是否紧凑。如果设置为 true，则会以更简洁的方式输出日志；如果设置为 false，则会以更详细的格式输出日志。

示例输出

以下是使用 DioLoggingInterceptor 时的日志输出示例：

[DIO]--> POST http://localhost:9002/graphql
[DIO][HEADER]accept:*/*
[DIO][HEADER]content-type:application/json; charset=utf-8
[DIO][DATA]{
[DIO][DATA]  "operationName": "viewer",
[DIO][DATA]  "variables": {},
[DIO][DATA]  "query": "query viewer {\n  __typename\n  viewer {\n    __typename\n    id\n    username\n    firstName\n    lastName\n    email\n    password\n    phone\n    userStatus\n  }\n}"
[DIO][DATA]}
[DIO]--> END POST
[DIO]<-- 200 OK
[DIO][HEADER]connection:[keep-alive]
[DIO][HEADER]x-powered-by:[Express]
[DIO][HEADER]access-control-allow-credentials:[true]
[DIO][HEADER]keep-alive:[timeout=5]
[DIO][HEADER]date:[Sun, 15 Aug 2021 15:47:00 GMT]
[DIO][HEADER]vary:[Origin]
[DIO][HEADER]content-length:[249]
[DIO][HEADER]etag:[W/"f9-SBi3WV2NHnvyW3BEZe3/QHq1y3k"]
[DIO][HEADER]content-type:[application/json; charset=utf-8]
[DIO][DATA]{
[DIO][DATA]  "data": {
[DIO][DATA]    "__typename": "Query",
[DIO][DATA]    "viewer": {
[DIO][DATA]      "__typename": "User",
[DIO][DATA]      "id": "MTU2MjYyNjYzMQ==",
[DIO][DATA]      "username": "tan",
[DIO][DATA]      "firstName": "Georgiana",
[DIO][DATA]      "lastName": "Bosco",
[DIO][DATA]      "email": "Jamarcus4@hotmail.com",
[DIO][DATA]      "password": "7LpKbUQQeiQya8W",
[DIO][DATA]      "phone": "289.733.0250",
[DIO][DATA]      "userStatus": 10009
[DIO][DATA]    }
[DIO][DATA]  }
[DIO][DATA]}
[DIO]<-- END HTTP

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

1 回复

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


当然，以下是一个关于如何在Flutter项目中使用dio_logging_interceptor插件来进行网络请求日志记录的示例代码。dio_logging_interceptor是一个用于dio库的拦截器，可以方便地打印HTTP请求的详细信息，包括请求头、请求体、响应头和响应体等。

首先，确保你已经在pubspec.yaml文件中添加了依赖项：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  dio_logging_interceptor: ^0.3.0  # 请检查最新版本号

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

接下来，你可以按照以下步骤在你的Flutter应用中使用dio_logging_interceptor：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio_logging_interceptor/dio_logging_interceptor.dart';

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

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

  Future<void> _makeNetworkRequest() async {
    // 创建 Dio 实例
    final Dio dio = Dio();

    // 配置 LoggingInterceptor
    final LoggingInterceptor loggingInterceptor = LoggingInterceptor(
      requestBody: true,
      responseBody: true,
      error: true,
      logPrint: print, // 你可以自定义日志输出函数
    );

    // 添加拦截器到 Dio 实例
    dio.interceptors.add(loggingInterceptor);

    try {
      // 发起 GET 请求
      final Response<String> response = await dio.get(
        'https://jsonplaceholder.typicode.com/posts/1',
      );

      // 打印响应数据
      print('Response Data: ${response.data}');
    } catch (e) {
      // 处理异常
      print('Error: $e');
    }
  }
}

在这个示例中，我们创建了一个Flutter应用，其中包含一个按钮。点击按钮时，会发起一个HTTP GET请求到https://jsonplaceholder.typicode.com/posts/1。为了记录请求和响应的日志，我们做了以下几步：

  1. 创建了一个Dio实例。
  2. 配置了一个LoggingInterceptor实例，并设置了requestBody、responseBody和error为true，表示我们希望记录请求体、响应体和错误信息。
  3. 使用logPrint: print将日志输出到控制台（你也可以自定义日志输出函数）。
  4. 将LoggingInterceptor添加到Dio实例的拦截器列表中。
  5. 使用dio.get方法发起网络请求，并处理响应或异常。

运行这个应用并点击按钮后，你应该能在控制台中看到详细的HTTP请求和响应日志。这有助于调试和监控网络请求。

回到顶部