Flutter网络请求调试插件e_http_inspector的使用

Flutter网络请求调试插件e_http_inspector的使用

e_http_inspector 是一个用于调试由 dio 包发起的 HTTP 请求的 Flutter 插件。它会在每次调用时显示通知，并在 UI 界面上显示历史 HTTP 调用列表及其详细信息。

特性

• 在每次 HTTP 调用时显示通知。
• 显示历史 HTTP 调用列表及其详细信息。
• 可以将 HTTP 调用详情复制到剪贴板。

进行中功能

• 导出 HTTP 调用为 Postman 格式或 OpenAPI。

开始使用

该插件与 dio 包一起工作。

使用步骤

添加依赖

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

dependencies:
  e_http_inspector: ^1.1.0

然后运行 flutter pub get 来获取新的依赖项。

初始化和配置

在应用启动时初始化 EHttpInspector。确保 _navigatorKey 用于根 MaterialApp 的 navigatorKey。

void main() {
  // 初始化 _navigatorKey 和 _dio
  var _dio = Dio();
  GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  // 初始化 EHttpInspector
  EHttpInspector.initInterceptor(_dio);
  
  // 初始化通知系统
  EHttpInspector.initNotification(_navigatorKey, "Your channel key", "Your channel name", "Your channel description");

  runApp(const MyApp());
}

确保在 MaterialApp 中设置 navigatorKey：

MaterialApp(
  navigatorKey: _navigatorKey,
  // 其他配置
);

使用示例

以下是一个完整的示例，展示了如何使用 e_http_inspector 插件进行 HTTP 请求并查看其调试信息。

import 'dart:convert';
import 'dart:io';

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

// 初始化 Dio 实例
var _dio = Dio();
// 初始化 NavigatorKey
GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  EHttpInspector.initInterceptor(_dio);
  await EHttpInspector.initNotification(_navigatorKey, "EHttpInspector", "EHttpInspector", "EHttpInspector channel");

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: _navigatorKey,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<HttpRequestItem> items = [];

  [@override](/user/override)
  void initState() {
    super.initState();
    items.add(HttpRequestItem(
      method: "POST",
      url: "https://reqres.in/api/users",
      param: {
        "name": "morpheus",
        "job": "leader",
        "id": 651,
        "createdAt": "2022-04-14T02:34:51.527Z"
      },
    ));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("HTTP Inspector Example"),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text(items[index].url),
            subtitle: Text(items[index].method),
            onTap: () async {
              try {
                // 发起 POST 请求
                await _dio.post(
                  items[index].url,
                  options: Options(headers: {
                    HttpHeaders.contentTypeHeader: "application/json",
                  }),
                  data: jsonEncode(items[index].param),
                );
              } catch (e) {
                debugPrint(e.toString());
              }
            },
          );
        },
      ),
    );
  }
}