Flutter中FutureBuilder重复获取数据问题及优化方案咨询

问题根源 #

你的代码里有两个直接导致重复请求的问题：

1. build方法中调用getstudents()：Flutter的build方法会被频繁触发（比如屏幕旋转、热重载、父组件更新等），每次触发都会执行这个方法发起新请求，加上initState里的一次，自然会出现两次请求。
2. 全局列表重复累加数据：getStudents方法每次调用都会往全局的students列表里添加数据，就算请求成功多次，列表里的学生数据会重复叠加。

修正后的代码 #

先删掉build里的getstudents()调用，同时修改getStudents方法，每次请求创建新列表避免数据重复，还要补充错误处理逻辑：

class StudentListView extends StatefulWidget {
  @override
  State<StudentListView> createState() => _StudentListViewState();
}

class _StudentListViewState extends State<StudentListView> {
  late Future<List<StudentModel>> myFuture;

  Future<List<StudentModel>> getStudents() async {
    final response = await http.get(Uri.https(BASE_URL, APP_INTERSNSHIP_URL));
    final studentData = jsonDecode(response.body);
    // 每次请求创建新列表，避免重复累加
    final List<StudentModel> students = [];
    for (var student in studentData) {
      final singleStudent = StudentModel(
        id: student["id"],
        name: student["name"],
      );
      students.add(singleStudent);
    }
    return students;
  }

  @override
  void initState() {
    myFuture = getStudents();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(APP_TITLE),
        centerTitle: true,
      ),
      body: FutureBuilder<List<StudentModel>>(
        future: myFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              // 新增错误处理
              return Center(child: Text('请求失败: ${snapshot.error}'));
            }
            final students = snapshot.data ?? [];
            return ListView.builder(
              itemCount: students.length,
              itemBuilder: (context, index) {
                return Container(
                  child: Card(
                    child: Padding(
                      padding: EdgeInsets.all(15.0),
                      child: Column(
                        children: [
                          Text(students[index].id.toString()),
                          Text(students[index].name.toString()),
                        ],
                      ),
                    ),
                  ),
                );
              },
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

标准实现方式与优化方案 #

你当前的写法不算Flutter异步数据获取的标准方式，存在耦合度高、缺乏错误处理、状态管理混乱等问题，以下是更优的实现思路：

1. 基础优化：规范FutureBuilder用法 #

• 永远不要在build方法中直接创建Future（比如future: getStudents()），必须把Future对象提前在initState等生命周期中初始化，避免build触发时重复创建。
• 不要依赖全局变量存储请求结果，直接用FutureBuilder的snapshot.data获取数据，避免状态污染。
• 必须添加错误处理逻辑，覆盖请求失败的场景。

2. 进阶优化：抽离数据逻辑 #

把数据获取逻辑抽离到单独的Repository类，和UI代码解耦，提高可维护性：

class StudentRepository {
  Future<List<StudentModel>> getStudents() async {
    final response = await http.get(Uri.https(BASE_URL, APP_INTERSNSHIP_URL));
    if (response.statusCode != 200) {
      throw Exception('请求失败，状态码: ${response.statusCode}');
    }
    final studentData = jsonDecode(response.body);
    return studentData.map<StudentModel>((item) => StudentModel(
          id: item["id"],
          name: item["name"],
        )).toList();
  }
}

3. 高级优化：使用状态管理库 #

对于复杂应用，推荐用Riverpod、Bloc等状态管理库来管理异步状态，以Riverpod为例：

• 先创建Provider：

final studentRepositoryProvider = Provider((ref) => StudentRepository());
final studentsFutureProvider = FutureProvider<List<StudentModel>>((ref) {
  final repository = ref.watch(studentRepositoryProvider);
  return repository.getStudents();
});

• 页面中使用：

class StudentListView extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final studentsAsync = ref.watch(studentsFutureProvider);
    return Scaffold(
      appBar: AppBar(title: Text(APP_TITLE), centerTitle: true),
      body: studentsAsync.when(
        loading: () => Center(child: CircularProgressIndicator()),
        error: (error, stack) => Center(child: Text('请求失败: $error')),
        data: (students) => ListView.builder(
          itemCount: students.length,
          itemBuilder: (context, index) {
            final student = students[index];
            return Card(
              child: Padding(
                padding: EdgeInsets.all(15.0),
                child: Column(
                  children: [Text(student.id.toString()), Text(student.name)],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

这种方式不需要StatefulWidget，自动处理加载、错误、完成状态，还支持刷新数据、缓存等功能，适合中大型应用。

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