如何在Flutter Provider中实现Profile页面的单次API调用？

以下是几种实现仅调用一次API的方案，你可以根据实际需求选择：

方案一：在Provider内部添加请求判断（推荐懒加载场景） #

在fetchProfileData方法中先检查是否已有数据，或者是否正在加载，避免重复发起请求。这种方式保留UI层的调用，但由Provider控制请求逻辑：

class ProfileProvider extends ChangeNotifier {
  ProfileModel? profileModel;
  bool _isLoading = false; // 防止请求未完成时重复触发

  void fetchProfileData() async {
    // 已有数据或正在加载时直接返回
    if (profileModel != null || _isLoading) return;

    _isLoading = true;
    try {
      // 替换为你的实际API请求逻辑
      final apiData = await http.get(Uri.parse('your-profile-api-url'));
      final jsonData = jsonDecode(apiData.body);
      profileModel = ProfileModel.fromJson(jsonData);
      notifyListeners(); // 通知UI更新
    } catch (e) {
      // 这里可以添加错误处理逻辑，比如记录日志或通知UI
      print('加载个人资料失败: $e');
    } finally {
      _isLoading = false;
    }
  }
}

UI层代码保持调用，但因为Provider内部的判断，只会发起一次请求：

class ProfileScreen extends StatefulWidget {
  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  void initState() {
    super.initState();
    // 使用listen: false避免不必要的重建
    Provider.of<ProfileProvider>(context, listen: false).fetchProfileData();
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<ProfileProvider>(
      builder: (context, provider, child) {
        if (provider.profileModel == null) {
          return const Center(child: CircularProgressIndicator());
        }
        // 渲染你的个人资料UI
        return Scaffold(
          appBar: AppBar(title: const Text('个人资料')),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('用户名: ${provider.profileModel!.username}'),
                Text('邮箱: ${provider.profileModel!.email}'),
                // 其他字段...
              ],
            ),
          ),
        );
      },
    );
  }
}

方案二：Provider初始化时自动加载数据 #

如果希望个人资料在Provider创建时就加载，后续无需UI层触发，可以在Provider的构造函数中调用fetchProfileData：

class ProfileProvider extends ChangeNotifier {
  ProfileModel? profileModel;
  bool _isLoading = false;

  // 构造函数中自动触发加载
  ProfileProvider() {
    fetchProfileData();
  }

  void fetchProfileData() async {
    if (profileModel != null || _isLoading) return;

    _isLoading = true;
    try {
      final apiData = await http.get(Uri.parse('your-profile-api-url'));
      final jsonData = jsonDecode(apiData.body);
      profileModel = ProfileModel.fromJson(jsonData);
      notifyListeners();
    } catch (e) {
      print('加载个人资料失败: $e');
    } finally {
      _isLoading = false;
    }
  }
}

此时UI层无需在initState中调用，直接通过Consumer读取数据即可：

class ProfileScreen extends StatefulWidget {
  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  @override
  Widget build(BuildContext context) {
    return Consumer<ProfileProvider>(
      builder: (context, provider, child) {
        if (provider.profileModel == null) {
          return const Center(child: CircularProgressIndicator());
        }
        return Scaffold(
          appBar: AppBar(title: const Text('个人资料')),
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('用户名: ${provider.profileModel!.username}'),
                Text('邮箱: ${provider.profileModel!.email}'),
              ],
            ),
          ),
        );
      },
    );
  }
}

方案三：全局初始化（适合全App通用的个人资料） #

如果个人资料是全App需要的全局数据，可以在App启动时一次性加载，后续所有页面直接使用：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化Provider并加载数据
  final profileProvider = ProfileProvider();
  await profileProvider.fetchProfileData();

  runApp(
    ChangeNotifierProvider.value(
      value: profileProvider,
      child: const MyApp(),
    ),
  );
}

这种方式下，整个App生命周期内只会发起一次API请求，所有页面都能直接读取已加载的数据。

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