时间戳

首页 > 解决方案 > 在 FutureBuilder 工作时从另一个 API 获得响应

flutter - 在 FutureBuilder 工作时从另一个 API 获得响应

问题描述

late Future<Kategori> _futureArticles;
late Future<Article> _futureSummary;

和 API 的

@override
  void initState() {
    _futureArticles = _newsService.getArticlesByCategory(widget.id);
    _futureSummary = _newsService.getArticleById(widget.id);
    super.initState();
  }

和 FutureBuilder

child: FutureBuilder<Kategori>(
          future: _futureArticles,
          builder: (BuildContext context, AsyncSnapshot<Kategori> snapshot) {
            if (snapshot.hasData) {
              final articles = snapshot.data?.data;

现在有了 FutureArticles 和这种结构，一切正常，但我需要来自 _futureSummary 的另一个 json 值。两个 API 都有相同的 ID 值，所以我可以从第二个 API 获取 json.summary 值。但是怎么做？我尝试使用 future.wait 但它没有用。

同时，我在不同页面上使用第二个 APi 来获取特定新闻的所有信息。

什么是正确的方法？

标签： flutterdart

解决方案

不确定您要达到的目标。您是否希望您的 Future 构建器仅在两个 Futures 都完成时重建？如果是这样 - 尝试结合两个期货。Future.wait 将等待您传递的所有 Future 对象完成，并返回结果列表：

让我用工作演示更新我的答案 - 你可以在 DartPad 中测试它。请注意，第一个 Future 将在 1 秒后完成（并将日志写入控制台），但 FutureBuilder 将等到第二个 Future 完成，然后才显示两者的值。

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}


class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
 
  late Future<String> _futureArticles;
  late Future<int> _futureSummary;
  
  
  
  @override
  void initState() {
    _futureArticles = Future.delayed(const Duration(seconds:1), () {print("First is done"); return "First is done";});
    _futureSummary = Future.delayed(const Duration(seconds:5), () => 10);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
          future: Future.wait([_futureArticles, _futureSummary]),
          builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
            if (snapshot.hasData) {
              final articles = snapshot.data![0] as String;
              final summary= snapshot.data![1] as int;
              
              return Column(children:[
                Text(articles),
                Text('$summary')
              ]);
            } else {
              return const CircularProgressIndicator();
            }
          });
  }
}

推荐阅读