Flutter获取地点接口返回Instance of '_Future'而非JSON列表问题

1. 先解决返回Instance of '_Future<List<PlacesModel>>'的问题 #

你看到的这个输出是Flutter异步函数的正常特性，所有用async标记的函数返回值都是Future类型，必须用以下两种方式拿到实际返回数据：

• 方式1：在async标记的函数中使用await关键字调用

// 错误写法，拿到的是Future对象
var result = getAllPlaces();
// 正确写法，拿到的是实际的List<PlacesModel>数据
var result = await getAllPlaces();

注意调用await的上层函数必须也标记为async。

• 方式2：在Widget中使用FutureBuilder渲染异步数据

FutureBuilder<List<PlacesModel>>(
  future: getAllPlaces(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        // 这里的snapshot.data就是实际的地点列表数据
        return ListView.builder(
          itemCount: snapshot.data!.length,
          itemBuilder: (context, index) => Text(snapshot.data![index].name),
        );
      }
      return Text('请求错误：${snapshot.error}');
    }
    return const CircularProgressIndicator();
  }
)

2. 修复现有接口请求逻辑的问题 #

已知代码缺陷 #

• 你手动给返回体拼接[]的操作会破坏原数据结构：先打印response.body确认接口返回格式，如果Postman里返回的本身就是数组，拼接[]会导致数组嵌套，解析出错；如果返回的是单个对象，才需要这个操作。
• 缺少非200状态码的处理逻辑：当接口返回401、404、500等状态码时，函数没有返回值，会触发隐式报错。
• 缺少异常捕获逻辑：网络不通、跨域、解析失败等异常没有捕获，会直接打断执行。

修正后的代码参考 #

Future<List<PlacesModel>> getAllPlaces() async {
  final Storage _localStorage = window.localStorage;
  List<PlacesModel> allPlaces = [];
  try {
    Map<String, String> headers = {
      'Content-type': 'application/json',
      'Authorization': 'Bearer ${_localStorage['token'] ?? ''}'
    };
    // 先打印token确认和Postman请求用的一致
    debugPrint('请求头token：${_localStorage['token']}');
    final allPlacesURl = Uri.parse("http://localhost:3000/common/getPlaces/0");
    var response = await http.get(allPlacesURl, headers: headers);
    // 打印返回体和状态码，确认和Postman返回一致
    debugPrint('接口状态码：${response.statusCode}，返回内容：${response.body}');
    if(response.statusCode == 200) {
      // 先确认返回结构是否需要加[]，不需要就直接解码response.body
      final body = json.decode(response.body);
      // 如果返回的是数组直接遍历，如果是单个对象就包一层[]
      List listData = body is List ? body : [body];
      allPlaces = listData.map((e) => PlacesModel.fromJson(e)).toList();
      return allPlaces;
    } else {
      throw Exception('接口请求失败，状态码：${response.statusCode}');
    }
  } catch (e) {
    debugPrint('请求出错：$e');
    rethrow;
  }
}

3. 其他高频排查点 #

• 如果你是用Flutter Web调试，浏览器有跨域限制（Postman没有跨域限制），打开浏览器控制台查看是否有CORS跨域报错，如果有需要在后端接口配置跨域允许，或者调试时用Flutter代理工具。
• 确认PlacesModel.fromJson解析逻辑没有问题，字段名、字段类型要和接口返回的完全匹配，不匹配的话会触发解析异常。

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