Flutter网络请求拦截插件dio_interceptor_plus的使用

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

Flutter网络请求拦截插件dio_interceptor_plus的使用

Dio Interceptor Plus 是一个强大且可定制的 Dio 拦截器,用于在 Dart 和 Flutter 应用程序中记录 HTTP 请求和响应。它可以帮助开发者调试和理解应用程序与 API 的交互情况。

安装

在你的 pubspec.yaml 文件中添加以下内容:

dependencies:
  dio_interceptor_plus: [latest_version]

然后运行以下命令以安装依赖:

$ flutter pub get

使用

导入包

在你的 Dart 代码中导入 dio_interceptor_plus 包:

import 'package:dio_interceptor_plus/dio_interceptor_plus.dart';

示例代码

下面是一个完整的示例代码,展示了如何使用 dio_interceptor_plus 插件来拦截并记录 HTTP 请求和响应:

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

void main() async {
  // 创建 Dio 实例
  final dio = Dio();

  // 添加日志拦截器以记录请求和响应
  dio.interceptors.add(LoggingInterceptor());

  // 示例 HTTP 请求
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print('Response Data: ${response.data}');
  } catch (e) {
    // 处理错误
    debugPrint('Error: $e');
  }
}

输出示例

当执行上述代码时,控制台将输出如下信息:

🚀 🌐 Request 🌐 🚀
🔗 URL: https://jsonplaceholder.typicode.com/posts/1
🤔 Method: GET
📋 Headers: {}
🔍 Query Parameters: {}
📤 Request Data: null
---------------------
✅ 🌐 Response 🌐 ✅
🔗 URL: https://jsonplaceholder.typicode.com/posts/1
🔒 Status Code: 200
📋 Headers: {"cache-control":["max-age=43200"],"content-type":["application/json; charset=utf-8"],"expires":["-1"],"pragma":["no-cache"]}
📥 Response Data: {userId: 1, id: 1, title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit, body: quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto}
-----------------------

配置

你可以通过调整 LoggingInterceptor 类来自定义日志行为。以下是几个可以配置的选项:

  • logPrint: 自定义日志打印函数,默认为 debugPrint
  • request: 是否记录请求,默认为 true
  • requestHeader: 是否记录请求头,默认为 true
  • requestBody: 是否记录请求体,默认为 true
  • response: 是否记录响应,默认为 true
  • responseHeader: 是否记录响应头,默认为 true
  • responseBody: 是否记录响应体,默认为 true
  • error: 是否记录错误,默认为 true
  • compact: 是否启用紧凑模式,默认为 false

例如,自定义日志拦截器:

dio.interceptors.add(
  LoggingInterceptor(
    request: true,
    requestBody: true,
    responseBody: true,
    logPrint: (object) {
      debugPrint(object.toString());
    },
  ),
);

特性

  • 全面的日志记录:捕获每个 HTTP 请求及其对应的响应的详细信息。
  • 可定制的输出:根据需要启用或禁用特定细节。
  • 易于集成:与流行的 Dio HTTP 客户端库无缝集成。
  • 多功能性:适用于 Dart 和 Flutter 项目。

许可证

此包遵循 MIT License。详情请参阅 LICENSE 文件。

希望这个指南能帮助你更好地理解和使用 dio_interceptor_plus 插件。如果你有任何问题或建议,请随时提问!


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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用dio_interceptor_plus插件来进行网络请求拦截的示例代码。这个插件允许你拦截并处理HTTP请求和响应,非常适合用于日志记录、认证处理、错误处理等场景。

首先,确保你的pubspec.yaml文件中已经添加了diodio_interceptor_plus依赖:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0 # 请根据需要调整版本号
  dio_interceptor_plus: ^2.0.0 # 请根据需要调整版本号

然后,运行flutter pub get来获取这些依赖。

接下来,在你的Flutter项目中创建一个拦截器类,并配置Dio实例来使用这个拦截器。以下是一个简单的示例:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Dio _dio;

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

  void setUpDio() {
    var interceptors = [
      // 添加一个请求拦截器
      RequestInterceptor((options, handler) {
        // 在发送请求之前做一些处理,比如添加token
        options.headers['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';

        // 打印请求信息
        print('Sending request: ${options.method} ${options.path}');
        return handler.next(options);
      }),

      // 添加一个响应拦截器
      ResponseInterceptor((response, handler) async {
        // 在接收响应之前做一些处理,比如检查状态码
        if (response.statusCode == 200) {
          // 打印响应信息
          print('Received response: ${response.statusCode} ${response.data}');
          return handler.next(response);
        } else {
          // 处理错误响应
          print('Error: ${response.statusCode} ${response.message}');
          throw DioError(
            response: response,
            type: DioErrorType.RESPONSE,
            error: 'Server error',
          );
        }
      }),

      // 添加一个错误拦截器
      ErrorInterceptor((error, handler) async {
        // 处理网络错误
        print('Error occurred: ${error.message}');
        return handler.next(error);
      }),
    ];

    _dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com', // 替换为你的API基础URL
    ))..interceptors.addAll(interceptors);
  }

  void fetchData() async {
    try {
      var response = await _dio.get('/endpoint'); // 替换为你的API端点
      print('Data fetched: ${response.data}');
    } catch (e) {
      print('Fetch data failed: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dio Interceptor Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个Dio实例,并为其添加了三个拦截器:

  1. 请求拦截器:在发送请求之前,我们为请求头添加了一个Authorization字段,并打印了请求信息。
  2. 响应拦截器:在接收响应之前,我们检查了响应的状态码,并打印了响应信息。如果状态码不是200,则抛出一个DioError
  3. 错误拦截器:在处理网络错误时,我们打印了错误信息。

你可以根据自己的需求对这些拦截器进行扩展和修改。例如,你可以在请求拦截器中添加更多的请求头,或者在响应拦截器中处理更多的状态码和响应数据。

回到顶部