Flutter网络状态监听插件dio_internet_interceptor的使用

dio_internet_interceptor 是一个用于处理无网络时 API 请求的 Dio 拦截器插件。它可以帮助你：

• 检查网络状态
• 在无网络时存储请求
• 提供无网络回调以处理离线数据的增删改查（CRUD）操作
• 响应回调以更新本地数据库中的远程新数据
• 重试之前因无网络而失败的请求

使用示例

以下是一个完整的示例，展示如何在 Flutter 应用中使用 dio_internet_interceptor 插件。

示例代码

import 'package:dio/dio.dart';
import 'package:dio_internet_interceptor/dio_internet_interceptor.dart';
import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:path_provider/path_provider.dart' as path_provider;

final dio = Dio();

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 Hive 数据库
  final appDocumentDir = await path_provider.getApplicationDocumentsDirectory();
  Hive.init(appDocumentDir.path);
  
  // 添加 Dio 拦截器
  dio.interceptors.add(DioInternetInterceptor(
    onDioRequest: (options) {
      options.isOfflineApi = true; // 标记为离线请求
      return options;
    },
    offlineResponseHandler: (response) {
      print('离线响应: $response');
    },
    onDioError: (DioException err, ErrorInterceptorHandler handler) {
      return DioExceptionHandler(err: err, handler: handler);
    },
  ));
  
  // 设置 Dio 的默认请求头
  dio.options.headers['key'] = 'value';
  
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 发起网络请求
      dio.post(
        'https://httpbin.org/post',
        data: {"bodyKey": "bodyValue", "key": "value"},
        onSendProgress: (count, total) {
          print('上传进度: $count / $total');
        },
      );
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击了按钮多少次:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码说明

1. 初始化 Hive 数据库：

   final appDocumentDir = await path_provider.getApplicationDocumentsDirectory();
   Hive.init(appDocumentDir.path);
   

   这里使用 Hive 来存储离线数据。Hive 是一个轻量级的 NoSQL 数据库，适合存储简单的结构化数据。

2. 添加 Dio 拦截器：

   dio.interceptors.add(DioInternetInterceptor(
     onDioRequest: (options) {
       options.isOfflineApi = true;
       return options;
     },
     offlineResponseHandler: (response) {
       print('离线响应: $response');
     },
     onDioError: (DioException err, ErrorInterceptorHandler handler) {
       return DioExceptionHandler(err: err, handler: handler);
     },
   ));
   

   • onDioRequest：在请求发送前标记为离线请求。
   • offlineResponseHandler：处理离线请求的响应。
   • onDioError：处理网络错误。

3. 发起网络请求：

   dio.post(
     'https://httpbin.org/post',
     data: {"bodyKey": "bodyValue", "key": "value"},
     onSendProgress: (count, total) {
       print('上传进度: $count / $total');
     },
   );