Flutter如何实现每20秒调用GET请求自动刷新页面数据

实现步骤 #

你只需要做4处修改即可实现每20秒自动刷新数据的需求：

• 第一步：在状态类中声明定时器变量
• 第二步：优化getTaskDetails方法，每次拉取数据前清空原有列表，避免数据重复
• 第三步：在initState中启动周期20秒的定时请求
• 第四步：页面销毁时取消定时器，避免内存泄漏

核心修改代码 #

首先是状态类新增的变量部分：

class _JsonParseObjectsTask extends State <StatefulWidget> {
  // 原有变量保持不变
  Timer? _autoRefreshTimer; // 新增定时器变量

然后是修改后的getTaskDetails方法：

Future<Null> getTaskDetails() async {
  final String url = global.urlVar ;
  HttpClient client = new HttpClient();
  client.badCertificateCallback = ((X509Certificate cert, String host, int port) => true);
  try {
    final request = await client
        .getUrl(Uri.parse(url))
        .timeout(Duration(seconds: 5));
    HttpClientResponse response = await request.close();
    var responseBody = await response.transform(utf8.decoder).join();
    final responseJson = json.decode(responseBody);
    if (200 == response.statusCode) {
      setState(() {
        _taskDetails.clear(); // 新增：清空原有数据，避免重复累加
        for (Map<String,dynamic> user in responseJson) {
          _taskDetails.add(TaskDetails.fromJson(user));
        }
        // 如果当前有搜索关键词，刷新搜索结果
        if(controller.text.isNotEmpty){
          onSearchTextChanged(controller.text);
        }
      });
    }
  } catch(e) {
    // 请求异常可以在这里做容错处理，避免页面崩溃
    debugPrint('拉取任务数据失败：$e');
  }
}

接下来修改initState方法：

@override
void initState() {
  super.initState();
  getTaskDetails();
  // 新增：启动20秒周期的定时器
  _autoRefreshTimer = Timer.periodic(const Duration(seconds: 20), (timer) {
    getTaskDetails();
  });
}

最后新增dispose方法销毁定时器：

@override
void dispose() {
  // 页面销毁时取消定时器
  _autoRefreshTimer?.cancel();
  controller.dispose();
  super.dispose();
}

补充说明 #

• 上述修改已经兼容搜索状态，自动刷新后如果用户正在搜索，会自动更新搜索结果列表
• 增加了请求异常捕获，不会因为网络波动导致页面崩溃
• 定时器只有当前页面处于活跃状态时才会运行，页面销毁后自动停止，不会产生额外的性能消耗

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