Riverpod中如何避免FutureProvider因状态切换重复发起网络请求？

问题根源 #

你当前的weatherDataFutureProvider用family<int>区分实体类型，但缓存的唯一标识只有这个类型值。同时它内部监听了selectedEntityStateProvider，每次切换页面更新选中实体时，Provider会因依赖状态变化重新执行future；另外，当切回之前的实体时，Riverpod默认会回收不再被监听的Provider实例，导致重新发起请求。

解决方案 #

给你几个可行的方案，按需选择：

1. 扩展Family参数，加入实体唯一标识

把Family的参数从单一的int类型，改成实体类型+实体唯一ID的组合，让每个实体的请求都有独立的缓存实例：

// 修改Provider定义
final weatherDataFutureProvider = FutureProvider.family<dynamic, (int type, String entityId)>((ref, args) async {
  final entityType = args.$1;
  final targetEntityId = args.$2;
  
  // 确保当前选中实体和请求目标一致，避免脏数据
  final currentEntity = ref.watch(selectedEntityStateProvider);
  if (currentEntity?.id != targetEntityId) {
    // 可选：取消当前请求
    ref.onDispose(() => ref.cancelToken.cancel());
    throw Exception('已切换实体，取消当前请求');
  }

  if (entityType == 1) {
    final weatherService = WeatherService();
    final response = await weatherService.callService(
      lat: currentEntity!.address.latitude!,
      lng: currentEntity!.address.longitude!,
    );
    // 让Provider实例保持存活，不被回收，保留缓存
    ref.keepAlive();
    return response;
  }
  return null;
});

使用时传入类型和实体ID：

// 在页面组件中监听Provider
final weatherData = ref.watch(
  weatherDataFutureProvider(
    (1, selectedEntity!.id) // 1是城市类型，selectedEntity.id是当前实体的唯一标识
  )
);

2. 在WeatherService中添加本地缓存

直接在服务层对请求结果做缓存，用经纬度拼接作为缓存key，这样即使Provider重建，也会先读取本地缓存，避免重复网络请求：

class WeatherService {
  // 用经纬度拼接作为缓存key
  final Map<String, dynamic> _weatherCache = {};

  Future<dynamic> callService({required double lat, required double lng}) async {
    final cacheKey = '$lat,$lng';
    // 先查缓存，存在直接返回
    if (_weatherCache.containsKey(cacheKey)) {
      return _weatherCache[cacheKey];
    }
    // 发起网络请求
    final response = await // 你的网络请求逻辑
    // 写入缓存
    _weatherCache[cacheKey] = response;
    return response;
  }
}

3. 手动控制Provider的存活时间

如果不想修改Family参数，可以在Provider中使用ref.keepAlive()，让实例保持存活以保留缓存：

final weatherDataFutureProvider = FutureProvider.family<dynamic, int>((ref, value) async {
  if (value == 1) {
    final selectedEntity = ref.watch(selectedEntityStateProvider);
    final weatherService = WeatherService();
    final response = await weatherService.callService(
      lat: selectedEntity!.address.latitude!,
      lng: selectedEntity!.address.longitude!,
    );
    // 保持Provider实例存活
    ref.keepAlive();
    return response;
  }
  return null;
});

注意：这个方案下，同类型的不同实体会共用一个缓存，所以优先推荐方案1或2。

检测重建原因的方法 #

在Provider内部加日志，打印触发重建的依赖变化：

final weatherDataFutureProvider = FutureProvider.family<dynamic, int>((ref, value) async {
  print('Provider重建触发：类型=$value，当前实体ID=${ref.watch(selectedEntityStateProvider)?.id}');
  // 原有代码...
});

通过日志可以清楚看到，每次重建是因为类型参数变化，还是选中实体的变化，从而精准定位问题。

内容的提问来源于stack exchange，提问作者Zahid Tekbaş