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

Awesome Dio Interceptor

Awesome Dio Interceptor 是一个简单的Dio日志拦截器（主要受内置的Dio LogInterceptor启发），它具有着色功能和JSON格式化，使您可以获得更好的可读输出。

Features

可定制、可最小化、带有颜色的日志输出 🔥
JSON格式化 💪
支持漂亮的FormData输出（字段和文件） ⚡️

Output Samples

以下是该插件的一些输出示例。最后两张图片已被最小化，因此我们可以更好地查看最重要的日志（默认启用，可以禁用）

Install

在您的pubspec.yaml中添加依赖：

dependencies:
  awesome_dio_interceptor: ^latest_version # 请替换为最新版本号

Usage

只需将AwesomeDioInterceptor添加到您的Dio拦截器列表中即可：

dio.interceptors.add(
  AwesomeDioInterceptor(
    // 禁用请求头和超时日志以最小化输出。
    // 可选，默认为true
    logRequestTimeout: false,
    logRequestHeaders: false,
    logResponseHeaders: false,

    // 可选，默认为'dart:developer'包中的'log'函数。
    logger: debugPrint,
  ),
);

示例代码

以下是一个完整的示例应用程序，展示了如何使用awesome_dio_interceptor来发送HTTP GET请求，并在控制台中查看格式化的日志输出。

import 'dart:io';

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Awesome Dio Interceptor'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            final dio = Dio(
              BaseOptions(
                headers: {
                  HttpHeaders.contentTypeHeader: "application/json",
                  HttpHeaders.acceptHeader: "application/json"
                },
              ),
            );

            dio.interceptors.add(
              AwesomeDioInterceptor(
                logRequestHeaders: false,
                logRequestTimeout: false,
                logResponseHeaders: false,
              ),
            );

            try {
              await dio.get(
                'https://jsonplaceholder.typicode.com/posts/1',
              );
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Request Sent Successfully!')),
              );
            } catch (e) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Failed to send request: $e')),
              );
            }
          },
          child: const Text('Send Request'),
        ),
      ),
    );
  }
}

在这个例子中，当用户点击按钮时，会触发一个GET请求到https://jsonplaceholder.typicode.com/posts/1，并使用AwesomeDioInterceptor来捕获和格式化请求和响应日志。如果请求成功，将显示一个成功的Snackbar消息；如果失败，则显示错误信息。

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

eggper 1楼•3 天前作者

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

当然，下面是一个关于如何在Flutter项目中使用awesome_dio_interceptor插件进行网络请求拦截的示例代码。这个插件允许你在发送请求之前和接收响应之后进行拦截和处理。

首先，确保你已经在pubspec.yaml文件中添加了dio和awesome_dio_interceptor的依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  awesome_dio_interceptor: ^4.0.0

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

接下来，我们来看一个完整的示例，展示如何使用awesome_dio_interceptor来拦截和处理网络请求。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dio Interceptor Example'),
        ),
        body: Center(
          child: NetworkRequestDemo(),
        ),
      ),
    );
  }
}

class NetworkRequestDemo extends StatefulWidget {
  @override
  _NetworkRequestDemoState createState() => _NetworkRequestDemoState();
}

class _NetworkRequestDemoState extends State<NetworkRequestDemo> {
  late Dio _dio;

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

  void setupDio() {
    BaseOptions options = BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com/',
    );

    // 创建Dio实例
    _dio = Dio(options);

    // 创建拦截器
    var interceptors = <Interceptor>[
      // 请求拦截器
      RequestInterceptor(
        onRequest: (RequestOptions options) async {
          // 在这里可以修改请求选项，比如添加token
          options.headers['Authorization'] = 'Bearer YOUR_ACCESS_TOKEN';
          print('Sending request: ${options.path}');
          // 返回true继续请求，返回false则取消请求
          return true;
        },
        onError: (DioError err) async {
          // 对请求错误做些什么
          print('Request Error: ${err.message}');
          return err; // 返回err继续抛出错误
        },
      ),
      // 响应拦截器
      ResponseInterceptor(
        onResponse: (Response response) async {
          // 在这里可以处理响应数据
          print('Received response: ${response.data}');
          // 返回response继续，返回被修改过的response则数据会被修改
          return response;
        },
        onError: (DioError err) async {
          // 对响应错误做些什么
          print('Response Error: ${err.message}');
          return err; // 返回err继续抛出错误
        },
      ),
    ];

    // 添加拦截器到Dio实例
    _dio.interceptors.addAll(interceptors);
  }

  void fetchData() async {
    try {
      Response response = await _dio.get('/posts/1');
      print('Data: ${response.data}');
      // 在这里更新UI
    } catch (e) {
      print('Error fetching data: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: fetchData,
      child: Text('Fetch Data'),
    );
  }
}

在这个示例中，我们创建了一个Dio实例，并添加了两个拦截器：一个请求拦截器和一个响应拦截器。请求拦截器在发送请求之前添加了一个Authorization头，响应拦截器在接收到响应后打印了响应数据。

你可以根据需要修改拦截器中的逻辑，比如添加日志、修改请求/响应数据、处理错误等。

希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。