为何Dart DevTools的Network页面不显示响应内容？

我发起了一个指向http://postman-echo.com/get?foo=bar的简单请求，但Dart DevTools的Network页面中Response标签未显示任何内容。想知道这是bug，还是需要进行某些设置才能默认显示结果？

发起请求的代码 #

var headers = {'Content-Type': 'application/json'};
var request = http.Request('GET', Uri.parse('http://postman-echo.com/get?foo=bar'));

request.headers.addAll(headers);

http.StreamedResponse response = await request.send();

if (response.statusCode == 200) {
    dynamic jsonData = jsonDecode(await response.stream.bytesToString());
}

Network页面截图 #

原因分析 #

这不是bug，核心问题出在StreamedResponse的特性上：当你调用response.stream.bytesToString()时，流数据已经被一次性消费完毕，而Dart DevTools默认不会主动缓存流内容，因此无法在Network标签页中展示响应结果。

解决方法 #

有两种可行方案：

• 改用http.get()方法：该方法会自动处理响应并缓存内容，DevTools能直接捕获完整响应：

var headers = {'Content-Type': 'application/json'};
var response = await http.get(
  Uri.parse('http://postman-echo.com/get?foo=bar'),
  headers: headers,
);

if (response.statusCode == 200) {
  dynamic jsonData = jsonDecode(response.body);
}

• 手动缓存流数据：如果必须使用StreamedResponse，可以先将流内容缓存为字节列表，再从缓存中读取：

var headers = {'Content-Type': 'application/json'};
var request = http.Request('GET', Uri.parse('http://postman-echo.com/get?foo=bar'));
request.headers.addAll(headers);

http.StreamedResponse response = await request.send();

// 先缓存流内容
List<int> bytes = await response.stream.toList();
// 从缓存读取并解析
dynamic jsonData = jsonDecode(utf8.decode(bytes));

内容的提问来源于stack exchange，提问作者Darrell Brogdon