Flutter中调用嵌套Future的正确实现方式是什么？

首先给出两种写法的对比结论：你和同事的写法都存在缺陷，没有达到生产环境的规范要求，具体问题和优化方案如下：

两种现有写法的问题 #

你同事的写法 #

优势是代码简单，适合不需要依赖异步结果执行后续操作的场景，但缺陷很明显：

• 没有异常捕获，异步调用一旦报错会抛出未捕获异常，大概率导致应用崩溃
• 无法实现依赖异步结果的后续链式调用，比如拿到用户后再调接口的需求不好实现
• 没有状态更新逻辑，如果需要将异步结果同步到UI必须手动加setState

你的写法 #

能实现嵌套调用的需求，但问题更多：

• 多余的Future.delayed(Duration.zero)封装，除非你需要等待第一帧渲染完成再执行逻辑，否则完全不需要加这一层
• 多层then嵌套形成回调地狱，代码可读性差，后续维护成本高
• 没有异常捕获，同样存在崩溃风险
• 嵌套了两次setState，产生不必要的UI重绘

规范的嵌套Future实现方案 #

Flutter中处理有前后依赖关系的异步调用，核心原则是用async/await代替嵌套then，同时做好异常处理和状态管理，以下是两种常用的实现方案：

方案1：手动管理状态（基础版） #

单独封装异步加载方法，用await串行执行两个依赖的Future，减少setState调用次数，同时添加异常捕获：

class _UserPublicationsState extends State<UserPublications> {
  List<Publication>? listPublications;
  User? user;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  Future<void> _loadData() async {
    try {
      User targetUser;
      // 兼容查询其他用户的需求，如果页面传入了目标用户就直接用，否则取当前用户
      if (widget.targetUser != null) {
        targetUser = widget.targetUser!;
      } else {
        targetUser = await UserAuth.getCurrentUser();
      }
      final publications = await UserWS.getPublicationsPerUsers(targetUser);
      // 两次异步都完成后只调用一次setState，减少重绘
      setState(() {
        user = targetUser;
        listPublications = publications;
      });
    } catch (e) {
      // 自定义异常处理逻辑，比如弹出提示、展示错误页
      debugPrint('数据加载失败：$e');
    }
  }

  @override
  Widget build(BuildContext context) {
    if (listPublications == null) {
      return FullPageLoading();
    }
    return SafeArea(
      child: Scaffold(
        appBar: getSimpleAppBar(context, "title"),
        body: SingleChildScrollView(
          child: getSavedPublications(),
        ),
      ),
    );
  }
}

方案2：用FutureBuilder自动管理状态（推荐） #

如果不需要在加载过程中多次更新状态，优先用FutureBuilder，自动处理加载中、加载失败、加载成功三种状态，不需要手动维护空值判断和加载标记：

class _UserPublicationsState extends State<UserPublications> {
  late Future<List<Publication>> _publicationsFuture;

  @override
  void initState() {
    super.initState();
    _publicationsFuture = _loadPublications();
  }

  Future<List<Publication>> _loadPublications() async {
    User targetUser;
    if (widget.targetUser != null) {
      targetUser = widget.targetUser!;
    } else {
      targetUser = await UserAuth.getCurrentUser();
    }
    return UserWS.getPublicationsPerUsers(targetUser);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: getSimpleAppBar(context, "title"),
        body: FutureBuilder<List<Publication>>(
          future: _publicationsFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return FullPageLoading();
            }
            if (snapshot.hasError) {
              return const Center(child: Text('加载失败，请稍后重试'));
            }
            final listPublications = snapshot.data!;
            return SingleChildScrollView(
              child: getSavedPublications(listPublications),
            );
          },
        ),
      ),
    );
  }
}

通用Future调用规范 #

• 禁止多层then嵌套，依赖型异步任务一律用async/await串行编写，可读性和可维护性更高
• 所有异步操作必须添加try-catch捕获异常，避免未处理异常导致应用崩溃
• 普通异步调用不需要在initState中套Future.delayed(Duration.zero)，只有需要等第一帧渲染完成再执行的操作（比如弹出对话框、获取组件尺寸）才需要用这个写法
• 异步渲染场景优先用FutureBuilder/StreamBuilder，不用手动维护加载状态和空值判断，减少bug概率
• 无依赖关系的多个异步任务可以用Future.wait并行执行，提高加载速度

内容的提问来源于stack exchange，提问作者morganXap