Flutter网络请求缓存修复插件dio_http_cache_fix的使用

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

Flutter网络请求缓存修复插件dio_http_cache_fix的使用

dio-http-cache 是一个用于 Dio ( http 客户端) 的缓存库。类似于 Android 中的 Rxcache。

dio-http-cache 使用 sqflite 作为磁盘缓存，并使用 LRU 策略作为内存缓存。

灵感来源于 flutter_cache_manager。

添加依赖

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

dependencies:
  dio_http_cache: ^0.3.x #最新版本

快速开始

1. 在 Dio 中添加 dio-http-cache 拦截器

dio.interceptors.add(DioCacheManager(CacheConfig(baseUrl: "http://www.google.com")).interceptor);

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

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

高级用法

自定义配置通过 buildCacheOptions

primaryKey

默认情况下，host + path 用作 primaryKey，也可以自定义它。

buildCacheOptions(Duration(days: 7), primaryKey: "custom_key")

subKey

默认情况下，查询（data 或 queryParameters）用作 subKey，必要时可以指定 subKey。

buildCacheOptions(Duration(days: 7), subKey: "page=1")

maxAge

设置缓存时间。如果值为 null 或未设置，则会尝试从响应头获取 maxAge 和 maxStale。

buildCacheOptions(Duration(days: 7), maxAge: Duration(days: 7))

maxStale

设置过期时间。在错误发生（如 500, 404）之前，如果超过最大过期时间，尝试返回缓存。

buildCacheOptions(Duration(days: 7), maxStale: Duration(days: 10))

forceRefresh

默认值为 false。

buildCacheOptions(Duration(days: 7), forceRefresh: true)
  • 先从网络获取数据。
  • 如果从网络获取数据成功，则存储或刷新缓存。
  • 如果从网络获取数据失败或没有网络可用，则尝试从缓存获取数据而不是报错。

使用 CacheConfig 配置默认参数

baseUrl

它是可选的；如果没有在 CacheConfig 中设置 baseUrl，当你调用 deleteCache 时，你需要提供完整的路径，例如 "https://www.google.com/search?q=hello"，而不是只提供 "search?q=hello"。

encrypt / decrypt

这两个必须一起使用来加密磁盘缓存数据，你也可以在这里压缩数据。

defaultMaxAge

使用 Duration(day:7) 作为默认值。

defaultMaxStale

与 defaultMaxAge 类似。

databasePath

数据库路径。

databaseName

数据库名称。

skipMemoryCache

默认值为 false。

skipDiskCache

默认值为 false。

maxMemoryCacheCount

默认值为 100。

defaultRequestMethod

默认使用 “POST”，它将用于 delete caches。

diskStore

自定义磁盘存储。

如何清除过期缓存

  • 只需忽略它，这是自动的。
  • 但是如果你坚持这样做：DioCacheManager.clearExpired();

如何删除缓存

删除本地缓存（仅匹配 primaryKey）

// 自动解析 primaryKey 从路径
_dioCacheManager.deleteByPrimaryKey(path, requestMethod: "POST");

当 primaryKey 和 subKey 匹配时删除本地缓存

// 当 primaryKey 和 subKey 匹配时删除本地缓存
_dioCacheManager.deleteByPrimaryKeyAndSubKey(path, requestMethod: "GET");

重要提示：如果你在请求 HTTP 接口时有额外的参数，你必须带上它们，例如：

_dio.get(_url, queryParameters: {'k': keyword}, 
	options: buildCacheOptions(Duration(hours: 1)))
// 删除缓存：
_dioCacheManager.deleteByPrimaryKeyAndSubKey(_url, requestMethod: "GET", queryParameters:{'k': keyword}); 

_dio.post(_url, data: {'k': keyword}, 
	options: buildCacheOptions(Duration(hours: 1)))
// 删除缓存：
_dioCacheManager.deleteByPrimaryKeyAndSubKey(_url, requestMethod: "POST", data:{'k': keyword});

通过 primaryKey 和可选的 subKey 删除本地缓存

// 通过 primaryKey 和可选的 subKey 删除本地缓存
_dioCacheManager.delete(primaryKey,{subKey,requestMethod});

如何清除所有缓存（过期或未过期）

_dioCacheManager.clearAll();

如何知道数据是否来自缓存

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

示例：maxAge 和 maxStale

_dio.post(
	"https://www.example.com",
	data: {'k': "keyword"},
	options:buildCacheOptions(
  		Duration(days: 3), 
  		maxStale: Duration(days: 7), 
	)
)
  • 0 ~ 3 天：直接从缓存返回数据（与网络无关）。
  • 3 ~ 7 天：
    • 先从网络获取数据。
    • 如果从网络获取数据成功，则刷新缓存。
    • 如果从网络获取数据失败或没有网络可用，则尝试从缓存获取数据而不是报错。
  • 7 ~ ∞ 天：不再使用缓存，缓存将在适当的时候被删除。

许可证

Copyright 2019 Hurshi

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用dio_http_cache_fix插件来进行网络请求缓存修复的示例代码。这个插件是对dio和dio_http_cache的扩展，用于解决一些已知的缓存问题。

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

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.4 # 请检查最新版本
  dio_http_cache: ^0.4.4 # 请检查最新版本
  dio_http_cache_fix: ^x.y.z # 替换为最新版本号

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

接下来，在你的Flutter项目中配置和使用dio_http_cache_fix。以下是一个完整的示例：

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

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

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

Future<String> fetchData() async {
  // 创建 Dio 实例
  final Dio dio = Dio();

  // 配置 HttpCache
  final CacheOptions defaultCacheOptions = CacheOptions(
    store: InMemoryCacheStore(), // 使用内存缓存，实际项目中可以使用持久化存储
    maxStale: Duration(days: 7),
  );

  // 使用 dio_http_cache 插件
  dio.interceptors.add(HttpCacheInterceptor(options: defaultCacheOptions));

  // 使用 dio_http_cache_fix 插件修复缓存问题
  dio.interceptors.add(FixCacheInterceptor());

  // 发起网络请求
  try {
    Response<String> response = await dio.get('https://jsonplaceholder.typicode.com/posts/1');
    return response.data;
  } catch (e) {
    throw e;
  }
}

代码解释：

  1. 依赖引入：

    • dio：用于发起HTTP请求。
    • dio_http_cache：用于HTTP请求的缓存。
    • dio_http_cache_fix：用于修复dio_http_cache中的已知问题。

  2. 创建Dio实例：

    • 使用Dio()创建一个新的Dio实例。

  3. 配置HttpCache：

    • CacheOptions：配置缓存选项，例如存储方式和最大陈旧时间。
    • InMemoryCacheStore()：使用内存存储缓存，实际项目中可以根据需要使用持久化存储。

  4. 添加拦截器：

    • HttpCacheInterceptor：添加HTTP缓存拦截器。
    • FixCacheInterceptor：添加用于修复缓存问题的拦截器。

  5. 发起网络请求：

    • 使用dio.get方法发起GET请求，并返回响应数据。

这个示例展示了如何在Flutter项目中使用dio_http_cache_fix插件进行网络请求缓存的修复。确保你已经正确配置了依赖，并根据需要调整缓存选项和请求URL。

回到顶部