Flutter web发起API POST请求时类型不匹配错误如何解决？

问题原因排查 #

• 首先是Album.fromJson方法的参数类型定义错误：你声明的入参类型是Map<List<dynamic>, dynamic>，但JSON解码后得到的Map结构的键默认都是String类型，此处类型定义本身就不符合JSON解析的常规规则。
• 报错提示实际拿到的是List<dynamic>类型，说明你的API返回的根数据结构是数组，不是你预想的Map对象，直接把数组传给期望Map入参的fromJson方法自然触发类型不匹配错误。
• 附加小问题：当前fromJson内取值逻辑写的是json['']，用空字符串作为键取值，和你Album类定义的url字段不匹配，也需要对应修正。

解决步骤 #

1. 先查看控制台打印的response.body内容，确认接口返回的实际结构：
   • 如果返回是类似{"url":"xxx"}的单个对象，直接修正fromJson方法即可
   • 如果返回是类似[{"url":"xxx"}]的数组结构，需要先取出数组内的目标元素再做解析
2. 修正Album类的fromJson实现：

factory Album.fromJson(Map<String, dynamic> json) {
  // 此处key要和接口返回的字段名完全对应，如果你接口返回的url字段名就是url，就写json['url']
  return Album(url: json['url'] as String);
}

3. 调整fetchAlbum内的解析逻辑，适配数组返回的情况：

if (response.statusCode == 200) {
  print(response.body);
  final dynamic decodedData = jsonDecode(response.body);
  if (decodedData is List) {
    // 接口返回数组的情况，根据你的业务逻辑取对应下标的元素，这里示例取第一个
    return Album.fromJson(decodedData.first as Map<String, dynamic>);
  } else {
    return Album.fromJson(decodedData as Map<String, dynamic>);
  }
}

4. 可选优化：你的请求传的是JSON格式参数，可把请求头的Content-type改为application/json更符合接口规范，避免部分接口校验不通过。

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