Flutter网络缓存拦截插件network_cache_interceptor的使用

Network Cache Interceptor 是一个为缓存网络请求而设计的自定义Dio拦截器。它在离线时返回缓存的数据，并优化了网络请求处理。

📦 安装

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

dependencies:
  network_cache_interceptor: ^1.2.4

或者使用命令行工具安装：

flutter pub add network_cache_interceptor

🚀 新版本特性（1.2.4）

• 更新缓存逻辑：所有GET请求现在默认被缓存，即使显式指定了 cache: false。这确保了缓存的一致性，同时通过额外选项提供手动控制。

🚀 使用方法

1. 配置 Dio

首先需要配置Dio实例并添加拦截器：

import 'package:dio/dio.dart';
import 'package:network_cache_interceptor/network_cache_interceptor.dart';

void main() {
  final dio = Dio();

  // 添加拦截器
  dio.interceptors.add(
    NetworkCacheInterceptor(
      noCacheStatusCodes: [401, 403],  // 不缓存的状态码
      cacheValidityMinutes: 30,        // 缓存有效时间（分钟）
      getCachedDataWhenError: true,    // 网络错误时获取缓存数据
    ),
  );
}

2. 发起请求

所有GET请求默认会被缓存，但你可以通过 extra['cache'] 覆盖缓存行为：

final response = await dio.get(
  'https://jsonplaceholder.typicode.com/posts',
  options: Options(
    extra: {
      'cache': true,         // 显式启用缓存
      'validate_time': 60,   // 缓存有效时间（分钟）
    },
  ),
);

禁用缓存：

final response = await dio.get(
  'https://jsonplaceholder.typicode.com/posts',
  options: Options(
    extra: {'cache': false}, // 禁用缓存
  ),
);

3. 清除缓存数据

清除数据库中的所有缓存数据：

final cacheInterceptor = NetworkCacheInterceptor();
await cacheInterceptor.clearDatabase();

⚙️ 配置参数

🔧 技术细节

• 缓存逻辑：如果发生网络问题，会自动返回可用的缓存响应。
• 错误日志：所有错误都会通过 log() 记录。
• 数据存储：数据使用SQL数据库本地保存。

🎯 示例代码

完整的示例应用：

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

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

class MyApp extends StatelessWidget {
  final Dio dio = Dio()..interceptors.add(NetworkCacheInterceptor());

  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Network Cache Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Data: ${snapshot.data}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> fetchData() async {
    try {
      final response = await dio.get(
        'https://jsonplaceholder.typicode.com/posts/1',
        options: Options(
          extra: {
            'cache': true,
            'validate_time': 60, // 缓存有效时间（分钟）
          },
        ),
      );
      return response.data.toString();
    } catch (e) {
      return 'Failed to fetch data';
    }
  }
}

这个示例展示了如何在一个Flutter应用中使用 network_cache_interceptor 来缓存网络请求并在UI上显示结果。希望这些信息对你有帮助！