Flutter网络请求日志记录插件flutter_http_logger的使用
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
更多关于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}');
}
}
}
解释
-
依赖导入:
package:http/http.dart
是Flutter中常用的HTTP客户端库。package:flutter_http_logger/flutter_http_logger.dart
是我们要使用的日志记录插件。
-
初始化HttpLogger:
HttpLogger.initialize
方法用于配置日志记录器。level
参数决定日志记录的详细程度。requestHeaders
和responseHeaders
参数分别指定要记录的请求头和响应头。logFile
参数指定日志文件的名称。maxLogFileSize
和maxLogsCount
参数控制日志文件的最大大小和数量。
-
创建HTTP客户端:
- 使用
HttpLogger.createClient()
方法创建一个带有日志记录功能的HTTP客户端。
- 使用
-
发起HTTP请求:
- 使用创建的客户端发起GET请求,并处理响应。
日志查看
日志文件默认保存在应用的文档目录中。你可以使用设备的文件管理器或连接设备到电脑使用ADB等工具查看日志文件。
注意事项
- 确保你有适当的权限来写入日志文件,特别是在Android和iOS设备上。
- 根据实际需求调整日志级别和文件配置。
这样,你就可以在Flutter应用中方便地使用flutter_http_logger
来记录HTTP网络请求的日志了。