Flutter应用中如何忽略历史API请求以解决搜索场景的响应竞态问题

这个问题在实时搜索场景里太常见了，本质就是请求竞态（Race Condition）——旧的API请求比新的晚返回，导致UI被旧结果覆盖。我给你几个实用的解决方案，从根源补救到减少请求都有：

这是最直接的方式，每次发起新请求时，把之前还在pending的请求取消掉，这样旧请求的响应就不会回来干扰了。如果用dio库（很多Flutter开发者喜欢用它处理HTTP），可以用CancelToken来实现：

import 'package:dio/dio.dart';

class SearchScreen extends StatefulWidget {
  @override
  _SearchScreenState createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  final Dio _dio = Dio();
  CancelToken? _cancelToken;
  List<Product> _searchResults = [];

  void _performSearch(String query) async {
    // 取消之前的请求
    _cancelToken?.cancel("新请求发起，取消旧请求");
    
    // 创建新的CancelToken
    _cancelToken = CancelToken();

    try {
      final response = await _dio.get(
        'https://your-api-url.com/search',
        queryParameters: {'q': query},
        cancelToken: _cancelToken,
      );
      // 解析响应并更新UI
      setState(() {
        _searchResults = parseProducts(response.data);
      });
    } on DioException catch (e) {
      if (e.type != DioExceptionType.cancel) {
        // 处理真正的错误，比如网络异常
        print("搜索出错：${e.message}");
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      onChanged: _performSearch,
      // ... 其他UI代码
    );
  }
}

如果用官方的http包，因为它本身不支持取消请求，可以结合CancelableOperation来包装请求：

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

// ... 其他代码
CancelableOperation? _currentOperation;

void _performSearch(String query) async {
  _currentOperation?.cancel();

  _currentOperation = CancelableOperation.fromFuture(
    http.get(Uri.parse('https://your-api-url.com/search?q=$query')),
    onCancel: () {
      print("旧请求被取消");
    },
  );

  try {
    final response = await _currentOperation?.value;
    if (response != null && response.statusCode == 200) {
      setState(() {
        _searchResults = parseProducts(response.body);
      });
    }
  } catch (e) {
    if (e is! CancelException) {
      // 处理非取消的错误
      print("搜索出错：$e");
    }
  }
}

如果不想取消请求（比如有些场景下取消请求不太方便），可以给每个请求分配一个唯一的版本号，只有当响应的版本号和当前最新版本号一致时，才更新UI。

class _SearchScreenState extends State<SearchScreen> {
  List<Product> _searchResults = [];
  int _latestRequestId = 0;

  void _performSearch(String query) async {
    // 每次发起请求时，递增版本号
    final requestId = ++_latestRequestId;

    try {
      final response = await http.get(Uri.parse('https://your-api-url.com/search?q=$query'));
      if (response.statusCode == 200) {
        // 只有当前请求是最新的，才更新UI
        if (requestId == _latestRequestId) {
          setState(() {
            _searchResults = parseProducts(response.body);
          });
        }
      }
    } catch (e) {
      print("搜索出错：$e");
    }
  }

  // ... 其他UI代码
}

这个方法很轻量，不需要依赖第三方库，适合简单场景。

从根源上减少请求次数——用户输入时，不要立刻发起请求，而是等待用户停止输入一段时间（比如300ms）后再发起，这样就不会因为快速输入产生大量重复请求，自然也减少了竞态的概率。

可以用Timer来实现防抖：

class _SearchScreenState extends State<SearchScreen> {
  List<Product> _searchResults = [];
  Timer? _debounceTimer;

  void _performSearch(String query) {
    // 取消之前的定时器
    _debounceTimer?.cancel();
    
    // 设置新的定时器，300ms后发起请求
    _debounceTimer = Timer(Duration(milliseconds: 300), () async {
      try {
        final response = await http.get(Uri.parse('https://your-api-url.com/search?q=$query'));
        if (response.statusCode == 200) {
          setState(() {
            _searchResults = parseProducts(response.body);
          });
        }
      } catch (e) {
        print("搜索出错：$e");
      }
    });
  }

  @override
  void dispose() {
    // 页面销毁时取消定时器，避免内存泄漏
    _debounceTimer?.cancel();
    super.dispose();
  }

  // ... 其他UI代码
}

如果你的项目用了Bloc或者Cubit，可以在状态管理层处理竞态问题，比如在Bloc中取消旧请求，或者只处理最新的事件：

import 'package:bloc/bloc.dart';
import 'package:dio/dio.dart';

class SearchBloc extends Bloc<SearchEvent, SearchState> {
  final Dio _dio = Dio();
  CancelToken? _cancelToken;

  SearchBloc() : super(SearchInitial()) {
    on<SearchQueryChanged>(_onSearchQueryChanged);
  }

  void _onSearchQueryChanged(SearchQueryChanged event, Emitter<SearchState> emit) async {
    _cancelToken?.cancel("新搜索请求发起");
    _cancelToken = CancelToken();

    emit(SearchLoading());
    try {
      final response = await _dio.get(
        'https://your-api-url.com/search',
        queryParameters: {'q': event.query},
        cancelToken: _cancelToken,
      );
      final products = parseProducts(response.data);
      emit(SearchSuccess(products));
    } on DioException catch (e) {
      if (e.type != DioExceptionType.cancel) {
        emit(SearchFailure(e.message ?? "搜索失败"));
      }
    }
  }

  @override
  Future<void> close() {
    _cancelToken?.cancel();
    return super.close();
  }
}

这样UI层只需要监听Bloc的状态变化，不用处理竞态逻辑，代码更清晰。

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