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

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

cached_http_client

一个用于在Flutter项目中进行HTTP请求并自动缓存的包。

特性

  • 自动缓存：为相同的请求缓存响应以减少网络使用并提高性能。
  • 自定义缓存时长：配置响应存储在缓存中的时间长度。
  • 离线支持：当设备离线时检索缓存响应。
  • 可插拔的存储选项：选择内存或文件为基础的缓存存储。
  • 中间件支持：用于自定义请求/响应处理。

安装

要在你的Flutter项目中使用cached_http_client，在pubspec.yaml文件中添加以下依赖：

dependencies:
  cached_http_client: ^0.0.1

然后运行：

flutter pub get

使用

基本示例

以下是一个简单的示例，演示如何使用CachedHttpClient进行带缓存的HTTP请求。

lib/main.dart

import 'package:flutter/material.dart';
import 'package:cached_http_client/cached_http_client.dart';

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

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final CachedHttpClient _client = CachedHttpClient(cacheDuration: Duration(minutes: 5));
  String _responseBody = '';
  bool _loading = true;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    setState(() {
      _loading = true;
    });

    const url = 'https://jsonplaceholder.typicode.com/todos/1';
    try {
      final response = await _client.get(url);
      setState(() {
        _responseBody = response.body;
        _loading = false;
      });
    } catch (e) {
      setState(() {
        _responseBody = 'Failed to load data';
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached HTTP Client Example'),
      ),
      body: Center(
        child: _loading
            ? CircularProgressIndicator()
            : SingleChildScrollView(
                padding: EdgeInsets.all(16),
                child: Text(
                  'Response:\n$_responseBody',
                  style: TextStyle(fontSize: 16),
                ),
              ),
      ),
    );
  }
}

自定义缓存时长

你可以在创建CachedHttpClient实例时指定缓存时长：

final client = CachedHttpClient(cacheDuration: Duration(hours: 1));

自定义存储选项

对于使用自定义存储选项，实现一个自定义的CacheManager并传递给CachedHttpClient：

final client = CachedHttpClient(cacheManager: MyCustomCacheManager());

中间件支持

为了添加中间件以进行自定义处理，将一个中间件列表传递给CachedHttpClient：

final client = CachedHttpClient(
  cacheDuration: Duration(hours: 1),
  middleware: [myMiddleware],
);

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

1 回复

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


cached_http_client 是一个用于 Flutter 的网络请求缓存插件，它基于 http 包并添加了缓存功能。使用这个插件可以减少重复的网络请求，提高应用的性能。以下是如何使用 cached_http_client 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  cached_http_client: ^0.4.0

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

2. 导入包

在需要使用 cached_http_client 的文件中导入包：

import 'package:cached_http_client/cached_http_client.dart';

3. 创建 CachedHttpClient 实例

你可以创建一个 CachedHttpClient 实例来进行网络请求。CachedHttpClient 会自动处理缓存。

final cachedClient = CachedHttpClient(
  cacheDuration: const Duration(hours: 1), // 设置缓存有效期为1小时
);

4. 发起网络请求

使用 CachedHttpClient 发起网络请求的方式与使用 http 包类似。例如，发起一个 GET 请求：

final response = await cachedClient.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

if (response.statusCode == 200) {
  // 请求成功，解析数据
  print('Response data: ${response.body}');
} else {
  // 请求失败
  print('Request failed with status: ${response.statusCode}');
}

5. 清理缓存

你可以手动清理缓存，例如在用户注销时：

await cachedClient.clearCache();

6. 自定义缓存存储

默认情况下，cached_http_client 使用内存缓存。你也可以自定义缓存存储，例如使用文件系统缓存：

final cachedClient = CachedHttpClient(
  cacheDuration: const Duration(hours: 1),
  cacheStorage: FileCacheStorage('/path/to/cache/directory'),
);

7. 其他配置

CachedHttpClient 还提供了其他配置选项，例如设置最大缓存大小、自定义缓存键等。你可以根据需要进一步配置。

示例代码

以下是一个完整的示例，展示了如何使用 cached_http_client 发起网络请求并处理缓存：

import 'package:cached_http_client/cached_http_client.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached HTTP Client Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return Text('Response: ${snapshot.data}');
              }
            },
          ),
        ),
      ),
    );
  }

  Future<String> fetchData() async {
    final cachedClient = CachedHttpClient(
      cacheDuration: const Duration(hours: 1),
    );

    final response = await cachedClient.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));

    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }
}
回到顶部