Flutter网络策略管理插件network_strategies的使用

Flutter网络策略管理插件network_strategies的使用

简介

network_strategies 是一个受 Workbox 启发的 Flutter 插件，用于声明式的网络策略管理。它高度依赖于一些特定的包，并通过简化代码帮助开发者快速构建网络层。

使用的前提条件

在使用 network_strategies 插件之前，确保你已经引入了以下依赖项：

• freezed：用于结构化模型。
• mobx：作为计算单元。
• sqflite 和 moor：用于本地数据库访问。
• dio：用于网络请求。

这些依赖项构成了该插件的核心支持环境。

声明式的网络策略

network_strategies 提供了一组预定义的网络策略，可以通过简单的声明式构造器快速实现复杂的网络逻辑。

示例代码

以下是一个完整的示例，展示如何使用 network_strategies 插件来管理网络请求。

import 'package:flutter/material.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:mobx/mobx.dart';
import 'package:dio/dio.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';
import 'package:network_strategies/network_strategies.dart';

// 初始化 sqflite
void initializeSqflite() {
  sqfliteFfiInit();
  databaseFactory = databaseFactoryFfi;
}

void main() async {
  // 初始化 sqflite
  initializeSqflite();

  // 创建 MobX Store
  final store = NetworkStore();

  runApp(MyApp(store: store));
}

class MyApp extends StatelessWidget {
  final NetworkStore store;

  const MyApp({Key? key, required this.store}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Network Strategies Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => store.fetchData(),
                child: Text('Fetch Data'),
              ),
              SizedBox(height: 20),
              Text(store.status ?? 'No data yet'),
            ],
          ),
        ),
      ),
    );
  }
}

// 定义数据模型
@freezed
class ResponseModel with _$ResponseModel {
  const factory ResponseModel({
    required int id,
    required String title,
  }) = _ResponseModel;
}

// 定义 MobX Store
class NetworkStore with Store {
  @observable
  String? status;

  @action
  Future<void> fetchData() async {
    try {
      // 使用 network_strategies 的默认策略
      final response = await NetworkStrategy.defaultStrategy(
        url: 'https://jsonplaceholder.typicode.com/posts/1',
        method: 'GET',
        options: Options(
          responseType: ResponseType.json,
        ),
      );

      // 解析响应数据
      final parsedResponse = ResponseModel.fromJson(response.data);
      status = '${parsedResponse.id}: ${parsedResponse.title}';
    } catch (e) {
      status = 'Error: $e';
    }
  }
}

代码解析

1. 初始化 sqflite
   在 Flutter 中使用 sqflite 需要进行初始化。sqfliteFfiInit() 是必要的步骤，确保数据库操作正常运行。

2. MobX Store
   NetworkStore 是一个 MobX 状态管理类，包含一个 fetchData 方法，用于执行网络请求。status 属性用于存储请求结果或错误信息。

3. 网络策略
   使用 NetworkStrategy.defaultStrategy 调用默认的网络策略，传入请求 URL、方法和选项（如 ResponseType.json）。插件会自动处理网络请求并返回解析后的数据。

4. UI 更新
   在 MyApp 中，点击按钮会触发 fetchData 方法，更新状态并在界面上显示结果。

输出效果

运行上述代码后，点击按钮将触发网络请求，并在界面上显示类似以下内容：

1: delectus aut autem

如果请求失败，则会显示错误信息，例如：

Error: Exception: DioError [DioErrorType.response]: Http status error [404]