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

我是 Flutter 的新手，正在尝试使用 http.dart 包通过发布请求访问 API。我正在使用一个异步 future 和一个 future 建筑来用返回的数据填充一个小部件(按照这里的 flutter 示例: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，所以我知道它可以工作并且返回我所期望的。

最佳答案

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

因此，您 future builder 将按您的要求返回。下面的一段代码明确地定义了返回 Post 的 future 类型。对象:

  final Future<Post> post;

然后在创建 future builder 时使用它:

  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。

关于http - 为什么 FutureBuilder snapshot.data 返回 "Instance of Post"而不是 json？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54047108/