Flutter 在无限循环中发送 http 请求

Posted 2023-02-19

【中文标题】Flutter 在无限循环中发送 http 请求

【英文标题】：flutter sends http requests in a infinity loop

【发布时间】：2022-01-15 18:19:10

【问题描述】：

我想使用颤振来评估一个 json 文件。 http 请求也有效，并且数据也按预期加载到地图中。但是，应用程序以连续循环启动请求，只能通过退出程序来停止。我只是不明白为什么会这样。

列表 jsonData 也填充了正确和预期的数据，并且在程序的输出中，我放入字符串中的数据也正确显示。但是一旦完成输出，它就会跳回 fetchPost 函数并重新开始一切。

你好，尼塞尔

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart';

void main() 
  runApp(MyApp());


class MyApp extends StatefulWidget 
  @override
  _MyState createState() => _MyState();


class _MyState  extends State<MyApp>
  final url2 = "https://example.com/gartentemp/api/get_temp_data.php?data_type=temps_today";
  String basicAuth =
      'Basic ' + base64Encode(utf8.encode('user:password'));
  var _postJson = [];
  void fetchPost() async 
    try 
      //final response = await get(Uri.http("jsonplaceholder.typicode.com", "posts"));
      final response = await get(Uri.parse(url2),headers: <String, String>'authorization': basicAuth);
      print(response.statusCode);
      Map<String, dynamic> map = json.decode(response.body);
      print("map");
      print(map);
      print("/map");
      List<dynamic> jsonData = map["temperaturen"];
      setState(() 
        _postJson = jsonData;
      );

    catch(err) 
      print(err);
    
  

  @override
  void initState() 
    super.initState();
    //fetchPost();
  

  @override
  Widget build(BuildContext context) 
    fetchPost();
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: ListView.builder(
            itemCount: _postJson.length,
            itemBuilder: (context, i) 
              final post = _postJson[i];
              return Text("Title: $post["datum"]\n $post["temperatur1"]\n\n");
        
        ),
      )
    );
  

Json 内容

    "temperaturen": [
        
            "datum": "2021-12-11 00:00:06",
            "temperatur1": "-1.06",
            "temperatur2": "3.56"
        ,
        
            "datum": "2021-12-11 01:00:06",
            "temperatur1": "-1.44",
            "temperatur2": "3.19"
        
    ],
    "Aggregat_data": [
        
            "day_avg_temperatur1": "-2.4",
            "day_avg_temperatur2": "2.11",
        
    ]

【参考方案1】：

您并没有真正提出问题，但您的代码的问题是您在构建方法中调用 fetchPost，然后调用 setState 导致再次执行 build 方法。

如您所见，显然有一个循环。

您可以做的是将_postJson 变成late Future<Response>，将未来分配给这个变量（没有setState，因为分配变量的行为是同步的），然后在build 中使用@ 987654329@显示数据。

有一个很棒的视频描述了FutureBuilder 的工作原理，我鼓励你看看：https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html