面试题：Flutter 中如何使用 Future 和 async/await 进行异步加载数据并优化性能

使用 Future 和 async/await 实现异步加载用户信息列表数据

首先，创建一个函数来发起网络请求获取用户信息列表。假设使用 http 包来进行网络请求（在 pubspec.yaml 中添加 http: ^[具体版本号] 依赖并导入 package:http/http.dart as http）。

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

Future<List<Map<String, dynamic>>> fetchUserList() async {
  try {
    // 发起网络请求
    final response = await http.get(Uri.parse('your_api_url'));
    if (response.statusCode == 200) {
      // 将响应体解析为 JSON 数据
      final jsonData = json.decode(response.body);
      // 假设 JSON 数据是一个列表，返回解析后的用户信息列表
      return List<Map<String, dynamic>>.from(jsonData);
    } else {
      throw Exception('Failed to load user list');
    }
  } catch (e) {
    throw Exception('Network error: $e');
  }
}

处理加载状态以优化用户体验

加载中状态：

在页面的状态管理类（例如 State 类，如果使用 StatefulWidget）中，定义一个布尔变量来表示加载状态，比如 bool isLoading = false;。
在 initState 方法中，开始加载数据并更新加载状态：

@override
void initState() {
  super.initState();
  isLoading = true;
  fetchUserList().then((userList) {
    // 加载成功处理
    setState(() {
      // 更新 UI 相关的用户列表数据
      userListData = userList;
      isLoading = false;
    });
  }).catchError((error) {
    // 加载失败处理
    setState(() {
      errorMessage = error.toString();
      isLoading = false;
    });
  });
}

加载成功状态：
- 当网络请求成功，在 then 回调中，更新 UI 相关的用户列表数据，同时将 isLoading 设置为 false，例如：
```
fetchUserList().then((userList) {
  setState(() {
    userListData = userList;
    isLoading = false;
  });
});
```
加载失败状态：
- 在 catchError 回调中，获取错误信息，更新 UI 相关的错误提示信息，并将 isLoading 设置为 false，例如：
```
fetchUserList().catchError((error) {
  setState(() {
    errorMessage = error.toString();
    isLoading = false;
  });
});
```

UI 展示：

在 build 方法中，根据 isLoading 和错误信息来展示不同的 UI。

@override
Widget build(BuildContext context) {
  if (isLoading) {
    return const CircularProgressIndicator();
  } else if (errorMessage.isNotEmpty) {
    return Text('Error: $errorMessage');
  } else {
    return ListView.builder(
      itemCount: userListData.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(userListData[index]['username']),
        );
      },
    );
  }
}

这样通过 Future 和 async/await 实现了异步加载，并通过处理不同的加载状态优化了用户体验。

星途面试题库

面试题：Flutter 中如何使用 Future 和 async/await 进行异步加载数据并优化性能

知识考点

面试题答案