面试题：Flutter异步操作中如何使用Future优化数据加载

创建异步函数：

Future<YourModel> fetchData() async {
  // 使用http库发送网络请求，这里假设已导入http库
  final response = await http.get(Uri.parse('your_api_url'));
  if (response.statusCode == 200) {
    // 解析JSON数据，假设已定义fromJson方法在YourModel类中
    return YourModel.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load data');
  }
}

在StatefulWidget中使用异步函数：

在State类中定义一个变量来存储数据，例如：

YourModel? data;

在initState方法中调用异步函数：

@override
void initState() {
  super.initState();
  fetchData().then((value) {
    setState(() {
      data = value;
    });
  }).catchError((error) {
    print('Error: $error');
  });
}

处理加载中的状态：

可以在State类中再定义一个变量表示加载状态，例如：

bool isLoading = false;

在initState中修改为：

@override
void initState() {
  super.initState();
  setState(() {
    isLoading = true;
  });
  fetchData().then((value) {
    setState(() {
      data = value;
      isLoading = false;
    });
  }).catchError((error) {
    print('Error: $error');
    setState(() {
      isLoading = false;
    });
  });
}

在界面中显示数据：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Data Loading')),
    body: isLoading
       ? const Center(child: CircularProgressIndicator())
        : data != null
           ? Text(data!.toString())
            : const Center(child: Text('No data')),
  );
}

全局错误处理（可选）：

可以使用runZoned来全局捕获未处理的错误，例如在main函数中：

void main() {
  runZoned(() {
    runApp(MyApp());
  }, onError: (error, stackTrace) {
    print('Global error: $error\n$stackTrace');
  });
}

以上步骤展示了如何使用Future在Flutter中进行异步数据加载、处理错误以及在界面上显示数据。在实际应用中，需要根据具体的业务需求和API响应结构来调整代码，比如http请求的参数、JSON解析逻辑等。同时，还可以使用async/await语法糖来使异步代码更易读。

星途面试题库

面试题：Flutter异步操作中如何使用Future优化数据加载

知识考点

面试题答案