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

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

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

CurlLoggingInterceptor 是一个Dio拦截器，用于以curl格式记录HTTP请求和响应，从而简化应用程序中的网络交互调试和分析。

特性

  • 以curl格式记录HTTP请求，便于调试。
  • 美化JSON响应数据。
  • 可配置的请求和响应日志记录。

安装

在你的 pubspec.yaml 文件中添加 dio_curl_logger：

dependencies:
  dio_curl_logger: ^1.0.0

使用

导入包

要使用 CurlLoggingInterceptor，在你的Dart或Flutter项目中导入必要的包：

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

然后初始化Dio实例并添加 CurlLoggingInterceptor：

final dio = Dio();

dio.interceptors.add(
  CurlLoggingInterceptor(
    showRequestLog: true, // 设置为false以禁用HTTP请求的日志记录
    showResponseLog: true, // 设置为false以禁用HTTP响应的日志记录
  ),
);

示例

请求日志记录

当发送HTTP请求时，拦截器会以curl格式记录请求。以下是一个示例，使用模拟数据：

Request log:
curl  -X GET  https://api.example.com/resource?param1=value1&param2=value2
  -H 'Accept: application/json' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer mock_token' \

Response Log:
URL: https://api.example.com/v1/resource?param1=value1&param2=value2
Headers:
 content-type: application/json
 date: Fri, 01 Jan 2024 12:00:00 GMT
 transfer-encoding: chunked
 server: MockServer/1.0

Response Data:
{
    {
        "name": "John Doe",
        "id": "123456",
        "description": "Sample item description",
        "creationDate": "2024-01-01",
        "status": "active"
    }
}
====================================

示例代码

以下是一个完整的示例代码：

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

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

  // 添加CurlLoggingInterceptor
  dio.interceptors.add(
    CurlLoggingInterceptor(
      showRequestLog: true, // 显示请求日志
      showResponseLog: true, // 显示响应日志
    ),
  );

  // 发送样本HTTP请求
  try {
    final response = await dio.get('https://google.com');
    print(response.data); // 打印响应数据
  } on Exception {
    print("Error occurred");
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用dio_curl_logger插件来进行网络请求日志记录的代码示例。这个插件可以帮助你将dio库的网络请求转化为cURL命令格式，便于调试和日志记录。

步骤 1: 添加依赖

首先，在你的pubspec.yaml文件中添加dio和dio_curl_logger的依赖：

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

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

步骤 2: 配置dio实例和dio_curl_logger

在你的Flutter项目中，配置dio实例并使用dio_curl_logger进行日志记录。以下是一个完整的示例：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final Dio _dio = Dio();

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

  void setupDio() {
    // 创建CurlLogger实例
    final CurlLogger curlLogger = CurlLogger();

    // 配置dio的拦截器，添加curlLogger
    _dio.interceptors.add(curlLogger);

    // 设置请求选项（可选）
    _dio.options.baseUrl = 'https://jsonplaceholder.typicode.com';
    _dio.options.connectTimeout = 5000;
    _dio.options.receiveTimeout = 3000;

    // 发起请求示例
    fetchData();
  }

  void fetchData() async {
    try {
      Response response = await _dio.get('/posts/1');
      print('Response Data: ${response.data}');
    } catch (e) {
      print('Error: ${e.response?.data ?? e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Text('Check console for curl logs and response data.');
  }
}

解释

  1. 添加依赖：在pubspec.yaml中添加dio和dio_curl_logger依赖。
  2. 配置dio实例：在_MyHomePageState的initState方法中，创建并配置dio实例。
  3. 添加CurlLogger拦截器：通过_dio.interceptors.add(curlLogger);将CurlLogger添加到dio的拦截器链中。
  4. 发起网络请求：在fetchData方法中，使用配置好的dio实例发起GET请求。

日志输出

运行应用后，你应该能在控制台看到类似以下的cURL命令日志输出，这有助于你复制并在命令行中执行相同的请求，或者分享给其他人进行调试：

curl -X GET "https://jsonplaceholder.typicode.com/posts/1" -H "accept-encoding: gzip, deflate" -H "user-agent: dio/4.0.0 (Dart VM/2.12.0)"

这样，你就成功地在Flutter项目中使用dio_curl_logger插件来记录网络请求的日志了。

回到顶部