【发布时间】:2019-04-15 12:16:21
【问题描述】:
我正在尝试读取 JSON 响应并使用 Flutter 的 FutureBuilder 构建 UI,但我无法在客户端上获取整个 JSON 响应。当我尝试在两个不同的打印语句中打印响应时,它们之间的内容略有不同。请注意以下控制台打印输出对于 My Posts API Response 和 My Posts Json Response String 有何不同。
有人可以解释这种行为以及如何在客户端接收到完整的 JSON 数组之前实现正确的侦听吗?
预期的 API 响应 -
[{"_id":"5bd11c9b8a9fc0a744d1bebc","postId":1,"postUserId":1,"postDescription":"First Post with 2 Photos","postLongDescription":"First Post with 2 Photos","postDateTime":"2018-07-27T10:50:42.389Z","postLocationId":1,"postHasMedia":true,"postActive":true,"postLikesCount":3,"postCommentsCount":1},{"_id":"5bd11c9b8a9fc0a744d1bebd","postId":2,"postUserId":2,"postDescription":"Second Post with 1 Video","postLongDescription":"Second Post with 1 Video","postDateTime":"2018-07-27T11:02:00.389Z","postLocationId":2,"postHasMedia":true,"postActive":true,"postLikesCount":12,"postCommentsCount":2},{"_id":"5bd11c9b8a9fc0a744d1bebe","postId":3,"postUserId":2,"postDescription":"Third Post with No Video","postLongDescription":"Third Post with No Video","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":3,"postHasMedia":false,"postActive":true,"postLikesCount":9,"postCommentsCount":0},{"_id":"5bd11c9b8a9fc0a744d1bebf","postId":4,"postUserId":3,"postDescription":"Fourth Post with 1 Photo but Disabled","postLongDescription":"Fourth Post with 1 Photo but Disabled","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":2,"postHasMedia":true,"postActive":false,"postLikesCount":4,"postCommentsCount":0}]
Flutter Bloc 代码 -
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:MyApp/models/post_model.dart';
import 'package:http/http.dart' as http;
enum storyTypes {
timeline,
myposts
}
class PostsBloc {
Future<PostModel> getPosts(storyTypes storyType) async {
if (storyType == storyTypes.myposts) {
final String url = "http://127.0.0.1:8081/posts/all";
return await http.get(url).then((getMyPostsApiResponse) {
if (getMyPostsApiResponse.statusCode != 200) {
throw Exception("Error with http over network");
}
else {
if (getMyPostsApiResponse.statusCode == 200) {
print('My Posts API Response - ' + getMyPostsApiResponse.body);
print('My Posts Json Response String - ' + json.decode(getMyPostsApiResponse.body).toString());
return PostModel.fromJson(json.decode(getMyPostsApiResponse.body));
}
else {
throw Exception('Failed to load post');
}
}
});
}
}
Flutter 控制台输出 -
I/flutter (32316): My Posts API Response - [{"_id":"5bd11c9b8a9fc0a744d1bebc","postId":1,"postUserId":1,"postDescription":"First Post with 2 Photos","postLongDescription":"First Post with 2 Photos","postDateTime":"2018-07-27T10:50:42.389Z","postLocationId":1,"postHasMedia":true,"postActive":true,"postLikesCount":3,"postCommentsCount":1},{"_id":"5bd11c9b8a9fc0a744d1bebd","postId":2,"postUserId":2,"postDescription":"Second Post with 1 Video","postLongDescription":"Second Post with 1 Video","postDateTime":"2018-07-27T11:02:00.389Z","postLocationId":2,"postHasMedia":true,"postActive":true,"postLikesCount":12,"postCommentsCount":2},{"_id":"5bd11c9b8a9fc0a744d1bebe","postId":3,"postUserId":2,"postDescription":"Third Post with No Video","postLongDescription":"Third Post with No Video","postDateTime":"2018-07-27T11:12:34.389Z","postLocationId":3,"postHasMedia":false,"postActive":true,"postLikesCount":9,"postCommentsCount":0},{"_id":"5bd11c9b8a9fc0a744d1bebf","postId":4,"postUserId":3,"postDescription":"Fourth Post with 1 Photo but Dis
I/flutter (32316): My Posts Json Response String - [{_id: 5bd11c9b8a9fc0a744d1bebc, postId: 1, postUserId: 1, postDescription: First Post with 2 Photos, postLongDescription: First Post with 2 Photos, postDateTime: 2018-07-27T10:50:42.389Z, postLocationId: 1, postHasMedia: true, postActive: true, postLikesCount: 3, postCommentsCount: 1}, {_id: 5bd11c9b8a9fc0a744d1bebd, postId: 2, postUserId: 2, postDescription: Second Post with 1 Video, postLongDescription: Second Post with 1 Video, postDateTime: 2018-07-27T11:02:00.389Z, postLocationId: 2, postHasMedia: true, postActive: true, postLikesCount: 12, postCommentsCount: 2}, {_id: 5bd11c9b8a9fc0a744d1bebe, postId: 3, postUserId: 2, postDescription: Third Post with No Video, postLongDescription: Third Post with No Video, postDateTime: 2018-07-27T11:12:34.389Z, postLocationId: 3, postHasMedia: false, postActive: true, postLikesCount: 9, postCommentsCount: 0}, {_id: 5bd11c9b8a9fc0a744d1bebf, postId: 4, postUserId: 3, postDescription: Fourth Post with 1 Photo but Disabled, postLongDescr
【问题讨论】: