Flutter使用FutureBuilder展示HTTP接口count数据失败求助

1. 修正数据模型与解析逻辑 #

你的后端返回的是单个JSON对象{"count":302}，但你尝试映射成List<Post>，这会直接导致解析失败，Future无法返回有效数据，最终FutureBuilder一直停在加载状态。

• 定义匹配返回结构的模型类：

class CountResponse {
  final int count;

  CountResponse({required this.count});

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

• 修正HTTP请求的解析逻辑，不要强行转成列表：

Future<CountResponse> fetchCount() async {
  // 替换为你已完成认证的HTTP请求代码
  final response = await http.get(
    Uri.parse('你的后端接口地址'),
    headers: {'Authorization': 'Bearer 你的认证令牌'}, // 沿用你的认证头
  );

  if (response.statusCode == 200) {
    // 解析单个对象而非列表
    return CountResponse.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('请求失败: ${response.statusCode}');
  }
}

2. 确保FutureBuilder的Future实例稳定 #

如果在FutureBuilder的future参数中直接调用fetchCount()，每次Widget rebuild时都会重新发起请求，导致页面一直显示加载状态。需要把Future实例提前存到State中：

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

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  // 将Future实例存在State里，避免每次build重建请求
  late Future<CountResponse> _countFuture;

  @override
  void initState() {
    super.initState();
    _countFuture = fetchCount();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<CountResponse>(
        future: _countFuture, // 使用预先初始化的Future实例
        builder: (context, snapshot) {
          // 逐一处理不同状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('错误: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            return Center(child: Text('Count: ${snapshot.data!.count}'));
          } else {
            return const Center(child: Text('无数据'));
          }
        },
      ),
    );
  }
}

3. 排查认证与请求的隐性错误 #

在fetchCount()中添加日志打印，确认请求是否真的成功返回预期数据：

Future<CountResponse> fetchCount() async {
  final response = await http.get(...);
  print('响应状态码: ${response.statusCode}');
  print('响应体: ${response.body}');
  // 后续解析逻辑
}

如果日志显示状态码不是200，或者响应体不符合预期，需要先排查认证是否真的生效，后端接口是否正确返回数据。

4. 避免错误的模型映射 #

如果你坚持要用Post模型，需要确认后端是否返回包含count字段的Post列表，但根据你给出的响应体结构，这显然不匹配，所以优先使用对应{"count":302}的CountResponse模型。

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