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

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

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

在开发过程中，我们经常需要调试HTTP请求。http_log插件可以帮助你记录和查看这些请求的日志信息。以下是该插件的基本用法。

示例代码

import 'package:http/http.dart';
import 'package:http_log/http_log.dart';

Future<void> main() async {
  // 创建一个LoggingClient实例，设置storeLastRequest为true以存储最后的请求
  final client = LoggingClient(
    Client(),
    storeLastRequest: true,
  );

  // 发送一个POST请求
  final response = await client.post(
    Uri.parse('http://httpbin.org/status/404'),
    headers: {
      'X-My-Header': 'Value',
    },
    body: 'Body',
  );

  // 检查响应状态码是否大于等于400
  if (response.statusCode >= 400) {
    print('请求失败：');
    // 打印原始的HTTP请求信息
    print(client.lastRequest!.toRawHttpRequest());
    // 打印curl命令格式的请求信息
    print(client.lastRequest!.toCurl(bodyFormat: BodyFormat.ascii));
  }
}

输出示例

请求失败：
POST /status/404 HTTP/1.1
Host: httpbin.org
X-My-Header: Value
content-type: text/plain; charset=utf-8

Body
curl \
  -X POST \
  'http://httpbin.org/status/404' \
  -H 'X-My-Header: Value' \
  -H 'content-type: text/plain; charset=utf-8' \
  --data-ascii 'Body'

解释

  1. 创建LoggingClient实例：

    final client = LoggingClient(
  Client(),
  storeLastRequest: true,
);

    这里我们创建了一个LoggingClient实例，并设置了storeLastRequest为true，这样可以存储最近一次的请求信息。

  2. 发送HTTP请求：

    final response = await client.post(
  Uri.parse('http://httpbin.org/status/404'),
  headers: {
    'X-My-Header': 'Value',
  },
  body: 'Body',
);

    使用client.post方法发送一个POST请求到指定的URL，并附带一些头部信息和请求体。

  3. 检查响应状态码：

    if (response.statusCode >= 400) {
  print('请求失败：');
  print(client.lastRequest!.toRawHttpRequest());
  print(client.lastRequest!.toCurl(bodyFormat: BodyFormat.ascii));
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用http_log插件来记录网络请求日志的示例代码。http_log插件能够帮助开发者在开发过程中记录HTTP请求和响应的详细信息，便于调试和排查问题。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  http_log: ^1.0.0  # 请检查最新版本号

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

2. 配置插件

在你的Flutter项目的入口文件（通常是main.dart）中，配置http_log插件。

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

void main() {
  // 初始化HttpLog插件
  HttpLog.init(
    enableRequestLog: true,  // 是否记录请求日志
    enableResponseLog: true, // 是否记录响应日志
    enableRequestBodyLog: true, // 是否记录请求体日志
    enableResponseBodyLog: true, // 是否记录响应体日志
    enablePrettyPrint: true, // 是否美化输出日志
    logLevel: HttpLogLevel.BODY, // 设置日志级别
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Http Log Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _makeRequest,
          child: Text('Make Request'),
        ),
      ),
    );
  }

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

3. 运行项目

运行你的Flutter项目，当你点击按钮触发网络请求时，你应该能够在控制台中看到详细的HTTP请求和响应日志。

4. 日志输出示例

以下是控制台中可能显示的日志输出示例（具体格式取决于HttpLog的配置）：

I/flutter ( 5678): [HttpLog] ---------- REQUEST ----------
I/flutter ( 5678): [HttpLog] Method: GET
I/flutter ( 5678): [HttpLog] URL: https://jsonplaceholder.typicode.com/posts/1
I/flutter ( 5678): [HttpLog] Headers: {
I/flutter ( 5678):     content-type: application/json
I/flutter ( 5678): }
I/flutter ( 5678): [HttpLog] Body: (empty)
I/flutter ( 5678): [HttpLog] ---------- RESPONSE ----------
I/flutter ( 5678): [HttpLog] Status Code: 200
I/flutter ( 5678): [HttpLog] Headers: {
I/flutter ( 5678):     content-type: application/json; charset=utf-8
I/flutter ( 5678):     date: Tue, 01 Oct 2023 12:34:56 GMT
I/flutter ( 5678):     server: nginx/1.19.2
I/flutter ( 5678):     content-length: 503
I/flutter ( 5678):     connection: keep-alive
I/flutter ( 5678): }
I/flutter ( 5678): [HttpLog] Body: {
I/flutter ( 5678):     "userId": 1,
I/flutter ( 5678):     "id": 1,
I/flutter ( 5678):     "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
I/flutter ( 5678):     "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
I/flutter ( 5678): }

以上代码展示了如何在Flutter项目中集成并使用http_log插件来记录网络请求的详细日志信息。希望这对你有所帮助！

回到顶部