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

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

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

dio_cache_interceptor_db_store是基于Drift（之前称为moor）实现的缓存存储方案，它为Dio提供了持久化的缓存能力。下面将详细介绍如何在Flutter项目中使用该插件进行网络请求缓存。

一、环境准备

1. Android - iOS支持

要在Android和iOS上使用此插件，你需要在项目的pubspec.yaml文件中添加sqlite3_flutter_libs依赖项，并确保其版本不低于0.4.0+1。

dependencies:
  sqlite3_flutter_libs: ^0.4.0+1

2. Desktop支持

对于桌面平台的支持，请参考Drift官方文档来完成安装配置。

3. Web支持

在Web端使用时，需要你自己提供sqlite3.wasm库以及drift_worker.js文件。由于这些文件不会随包一起分发，因此你可以根据Drift Web指南获取更多信息并进行相应设置。

二、集成与使用示例

接下来是一个完整的示例demo，展示了如何结合dio_cache_interceptor和dio_cache_interceptor_db_store来实现网络请求缓存功能：

1. 添加依赖

首先，在pubspec.yaml中添加以下依赖：

dependencies:
  dio: ^5.0.0 # 确保使用兼容版本
  dio_cache_interceptor: ^2.0.0
  dio_cache_interceptor_db_store: ^2.0.0
  path_provider: ^2.0.0
  sqlite3_flutter_libs: ^0.4.0+1

2. 编写代码

创建一个新的Dart文件，例如main.dart，然后按照如下方式编写代码：

import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:dio_cache_interceptor_db_store/dio_cache_interceptor_db_store.dart';
import 'package:path_provider/path_provider.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 获取临时目录路径
  final dir = await getTemporaryDirectory();
  
  // 初始化数据库缓存存储
  final cacheStore = DbCacheStore(databasePath: dir.path, logStatements: true);

  // 配置缓存选项
  final cacheOptions = CacheOptions(
    store: cacheStore,
    hitCacheOnErrorExcept: [], // 对于离线情况下的行为控制
  );

  // 创建Dio实例并添加缓存拦截器
  final dio = Dio()
    ..interceptors.add(DioCacheInterceptor(options: cacheOptions));

  // 发起GET请求
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dio Cache Example'),
        ),
        body: Center(
          child: Text('Check console for network request results.'),
        ),
      ),
    );
  }
}

这段代码展示了如何通过dio_cache_interceptor_db_store为Dio添加持久化缓存功能。我们首先初始化了基于SQLite的缓存存储，并将其配置到Dio的拦截器中。之后，当发起网络请求时，如果存在缓存数据，则会优先返回缓存结果；否则，将从服务器获取最新数据并保存到缓存中。

请注意，实际开发过程中还需要考虑更多细节，比如错误处理、缓存策略定制等。此外，考虑到性能问题，建议合理设置缓存有效期及清理机制。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 dio_cache_interceptor_db_store 插件在 Flutter 中进行网络请求缓存的示例代码。这个插件允许你将 HTTP 请求的响应缓存到 SQLite 数据库中，从而提高应用的性能和用户体验。

首先，确保在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  dio_cache_interceptor: ^3.0.0
  dio_cache_interceptor_db_store: ^0.3.0
  sqflite: ^2.0.0+4 # dio_cache_interceptor_db_store 依赖 sqflite

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

接下来，在你的 Dart 文件中配置和使用 dio_cache_interceptor_db_store：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';
import 'package:dio_cache_interceptor_db_store/dio_cache_interceptor_db_store.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Network Request Caching Example'),
        ),
        body: Center(
          child: FutureBuilder<void>(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                } else {
                  return Text('Data: ${snapshot.data}');
                }
              } else {
                return CircularProgressIndicator();
              }
            },
          ),
        ),
      ),
    );
  }

  Future<void> fetchData() async {
    // 获取应用的数据库目录
    final Directory databaseDirectory = await getApplicationDocumentsDirectory();
    final String databasePath = join(databaseDirectory.path, 'dio_cache.db');

    // 配置 DBStore
    final DbCacheStore dbCacheStore = DbCacheStore(databasePath);

    // 配置 CacheOptions
    final CacheOptions defaultCacheOptions = CacheOptions(
      store: dbCacheStore,
      maxStale: Duration(days: 7),
    );

    // 配置 Dio
    final Dio dio = Dio(
      BaseOptions(
        baseUrl: 'https://jsonplaceholder.typicode.com/',
      ),
    )..interceptors.add(CacheInterceptor(options: defaultCacheOptions));

    try {
      // 发起网络请求
      final Response<String> response = await dio.get('/posts/1');
      print('Response data: ${response.data}');
      // 这里你可以处理响应数据，例如将其存储到状态中
    } catch (e) {
      print('Error fetching data: $e');
      // 处理错误
    }
  }
}

解释

  1. 依赖导入：

    • dio：用于发起 HTTP 请求。
    • dio_cache_interceptor：用于缓存 HTTP 请求和响应。
    • dio_cache_interceptor_db_store：用于将缓存存储到 SQLite 数据库中。
    • sqflite 和 path_provider：用于管理 SQLite 数据库文件。

  2. 配置数据库存储：

    • 使用 getApplicationDocumentsDirectory() 获取应用的文档目录。
    • 使用 join() 方法生成数据库文件的路径。
    • 创建 DbCacheStore 实例，传入数据库路径。

  3. 配置缓存选项：

    • 创建 CacheOptions 实例，传入 DbCacheStore 实例和其他缓存选项（如 maxStale）。

  4. 配置 Dio：

    • 创建 Dio 实例，并添加 CacheInterceptor。

  5. 发起网络请求：

    • 使用 dio.get() 方法发起 HTTP GET 请求。

这个示例展示了如何使用 dio_cache_interceptor_db_store 插件来缓存网络请求的响应。你可以根据实际需求调整缓存选项和处理逻辑。

回到顶部