Question

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

我是陌生的，尝试使用http.dart包通过发布请求命中API。我正在使用一个异步的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，因此我知道它可以正常工作，并且返回我期望的结果。

Answer 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。

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

1 个答案: