Flutter中HTTP请求发起时的页面导航处理方案

最佳处理方案 #

1. 将请求逻辑移至Riverpod Provider内部 #

把HTTP请求的发起和状态更新逻辑从DataScreen组件中剥离，放到全局的Provider里（比如NotifierProvider或FutureProvider）。这样即使页面被弹出销毁，请求完成后更新状态的操作也不会关联到已销毁的组件，从根源避免错误。

示例代码：

// 定义全局状态Provider
final dataProvider = NotifierProvider<DataNotifier, AsyncValue<DataModel>>(() => DataNotifier());

class DataNotifier extends Notifier<AsyncValue<DataModel>> {
  @override
  AsyncValue<DataModel> build() => const AsyncValue.loading();

  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse("https://your-api-url.com/data"));
      if (response.statusCode == 200) {
        final data = DataModel.fromJson(jsonDecode(response.body));
        state = AsyncValue.data(data);
      } else {
        throw Exception("请求失败，状态码: ${response.statusCode}");
      }
    } catch (e, stackTrace) {
      state = AsyncValue.error(e, stackTrace);
    }
  }
}

在DataScreen中只需监听状态并发起请求：

class DataScreen extends ConsumerWidget {
  const DataScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 页面初始化时触发请求
    useEffect(() {
      ref.read(dataProvider.notifier).fetchData();
      return null;
    }, []);

    // 监听状态变化处理UI
    final dataState = ref.watch(dataProvider);
    return Scaffold(
      appBar: AppBar(title: const Text("数据页面")),
      body: dataState.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        data: (data) => ListView.builder(/* 渲染数据列表 */),
        error: (e, _) => Center(child: Text("加载失败: $e")),
      ),
    );
  }
}

2. 为HTTP请求添加取消机制 #

如果必须在组件中发起请求，可通过ref.onDispose注册销毁回调，在页面弹出时主动取消请求，避免请求完成后执行无效的状态更新操作。

以Dio为例：

class DataScreen extends ConsumerStatefulWidget {
  const DataScreen({super.key});

  @override
  ConsumerState<DataScreen> createState() => _DataScreenState();
}

class _DataScreenState extends ConsumerState<DataScreen> {
  CancelToken? _cancelToken;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  void _fetchData() async {
    _cancelToken = CancelToken();
    // 注册销毁回调，页面销毁时取消请求
    ref.onDispose(() {
      _cancelToken?.cancel("页面已销毁，取消请求");
    });

    try {
      final response = await Dio().get(
        "https://your-api-url.com/data",
        cancelToken: _cancelToken,
      );
      // 请求未被取消时，安全更新状态
      ref.read(dataProvider.notifier).updateData(DataModel.fromJson(response.data));
    } on DioException catch (e) {
      // 忽略取消请求的错误
      if (e.type != DioExceptionType.cancel) {
        debugPrint("请求错误: ${e.message}");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(/* 页面内容 */);
  }
}

是否需要阻止用户在加载时关闭页面？ #

不需要。强制阻止用户关闭页面会破坏应用的交互流畅性，违背用户的操作预期。正确的做法是通过上述两种方案，确保页面销毁后不会执行无效的状态更新操作，同时允许用户随时自由切换页面。

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