Flutter中如何将Future<List<Product>>转为List<Product>？API请求报错解决

问题分析 #

你遇到两个核心类型错误：

1. Future<List>转List失败：直接将异步函数返回的Future强制转换为同步列表，异步操作必须等待完成才能获取结果。
2. JSON解析的Cast错误：错误地将API返回的结果列表整体转换为List<Product>类型，实际每个元素是单个Product的JSON对象，需要逐个解析。

解决方案 #

1. 修复Product类与fetchProduct函数 #

首先确保Product类包含fromJson构造函数，用于将JSON对象转换为Product实例：

class Product {
  final String id;
  final String title;
  // 根据Doofinder API返回的字段添加其他属性

  Product({required this.id, required this.title});

  // 从JSON解析Product的构造函数
  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json['id'] ?? '', // 处理可能的空值
      title: json['title'] ?? '',
      // 对应API返回的其他字段赋值
    );
  }
}

然后修改fetchProduct函数，正确解析JSON并转换为Product列表：

Future<List<Product>> fetchProduct(String query) async {
  final response = await http.get(
    Uri.parse('https://eu1-search.doofinder.com/5/search?hashid=30a5f&query=$query'),
    headers: {'Authorization': 'c59dadc5d822ca2b134f170'},
  );

  if (response.statusCode == 200) {
    final Map<String, dynamic> data = jsonDecode(response.body);
    final List<dynamic> results = data['results'];
    // 遍历每个JSON对象，转换为Product实例
    return results.map((item) => Product.fromJson(item as Map<String, dynamic>)).toList();
  } else {
    throw Exception('Failed to load products');
  }
}

2. 修复异步调用代码 #

调用fetchProduct时必须使用async/await等待异步结果，不能直接强制类型转换：

onChanged: (_) => EasyDebounce.debounce(
  'tFMemberController',
  const Duration(milliseconds: 800),
  () async {
    isSearchStarted = textController!.text.trim().isNotEmpty;
    if (isSearchStarted) {
      // 等待异步函数返回结果后再赋值
      searchedProducts = await fetchProduct(textController!.text);
    } else {
      // 清空搜索结果
      searchedProducts = [];
    }
    setState(() {});
  },
)

错误原因说明 #

• 异步类型错误：fetchProduct返回Future<List<Product>>，代表一个尚未完成的异步操作，必须用await等待其执行完成，才能获取实际的List<Product>，直接强制转换会导致类型不匹配。
• JSON解析错误：cast<List<Product>>会尝试将列表中的每个元素转换为List<Product>，但API返回的每个元素是单个商品的JSON对象，正确的做法是逐个将JSON对象转换为Product实例。

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