如何从Dart http请求返回的Future<Response>中提取网络返回字符串？

问题原因 #

你获取到Instance of 'Future Response'是因为makeRequest是异步方法，返回值为Future类型，直接调用时没有等待异步任务执行完成，拿到的是Future实例本身，而非接口返回的实际响应结果。

解决方法 #

1. 正确调用现有方法

调用异步方法时必须添加await关键字，且await只能在被async修饰的方法内使用，拿到http.Response对象后通过body属性获取字符串内容：

// 调用逻辑必须写在async修饰的方法内
void getResponse() async {
  http.Response res = await makeRequest();
  // 此处responseBody就是接口返回的字符串，如"10"、"125"
  String responseBody = res.body;
  // 后续可直接使用responseBody
  print(responseBody);
}

2. 可选：封装方法直接返回字符串

可以直接把请求方法封装为返回字符串的异步方法，还可以增加状态码判断做异常处理：

Future<String> makeRequest() async {
  final response = await http.get(Uri.parse(url));
  // 判断请求是否成功
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('请求失败，状态码：${response.statusCode}');
  }
}

// 调用更简洁
String result = await makeRequest();

3. 页面渲染场景的用法

如果需要在Widget中直接使用异步请求的结果，可以用FutureBuilder实现：

FutureBuilder<String>(
  // 传入你的异步请求方法
  future: makeRequest(),
  builder: (context, snapshot) {
    // 请求完成且无错误
    if (snapshot.hasData) {
      return Text('接口返回结果：${snapshot.data}');
    }
    // 请求出错
    if (snapshot.hasError) {
      return Text('请求出错：${snapshot.error}');
    }
    // 请求中展示加载态
    return CircularProgressIndicator();
  }
)

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