Dart中如何让页面等待GET请求体赋值完成后再加载？

嗨，我懂你的困扰——页面刚加载时异步请求还没跑完，data变量还没赋值就被UI访问，导致一开始看不到数据；热重载时请求已经完成，data有值了才正常显示。这是Flutter处理异步数据非常常见的场景，最标准的解决方式是用FutureBuilder组件，它专门用来处理这种需要等待异步操作完成再渲染UI的情况。

问题根源 #

你现在在initState里启动了fetchTicket这个Future，但Flutter的UI渲染不会自动等待Future执行完毕。初始build时data还是null，页面自然没有数据；热重载时之前的Future已经完成，data已经被赋值，所以能正常展示内容。

解决方案：使用FutureBuilder #

FutureBuilder会监听你传入的Future的状态（等待中、完成、出错），自动根据不同状态渲染对应的UI，完全不需要手动处理等待逻辑。

修改后的完整代码示例

我们可以简化代码，不需要单独维护data变量（FutureBuilder会直接拿到返回的Ticket对象）：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// 假设你的Ticket类结构，根据实际情况调整
class Ticket {
  final int id;
  final String title;

  Ticket({required this.id, required this.title});

  factory Ticket.fromJson(Map<String, dynamic> json) {
    return Ticket(
      id: json['id'],
      title: json['title'],
    );
  }
}

class TicketPage extends StatefulWidget {
  const TicketPage({super.key});

  @override
  State<TicketPage> createState() => _TicketPageState();
}

class _TicketPageState extends State<TicketPage> {
  static Future<Ticket>? futureTicket;

  Future<Ticket> fetchTicket() async {
    final response = await http.get(Uri.parse('http://hostname/getRequest'));
    if (response.statusCode == 200) {
      return Ticket.fromJson(json.decode(response.body));
    } else {
      throw Exception('Failed to load Ticket');
    }
  }

  @override
  void initState() {
    super.initState();
    futureTicket = fetchTicket();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Ticket详情')),
      body: FutureBuilder<Ticket>(
        // 传入initState里初始化好的Future，避免重复发起请求
        future: futureTicket,
        builder: (context, snapshot) {
          // 根据Future状态渲染对应UI
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 请求中：显示加载指示器
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 请求出错：显示错误提示
            return Center(child: Text('加载失败：${snapshot.error}'));
          } else if (snapshot.hasData) {
            // 请求成功：用获取到的Ticket数据渲染页面
            final ticket = snapshot.data!;
            return Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('Ticket ID: ${ticket.id}', style: const TextStyle(fontSize: 20)),
                  const SizedBox(height: 10),
                  Text('标题: ${ticket.title}', style: const TextStyle(fontSize: 16)),
                  // 这里添加更多需要展示的内容
                ],
              ),
            );
          } else {
            // 无数据的兜底场景
            return const Center(child: Text('暂无数据'));
          }
        },
      ),
    );
  }
}

关键注意事项 #

• 不要在build方法里创建Future：比如不要写future: fetchTicket()，因为build会被多次触发，这样会重复发起网络请求。一定要像你现在这样在initState里初始化Future并复用它。
• 错误处理不能少：用户网络异常或服务器出错时，要给出友好提示，避免页面空白。
• 若需保留data变量：如果你确实需要把请求结果存在data成员变量里，可以继续在fetchTicket中赋值，但FutureBuilder的逻辑保持不变，它依然会等待请求完成后再渲染UI。

这样修改后，页面会先显示加载指示器，等请求完成拿到数据后自动切换到带内容的UI，完美解决你遇到的提前加载问题。

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