Flutter同步网络请求插件dio_sync的使用

Flutter同步网络请求插件dio_sync的使用

在本教程中，我们将介绍如何使用 dio_sync 插件进行同步网络请求。dio_sync 是一个基于 Dio 的插件，允许你以同步的方式处理网络请求，适用于需要快速响应的应用场景。

如何使用

首先，你需要初始化 Hive，然后创建一个 SyncBox 或 LazySyncBox 来管理你的同步请求。以下是一个基本示例：

void test() async {
  /// 确保你已经初始化了Hive
  await Hive.initFlutter();

  /// 最佳实践是在根部件中使用它
  var box = await SyncBox.create(client: Dio());

  /// 完成工作后别忘了释放盒子
  await box.dispose();
}

如果你希望使用惰性加载来获取值，可以使用 LazySyncBox：

void test() async {
  /// 确保你已经初始化了Hive
  await Hive.initFlutter();

  /// 最佳实践是在根部件中使用它
  var box = await LazySyncBox.create(client: Dio());

  /// 完成工作后别忘了释放盒子
  await box.dispose();
}

示例代码

下面是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 dio_sync 插件。

import 'dart:async';
import 'dart:math';

import 'package:dio/dio.dart';
import 'package:dio_sync/dio_sync.dart';
import 'package:flutter/material.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main() async {
  await Hive.initFlutter();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个部件是你的应用的根部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final Dio dio;
  LazySyncBox? box;
  StreamSubscription? subscription;
  Iterable<BoxValue> events = [];

  [@override](/user/override)
  void initState() {
    dio = Dio(BaseOptions(baseUrl: 'https://jsonplaceholder.typicode.com'));
    dio.interceptors.add(_Interceptor());
    
    LazySyncBox.create(
      client: dio,
      periodicSyncDuration: const Duration(seconds: 10),
      automaticSyncType: AutomaticSyncType.single,
    ).then((value) {
      setState(() {
        box = value;
        events = box?.values ?? [];
      });
      subscription = box?.listen(_onValuesChanged);
    });

    super.initState();
  }

  void addRequest() {
    dio.post('/tossdos/1',
        queryParameters: {"params1": "params2"},
        data: FormData.fromMap(
          {
            'file': MultipartFile.fromBytes([0, 93, 38, 2, 202])
          },
        ));
  }

  [@override](/user/override)
  void dispose() {
    subscription?.cancel();
    box?.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: ListView(
        children: events.map(_buildItem).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addRequest,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  FutureBuilder<BoxObject?> _buildItem(BoxValue e) {
    return FutureBuilder(
      future: e.value,
      builder: (BuildContext context, AsyncSnapshot<BoxObject?> snapshot) {
        var value = snapshot.data;
        return ListTile(
          title: Text("${value?.path}(${value?.uuid})"),
          subtitle: Text(value?.exception?.message ?? value?.toString() ?? ""),
          trailing: Text(value?.status.name ?? ""),
        );
      },
    );
  }

  void _onValuesChanged(BoxEvent event) {
    setState(() {
      events = box?.values ?? [];
    });
  }
}

class _Interceptor implements Interceptor {
  [@override](/user/override)
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    print(
        "Requesting: ${options.path}   extra: ${options.extra} param: ${options.queryParameters}");
    handler.next(options);
  }

  [@override](/user/override)
  void onError(DioException err, ErrorInterceptorHandler handler) {
    print(
        "Error: ${err.requestOptions.path}   extra: ${err.requestOptions.extra} param: ${err.requestOptions.queryParameters}");
    handler.next(err);
  }

  [@override](/user/override)
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print(
      "Response: ${response.requestOptions.path}   extra: ${response.requestOptions.extra} param: ${response.requestOptions.queryParameters}",
    );
    handler.next(response);
  }
}