面试题：Flutter 异步/await 在复杂业务逻辑中的性能优化

Question

假设一个Flutter应用需要依次完成多个异步任务，如从不同API获取数据并进行处理，如何使用异步/await来管理这些任务，确保应用性能最优，避免阻塞UI线程？请给出具体代码示例及优化思路。

Answer 1

1. 使用 async/await 管理异步任务确保性能及避免阻塞UI线程的思路

• 顺序执行任务：使用 async/await 按顺序依次执行每个异步任务，这样可以保证任务依次完成，避免前一个任务未完成就开始下一个任务导致的数据不一致等问题。
• 优化点：
  • 减少不必要等待：如果某些任务之间没有依赖关系，可以考虑并行执行（使用 Future.wait），提高整体效率。
  • 异常处理：在每个 await 处进行异常捕获，确保某个任务失败不会导致整个应用崩溃。

2. 代码示例

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Async/Await Example'),
        ),
        body: Center(
          child: FutureBuilder(
            future: fetchDataSequentially(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                }
                return Text('Data: ${snapshot.data}');
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Future<String> fetchDataSequentially() async {
  try {
    // 第一个API请求
    final response1 = await http.get(Uri.parse('https://example.com/api1'));
    if (response1.statusCode == 200) {
      final data1 = jsonDecode(response1.body);
      print('Data from API1: $data1');
      // 处理数据1

      // 第二个API请求
      final response2 = await http.get(Uri.parse('https://example.com/api2'));
      if (response2.statusCode == 200) {
        final data2 = jsonDecode(response2.body);
        print('Data from API2: $data2');
        // 处理数据2

        // 返回处理结果
        return 'Processed data from both APIs';
      } else {
        throw Exception('Failed to load data from API2');
      }
    } else {
      throw Exception('Failed to load data from API1');
    }
  } catch (e) {
    print('Error: $e');
    rethrow;
  }
}

在上述代码中：

• fetchDataSequentially 函数使用 async/await 依次执行两个API请求。
• 每个请求完成后，检查状态码，若成功则处理数据，失败则抛出异常。
• FutureBuilder 用于在UI中展示异步任务的执行状态，在任务执行过程中显示加载指示器，完成后显示数据或错误信息。