Flutter网络请求与数据缓存插件stash_dio的使用

stash_dio 是一个结合了 stash 和 dio 的扩展，提供了缓存拦截器功能，使得可以从缓存中获取响应而不需要每次都访问后端系统。本文将介绍如何在Flutter项目中使用 stash_dio。

概述

stash_dio 提供了一个Dio拦截器，可以在网络请求时使用缓存来减少不必要的网络请求。它依赖于 stash 库进行缓存管理，并且可以与 dio 网络库无缝集成。

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 stash_dio 依赖：

dependencies:
    stash_dio: ^x.x.x

然后运行以下命令安装依赖：

dart pub get

最后，导入所需的包：

import 'package:stash/stash_api.dart';
import 'package:stash_dio/stash_dio.dart';

使用示例

下面是一个完整的示例代码，展示了如何使用 stash_dio 来实现网络请求和数据缓存：

import 'package:dio/dio.dart';
import 'package:stash/stash_api.dart';
import 'package:stash_dio/stash_dio.dart';
import 'package:stash_memory/stash_memory.dart';

class Task {
  final int id;
  final String title;
  final bool completed;

  Task({required this.id, required this.title, this.completed = false});

  // 创建一个Task对象从json映射
  factory Task.fromJson(Map<String, dynamic> json) => Task(
      id: json['id'] as int,
      title: json['title'] as String,
      completed: json['completed'] as bool);

  // 创建一个json映射从Task对象
  Map<String, dynamic> toJson() =>
      <String, dynamic>{'id': id, 'title': title, 'completed': completed};

  @override
  String toString() {
    return 'Task $id: "$title" is ${completed ? "completed" : "not completed"}';
  }
}

void main() async {
  // 创建一个内存存储
  final store = await newMemoryCacheStore();
  
  // 创建一个缓存实例
  final cache = await store.cache(eventListenerMode: EventListenerMode.synchronous)
    ..on<CacheEntryCreatedEvent>().listen(
        (event) => print('Key "${event.entry.key}" added to the cache'));

  // 配置Dio客户端
  final dio = Dio(BaseOptions(baseUrl: 'https://jsonplaceholder.typicode.com'))
    ..interceptors.addAll([
      cache.interceptor('/todos/1'),
      LogInterceptor(
          requestHeader: false,
          requestBody: false,
          responseHeader: false,
          responseBody: false)
    ]);

  // 第一次调用，执行请求并接收响应
  final task1 = await dio
      .get('/todos/1')
      .then((Response<dynamic> response) => Task.fromJson(response.data));
  print(task1);

  // 第二次调用，响应将从缓存中获取
  final task2 = await dio
      .get('/todos/1')
      .then((Response<dynamic> response) => Task.fromJson(response.data));
  print(task2);
}

在这个示例中，我们首先创建了一个内存存储和缓存实例。然后配置了一个Dio客户端，并添加了缓存拦截器。当我们第一次发起GET请求时，会实际发送网络请求并保存结果到缓存；第二次发起相同请求时，直接从缓存中读取数据。

通过这种方式，你可以有效地减少不必要的网络请求，提升应用性能。

songsunli 1楼•3 个月前

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

在Flutter中，使用stash_dio插件可以方便地进行网络请求和数据缓存。stash_dio是基于dio库的扩展，提供了强大的缓存功能。以下是一个示例代码，展示了如何使用stash_dio进行网络请求和数据缓存。

首先，确保在你的pubspec.yaml文件中添加stash和stash_dio依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
  stash: ^3.0.0
  stash_dio: ^3.0.0

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

接下来，编写一个Flutter应用，展示如何使用stash_dio：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:stash/stash_api.dart';
import 'package:stash_dio/stash_dio.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('stash_dio 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();

  // 配置缓存管理器
  final CacheManager cacheManager = CacheManager(Config(
    "my_cache",
    maxNrOfCacheObjects: 100,
    maxAge: Duration(days: 7),
    store: InMemoryStore(),
  ));

  // 创建stash_dio实例
  final StashDio stashDio = StashDio(dio, cacheManager: cacheManager);

  try {
    // 发起网络请求，并启用缓存
    final Response<String> response = await stashDio.get(
      'https://jsonplaceholder.typicode.com/posts/1',
      options: Options(
        headers: {
          HttpHeaders.acceptHeader: 'application/json',
        },
        extra: {
          'cache_key': 'post_1', // 设置缓存键
        },
      ),
    );

    // 返回响应数据
    return response.data!;
  } catch (e) {
    // 处理异常
    throw e;
  }
}

在这个示例中，我们做了以下几件事：

创建Dio实例：用于发起网络请求。
配置CacheManager：设置缓存配置，如缓存大小、最大存活时间和存储方式（这里使用的是内存存储）。
创建StashDio实例：将Dio实例和CacheManager结合起来，创建StashDio实例，用于发起带缓存功能的网络请求。
发起网络请求：使用stashDio.get方法发起GET请求，并通过options.extra设置缓存键。这样，相同缓存键的请求将从缓存中获取数据，而不是每次都发起网络请求。

这个示例展示了如何使用stash_dio在Flutter中进行网络请求和数据缓存。你可以根据实际需求调整缓存配置和请求逻辑。