Flutter网络请求日志记录插件flutter_http_logger的使用

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

Flutter网络请求日志记录插件flutter_http_logger的使用

flutter_http_logger

flutter_http_logger 是一个简单的的 Flutter 包装,用于记录 HTTP 请求和响应的日志。这个包允许开发者通过提供的 URL 在 web 浏览器中查看日志。它设计用于从真实设备(而非模拟器)创建本地服务器,以方便 HTTP 日志查看。

特性

  • 实时记录 HTTP 请求和响应。
  • 使用提供的 URL 在 web 浏览器中查看日志。
  • 支持不同的 HTTP 方法:GET、POST 和 POST_FILE。
  • 初始化和使用非常简单。

开始使用

要开始使用 flutter_http_logger,请将其添加到您的 pubspec.yaml 文件中:

dependencies:
  flutter_http_logger: 0.0.7

然后,导入该包:

import 'package:flutter_http_logger/flutter_http_logger.dart';

使用方法

初始化日志器

初始化日志器并启动本地服务器,使用 HttpLog.startServer(context) 函数在您的应用中:

HttpLog.startServer(context);
发送日志

每当您发送 HTTP 请求时,使用 HttpLog.sendLog() 函数记录请求和响应详细信息。以下是不同 HTTP 方法的示例:

记录 POST 请求
HttpLog.sendLog(
  method: "POST",
  url: baseUrl + api,
  header: _header,
  request: dataInJson,
  statusCode: response.statusCode,
  response: response.body,
  duration: endTime.difference(startTime).inMilliseconds,
);
记录 GET 请求
HttpLog.sendLog(
  method: "GET",
  url: baseUrl + api,
  header: _header,
  statusCode: response.statusCode,
  response: response.body,
  duration: endTime.difference(startTime).inMilliseconds,
);
记录 POST_FILE 请求
HttpLog.sendLog(
  method: "POST_FILE",
  url: baseUrl + api,
  header: _header,
  request: data,
  statusCode: response.statusCode,
  response: response.body,
  duration: endTime.difference(startTime).inMilliseconds,
);
查看日志

启动服务器后,访问 提供的 URL(显示在日志或应用控制台中)在 web 浏览器中查看实时 HTTP 请求和响应的日志。

示例

以下是一个如何将 flutter_http_logger 集成到 Flutter 应用中的简单示例:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_http_logger/flutter_http_logger.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'HTTP Logger Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HttpLoggerExample(),
    );
  }
}

class HttpLoggerExample extends StatefulWidget {
  const HttpLoggerExample({Key? key}) : super(key: key);

  [@override](/user/override)
  _HttpLoggerExampleState createState() => _HttpLoggerExampleState();
}

class _HttpLoggerExampleState extends State<HttpLoggerExample> {
  String _response = "No response yet";

  [@override](/user/override)
  void initState() {
    super.initState();
    // Start the HTTP Logger server
    HttpLog.startServer(context);
  }

  Future<void> _makeGetRequest() async {
    var url = 'https://jsonplaceholder.typicode.com/posts/1';
    var headers = {"Content-Type": "application/json"};

    // Capture start time
    final startTime = DateTime.now();

    // Make the HTTP GET request
    var response = await http.get(Uri.parse(url), headers: headers);

    // Capture end time
    final endTime = DateTime.now();

    // Log the GET request and response
    HttpLog.sendLog(
      method: "GET",
      url: url,
      header: headers,
      statusCode: response.statusCode,
      duration: endTime.difference(startTime).inMilliseconds,
      response: response.body,
    );

    setState(() {
      _response = response.body;
    });
  }

  Future<void> _makePostRequest() async {
    var url = 'https://jsonplaceholder.typicode.com/posts';
    var headers = {"Content-Type": "application/json"};
    var requestBody = '{"title": "foo", "body": "bar", "userId": 1}';

    // Capture start time
    final startTime = DateTime.now();

    // Make the HTTP POST request
    var response =
        await http.post(Uri.parse(url), headers: headers, body: requestBody);

    // Capture end time
    final endTime = DateTime.now();

    // Log the POST request and response
    HttpLog.sendLog(
      method: "POST",
      url: url,
      header: headers,
      request: requestBody,
      statusCode: response.statusCode,
      duration: endTime.difference(startTime).inMilliseconds,
      response: response.body,
    );

    setState(() {
      _response = response.body;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HTTP Logger Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ElevatedButton(
              onPressed: _makeGetRequest,
              child: const Text('Make GET Request'),
            ),
            ElevatedButton(
              onPressed: _makePostRequest,
              child: const Text('Make POST Request'),
            ),
            const SizedBox(height: 20),
            const Text('Response:'),
            Expanded(
              child: SingleChildScrollView(
                child: Text(_response),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用flutter_http_logger插件来记录HTTP网络请求日志的代码示例。

步骤 1: 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_http_logger: ^0.5.0  # 请确保使用最新版本

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

步骤 2: 配置插件

在你的主应用文件中(通常是main.dart),配置flutter_http_logger

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_http_logger/flutter_http_logger.dart';

void main() {
  // 初始化HttpLogger
  HttpLogger.initialize(
    level: LogLevel.BODY, // 可以是 LogLevel.BASIC, LogLevel.HEADERS, LogLevel.BODY
    requestHeaders: ['Authorization'], // 你想记录的请求头
    responseHeaders: ['Content-Type'], // 你想记录的响应头
    logFile: 'http_logs.txt', // 日志文件名
    maxLogFileSize: 1024 * 1024, // 最大日志文件大小(字节)
    maxLogsCount: 5, // 最大日志文件数量
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter HTTP Logger Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _makeRequest,
            child: Text('Make HTTP Request'),
          ),
        ),
      ),
    );
  }

  void _makeRequest() async {
    final client = HttpLogger.createClient();

    final response = await client.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      print('Response body: ${response.body}');
    } else {
      print('Request failed with status code: ${response.statusCode}');
    }
  }
}

解释

  1. 依赖导入:

    • package:http/http.dart 是Flutter中常用的HTTP客户端库。
    • package:flutter_http_logger/flutter_http_logger.dart 是我们要使用的日志记录插件。
  2. 初始化HttpLogger:

    • HttpLogger.initialize 方法用于配置日志记录器。
    • level 参数决定日志记录的详细程度。
    • requestHeadersresponseHeaders 参数分别指定要记录的请求头和响应头。
    • logFile 参数指定日志文件的名称。
    • maxLogFileSizemaxLogsCount 参数控制日志文件的最大大小和数量。
  3. 创建HTTP客户端:

    • 使用 HttpLogger.createClient() 方法创建一个带有日志记录功能的HTTP客户端。
  4. 发起HTTP请求:

    • 使用创建的客户端发起GET请求,并处理响应。

日志查看

日志文件默认保存在应用的文档目录中。你可以使用设备的文件管理器或连接设备到电脑使用ADB等工具查看日志文件。

注意事项

  • 确保你有适当的权限来写入日志文件,特别是在Android和iOS设备上。
  • 根据实际需求调整日志级别和文件配置。

这样,你就可以在Flutter应用中方便地使用flutter_http_logger来记录HTTP网络请求的日志了。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!