为啥 FutureBuilder snapshot.data 返回“Post 实例”而不是 json？

Posted 2023-02-23

【中文标题】为啥 FutureBuilder snapshot.data 返回“Post 实例”而不是 json？

【英文标题】：Why does FutureBuilder snapshot.data return "Instance of Post" instead of json?为什么 FutureBuilder snapshot.data 返回“Post 实例”而不是 json？

【发布时间】：2019-05-31 12:10:59

【问题描述】：

我期待一个 JSON 数据对象，但得到的是 Instance of 'Post'

我是 Flutter 的新手，我尝试使用 http.dart 包通过发布请求来访问 API。我正在使用 async future 和 future building 来使用返回的数据填充小部件（按照此处的颤振示例：https://flutter.io/docs/cookbook/networking/fetch-data）。

Future<Post> fetchPost() async 
  String url = "https://example.com";

  final response = await http.post(url,
      headers: HttpHeaders.contentTypeHeader: 'application/json',
      body: jsonEncode("id": "1"));

  if (response.statusCode == 200) 
    print('RETURNING: ' + response.body);
    return Post.fromJson(json.decode(response.body));
   else 
    throw Exception('Failed to load post');
  



class Post 
  final String title;

  Post(this.title);

  factory Post.fromJson(Map<String, dynamic> json) 
    return Post(
      title: json['title']
    );
  



void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget 
  final Future<Post> post;

  MyApp(Key key, this.post) : super(key: key);

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) 
              if (snapshot.hasData) 
                return Text(snapshot.data.toString());
               else if (snapshot.hasError) 
                return Text("$snapshot.error");
              
              // By default, show a loading spinner
              return CircularProgressIndicator();
            ,
          ),
        ),
      ),
    );
  

我期待 FutureBuilder 中的 return 语句给我一个 json 对象。这是一个现有的 API，所以我知道它可以工作并且它返回我所期望的。

【参考方案1】：

当您说“JSON 对象”时，我不确定您指的是什么。 Dart 是一种类型化语言，您将任何内容表示为 json 字符串的方式是嵌套的 Map<String, dynamic> 或类（如您的情况）。如果它是一个类，则有执行实际反序列化的代码。在您的情况下， fromJson 方法与 json.decode() 结合可以进行反序列化，但您还没有任何序列化。

因此，您未来的构建者正在返回您所要求的。下面这段代码明确地定义了未来的类型，返回一个Post 对象：

  final Future<Post> post;

您在创建未来的构建器时使用它：

  child: FutureBuilder<Post>(
    future: post,

如果您想要返回 JSON String（或 Map<String,dynamic>），您需要首先在您的 fetchPost 方法中执行此操作（该方法目前也返回 Post 对象。

例如：

Future<Map<String, dynamic>> fetchPost() async  // <------ CHANGED THIS LINE
  String url = "https://example.com";

  final response = await http.post(url,
      headers: HttpHeaders.contentTypeHeader: 'application/json',
      body: jsonEncode("id": "1"));

  if (response.statusCode == 200) 
    print('RETURNING: ' + response.body);
    return json.decode(response.body); // <------ CHANGED THIS LINE
   else 
    throw Exception('Failed to load post');
  

或者像这样：

Future<String> fetchPost() async  // <------ CHANGED THIS LINE
  String url = "https://example.com";

  final response = await http.post(url,
      headers: HttpHeaders.contentTypeHeader: 'application/json',
      body: jsonEncode("id": "1"));

  if (response.statusCode == 200) 
    print('RETURNING: ' + response.body);
    return response.body; // <------ CHANGED THIS LINE
   else 
    throw Exception('Failed to load post');
  

然后你需要继续努力，直到你改变 MyApp 类中的 Future。

final Future<Map<String,dynamic>> post;

请阅读 these docs 了解 Flutter 中的 JSON。

【讨论】：

您建议的解决方案有效，但是如果我想在 Post 模型类中序列化 JSON 怎么办？如何访问正在返回的 Post 实例的属性？

然后您将字符串解析为一个对象，就像您在问题代码中所做的那样。 var myPost = Post.fromJson(json.decode(myPostJsonString));。另外，您是否阅读了我在答案末尾链接的文档？

我阅读了文档，感觉很棒。我意识到我的问题是我需要创建一个 Post 对象列表，但是在阅读了有关序列化的更多信息后，我决定采用您最初的建议。感谢您的帮助！