Flutter异步处理增强插件rx_future的使用

RxFuture 是一个强大的库，它将 Getx Rx 集成到一起，引入了一种新的类型 RxFuture，使得处理未来状态（加载、错误）并获取该未来的结果变得更加容易，并且具有一些功能如取消未来。

快速入门

添加依赖

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

dependencies:
  rx_future: ^1.0.3

使用方法

1. 导入 rx_future 和 Get 状态管理器，然后创建自己的 GetxController。

import 'package:get/state_manager.dart';
import 'package:rx_future/rx_future.dart';

class MyController extends GetxController {}

1. 声明你的 rxFuture，并传递初始值。

class MyController extends GetxController {
    RxFuture<Map<String, dynamic>> state = RxFuture({});
}

1. 定义你的函数来触发未来。

class MyController extends GetxController {
  RxFuture<Map<String, dynamic>> state = RxFuture({});

  Future<void> getData() async {

  }
}

1. 现在通过将一个未来回调传递给 observe 方法来触发状态。

class MyController extends GetxController {
  RxFuture<Map<String, dynamic>> state = RxFuture({});

  Future<void> getData() async {
    await state.observe((value) async {
      return await myApi();
    });
  }
}

1. 现在你可以在 UI 代码中监听 state.error 和 state.loading。

Obx(() {
    if(myController.state.loading){
        return const CircularProgressIndicator();
    }

    if(myController.state.hasError){
        return Text(myController.state.error.toString());
    }

    return MyWidget(myController.state.result);
})

更多功能

钩子

有许多钩子会在不同情况下触发，例如：

await state.observe(
  (value) async {
    return await myApi();
  },
  onSuccess: (value) {
     print("success $value");
  },
  onError: (e) {},
  onCancel: () {},
);

例如，现在取消你的未来变得很容易，只需调用 RxFuture 的 .cancel() 方法：

void cancel(){
  state.cancel();
}

多次调用行为

默认情况下，当你多次调用 state.observe() 并且它尚未完成时，它会忽略新调用，直到第一次调用完成。你可以通过传递 MultipleCallsBehavior 参数来更改此行为：

state.observe(
  (val) async {
    return await myApi();
  },
  multipleCallsBehavior: MultipleCallsBehavior.abortNew,
)

要忽略旧调用并刷新你的状态以响应新调用，请使用 MultipleCallsBehavior.abortOld：

state.observe(
  (val) async {
    return await myApi();
  },
  multipleCallsBehavior: MultipleCallsBehavior.abortOld,
)

示例 Demo

以下是完整的示例代码：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:rx_future/rx_future.dart';

void main() {
  Get.put<MyController>(MyController());
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;
  final MyController controller = Get.find<MyController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            FloatingActionButton(
              onPressed: () {
                controller.cancel();
              },
            ),
            Obx(() {
              return Text(
                '${controller.state.result}',
                style: Theme.of(context).textTheme.headline4,
              );
            }),
            Obx(() {
              print("the value of loading is ${controller.state.loading}");
              if (controller.state.loading) {
                return const CircularProgressIndicator();
              } else {
                if (controller.state.hasError) {
                  return Text(controller.state.error.toString());
                }
              }
              return Text("${controller.state.lastResult}");
            }),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.getData();
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class MyController extends GetxController {
  RxFuture<int> state = RxFuture(0);

  Future<void> getData() async {
    await state.observe(
      (val) async {
        return await getRandomNumber();
      },
      onSuccess: (val) {
        print("Success Getting Number $val");
      },
    );
  }

  void cancel() {
    state.cancel();
  }
}

Future<int> getRandomNumber() async {
  await Future.delayed(const Duration(seconds: 3));
  return Random().nextInt(500);
}

希望这个示例能帮助你更好地理解和使用 rx_future 插件！