Flutter网络请求与缓存插件dio_http_cache的使用

dio_http_cache 是一个为 Flutter 中的 Dio HTTP 客户端提供的缓存库。它结合了磁盘缓存（基于 sqflite）和内存缓存（基于 LRU 策略），帮助开发者在应用中更高效地处理网络请求和数据缓存。

添加依赖

首先，在 pubspec.yaml 文件中添加 dio_http_cache 依赖：

dependencies:
  dio: ^4.0.0 # 最新的Dio版本
  dio_http_cache: ^0.2.x # latest version

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

快速入门

1. 添加拦截器到 Dio 实例

在你的 Dio 实例中添加 dio_http_cache 的拦截器：

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

void main() {
  var dio = Dio();
  dio.interceptors.add(
    DioCacheManager(CacheConfig(baseUrl: "http://www.example.com")).interceptor,
  );

  // 示例请求
  dio.get(
    "http://www.example.com",
    options: buildCacheOptions(Duration(days: 7)),
  ).then((response) {
    print(response.data);
  });
}

2. 设置请求的最大缓存时间

你可以为每个请求设置最大缓存时间：

dio.get(
  "http://www.example.com",
  options: buildCacheOptions(Duration(days: 7)),
);

高级用法

自定义配置

你可以通过 buildCacheOptions 方法来自定义缓存选项：

• primaryKey: 默认情况下，host + path 作为 primaryKey，你也可以自定义。
• subKey: 默认情况下，查询参数 (data 或 queryParameters) 作为 subKey，你可以在需要时指定 subKey。

dio.get(
  "http://www.example.com",
  queryParameters: {'k': 'keyword'},
  options: buildCacheOptions(
    Duration(days: 7),
    subKey: "page=1",
    maxStale: Duration(days: 10),
  ),
);

使用 CacheConfig 配置默认参数

你可以通过 CacheConfig 来配置一些默认参数：

var cacheConfig = CacheConfig(
  baseUrl: "http://www.example.com",
  defaultMaxAge: Duration(days: 7),
  defaultMaxStale: Duration(days: 10),
);

var dio = Dio();
dio.interceptors.add(DioCacheManager(cacheConfig).interceptor);

清除过期缓存

你可以选择忽略它，因为它是自动清除的。但如果你想手动清除：

await DioCacheManager.clearExpired();

删除缓存

根据 primaryKey 和 subKey 删除缓存：

_dioCacheManager.deleteByPrimaryKeyAndSubKey(
  _url,
  requestMethod: "GET",
  queryParameters: {'k': keyword},
);

清除所有缓存

无论缓存是否过期，都可以清除所有缓存：

_dioCacheManager.clearAll();

检查数据来源

你可以检查响应头来判断数据是从缓存还是网络获取的：

if (null != response.headers.value(DIO_CACHE_HEADER_KEY_DATA_SOURCE)) {
  // 数据来自缓存
} else {
  // 数据来自网络
}

示例代码

以下是一个完整的示例代码，展示了如何使用 dio_http_cache 进行网络请求和缓存管理：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DioHttpCache Example',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Dio _dio;
  final String url = "https://jsonplaceholder.typicode.com/posts";

  @override
  void initState() {
    super.initState();
    _dio = Dio();
    _dio.interceptors.add(
      DioCacheManager(CacheConfig(baseUrl: "https://jsonplaceholder.typicode.com")).interceptor,
    );
  }

  Future<void> fetchData() async {
    try {
      var response = await _dio.get(
        url,
        options: buildCacheOptions(
          Duration(days: 7),
          maxStale: Duration(days: 10),
        ),
      );
      print('Data from ${response.headers.value("dio-cache-header-key-data-source") ?? "network"}');
      print(response.data);
    } catch (e) {
      print(e);
    }
  }

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

在这个示例中，我们创建了一个简单的 Flutter 应用程序，使用 dio_http_cache 对网络请求进行缓存管理。点击按钮后会发起一个 GET 请求，并打印出数据来源和请求结果。

希望这个示例能帮助你更好地理解和使用 dio_http_cache 插件！