在同一页面上使用 Riverpod 处理多个 api 调用

Question

如何使用Riverpod高效地在同一页面上一一调用多个API，特别是当某些API依赖于其他API的响应时。请同时给出示例。

Answer 1

要在 Flutter 应用程序中使用 Riverpod 处理多个 API 调用，您可以使用 FutureProvider 或 Provider 结合 AsyncValue 来表示 API 调用的异步结果

第一步：定义API调用函数

Future<String> FirstFunction() async {
  return 'First API Data';
}

Future<String> SecondFunction() async {

  return 'Second API Data';
}

如果您想添加延迟，还可以添加

//模拟API调用延迟

 await Future.delayed(Duration(seconds: 3));

第 2 步：定义提供商

最终firstDataFutureProvider = FutureProvider((ref) => FirstFunction()); 最终的 SecondDataFutureProvider = FutureProvider((ref) => SecondFunction());

第 3 步：在小部件中使用提供程序

Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Consumer(builder: (context, watch, _) {
                  final firstDataState = watch(firstDataFutureProvider);
                  return firstDataState.when(
                    loading: () => CircularProgressIndicator(),
                    error: (error, stackTrace) => Text('Error: $error'),
                    data: (data) => Text('First API Data: $data'),
                  );
                }),
                Consumer(builder: (context, watch, _) {
                  final secondDataState = watch(secondDataFutureProvider);
                  return secondDataState.when(
                    loading: () => CircularProgressIndicator(),
                    error: (error, stackTrace) => Text('Error: $error'),
                    data: (data) => Text('Second API Data: $data'),
                  );