能否让Future.wait()中的Futures按顺序执行？

你当前用Future.wait会让两个请求并行触发，这就导致了两次网络请求的可能。要利用缓存避免重复请求，你需要让两个Future串行执行——等第一个请求完成并缓存后，再发起第二个请求。

具体实现 #

创建一个异步函数，通过await依次执行两个请求，再返回结果列表：

Future<List> fetchImageData(String image) async {
  // 先执行第一个请求，触发缓存
  final dimensions = await getImageDimensions(image);
  // 再执行第二个请求，此时直接读取缓存
  final imageData = await getImage(image);
  
  return [dimensions, imageData];
}

然后在FutureBuilder中使用这个函数替代Future.wait：

FutureBuilder<List>(
  future: fetchImageData(image),
  builder: (ctx, snapshot) {
    if (snapshot.hasData) {
      final dimensions = snapshot.data![0];
      final image = snapshot.data![1];
      // 这里构建你的UI
    } else if (snapshot.hasError) {
      // 处理错误状态
      return const Text('加载失败');
    } else {
      // 加载中状态
      return const CircularProgressIndicator();
    }
  },
)

顺序无关性说明 #

如果不在乎执行顺序，先调用getImage再调用getImageDimensions也完全可以，只要保证串行执行就行：

Future<List> fetchImageData(String image) async {
  final imageData = await getImage(image);
  final dimensions = await getImageDimensions(image);
  
  return [dimensions, imageData];
}

只要第一个请求完成并缓存了图片，第二个请求就会直接读取缓存，不会发起新的网络调用。

注意事项 #

确保你的网络请求/图片加载库（比如cached_network_image或自定义的HttpClient缓存逻辑）确实会缓存请求结果，这样串行执行才能达到预期的效果。

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