MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

详解 Flutter 的 async/await 语法糖

2023-02-201.4k 阅读

一、Flutter 异步编程简介

在 Flutter 应用开发中，很多操作是耗时的，比如网络请求、文件读写、数据库操作等。如果在主线程中执行这些操作，会导致界面卡顿，严重影响用户体验。为了解决这个问题，Flutter 引入了异步编程的概念，使得耗时操作可以在后台线程执行，而主线程可以继续处理用户交互等其他任务。

异步编程在 Flutter 中有多种实现方式，其中 async/await 语法糖是一种非常简洁且强大的方式。它基于 Dart 语言的异步编程模型，为开发者提供了一种类似于同步代码的编写风格来处理异步操作，极大地提高了代码的可读性和可维护性。

二、async 关键字

2.1 async 函数的定义

async 关键字用于将一个函数标记为异步函数。一个异步函数会返回一个 Future 对象。Future 代表一个异步操作的结果，它可能在未来某个时间完成。

示例代码如下：

Future<String> fetchData() async {
  // 模拟一个耗时操作，这里使用 Future.delayed 模拟网络请求等耗时操作
  await Future.delayed(Duration(seconds: 2));
  return 'Data fetched successfully';
}

在上述代码中，fetchData 函数被定义为异步函数，因为它使用了 async 关键字。函数内部使用 await Future.delayed 模拟了一个耗时 2 秒的操作，之后返回一个字符串。注意，函数返回类型是 Future<String>，这是因为异步函数总是返回一个 Future 对象。

2.2 async 函数的返回值

异步函数的返回值会自动被包装成 Future 对象。即使你返回的是一个普通值，Dart 也会将其包装成 Future。例如：

Future<int> returnNumber() async {
  return 42;
}

这里 returnNumber 函数返回一个整数 42，但实际上它返回的是 Future<int>，这个 Future 已经完成并且结果是 42。

三、await 关键字

3.1 await 的作用

await 关键字只能在 async 函数内部使用。它用于暂停当前 async 函数的执行，直到 await 后面的 Future 对象完成（resolved），然后返回 Future 的结果。

继续上面 fetchData 的例子，我们可以这样调用：

void main() async {
  String data = await fetchData();
  print(data); // 输出: Data fetched successfully
}

在 main 函数中，我们使用 await 等待 fetchData 函数返回的 Future 完成。一旦 Future 完成，await 表达式就会返回 Future 的结果，这里就是字符串 Data fetched successfully，然后将其赋值给 data 变量并打印出来。

3.2 await 与多个 Future

当有多个 Future 时，我们可以依次使用 await 来处理它们。例如：

Future<String> fetchFirstData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'First data';
}

Future<String> fetchSecondData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Second data';
}

void main() async {
  String firstData = await fetchFirstData();
  String secondData = await fetchSecondData();
  print('$firstData and $secondData'); // 输出: First data and Second data
}

在这个例子中，fetchFirstData 和 fetchSecondData 都是异步函数。在 main 函数中，我们先等待 fetchFirstData 完成，获取其结果并赋值给 firstData，然后再等待 fetchSecondData 完成，获取其结果并赋值给 secondData，最后打印出两个数据。

然而，这种方式是顺序执行的，如果 fetchFirstData 和 fetchSecondData 之间没有依赖关系，这样做效率较低，因为第二个 Future 必须等待第一个 Future 完成后才开始执行。我们可以使用 Future.wait 来并发执行多个 Future。

四、Future.wait

4.1 Future.wait 的基本使用

Future.wait 接受一个 Future 对象的列表，并返回一个新的 Future。这个新的 Future 会在所有传入的 Future 都完成后完成，其结果是一个包含所有传入 Future 结果的列表。

修改上面的例子，使用 Future.wait：

Future<String> fetchFirstData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'First data';
}

Future<String> fetchSecondData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'Second data';
}

void main() async {
  List<Future<String>> futures = [fetchFirstData(), fetchSecondData()];
  List<String> results = await Future.wait(futures);
  print('${results[0]} and ${results[1]}'); // 输出: First data and Second data
}

在这个例子中，fetchFirstData 和 fetchSecondData 会并发执行。Future.wait 等待所有 Future 完成，并将它们的结果收集到一个列表中。我们通过 await 获取这个结果列表，然后打印出相应的数据。

4.2 Future.wait 中的错误处理

如果 Future.wait 中的任何一个 Future 出错，整个 Future.wait 返回的 Future 也会出错。我们可以使用 try-catch 块来捕获错误。

示例如下：

Future<String> fetchFirstData() async {
  await Future.delayed(Duration(seconds: 1));
  return 'First data';
}

Future<String> fetchSecondData() async {
  throw Exception('Second data fetch error');
}

void main() async {
  List<Future<String>> futures = [fetchFirstData(), fetchSecondData()];
  try {
    List<String> results = await Future.wait(futures);
    print('${results[0]} and ${results[1]}');
  } catch (e) {
    print('Error: $e'); // 输出: Error: Second data fetch error
  }
}

在这个例子中，fetchSecondData 抛出了一个异常。当 Future.wait 检测到其中一个 Future 出错时，它返回的 Future 也会出错，我们通过 try-catch 块捕获并打印出错误信息。

五、async/await 与异常处理

5.1 try-catch 块处理异常

在 async 函数中，我们可以使用 try-catch 块来捕获异步操作中抛出的异常。例如：

Future<String> fetchDataWithError() async {
  await Future.delayed(Duration(seconds: 1));
  throw Exception('Data fetch error');
}

void main() async {
  try {
    String data = await fetchDataWithError();
    print(data);
  } catch (e) {
    print('Error: $e'); // 输出: Error: Data fetch error
  }
}

在 fetchDataWithError 函数中，模拟了一个异步操作并抛出了异常。在 main 函数中，使用 try-catch 块捕获这个异常，并打印出错误信息。

5.2 on 关键字细化异常捕获

除了使用 catch 捕获所有类型的异常，我们还可以使用 on 关键字来捕获特定类型的异常。例如：

class CustomException implements Exception {
  final String message;
  CustomException(this.message);
}

Future<String> fetchDataWithCustomError() async {
  await Future.delayed(Duration(seconds: 1));
  throw CustomException('Custom data fetch error');
}

void main() async {
  try {
    String data = await fetchDataWithCustomError();
    print(data);
  } on CustomException catch (e) {
    print('Custom Error: $e'); // 输出: Custom Error: Custom data fetch error
  } catch (e) {
    print('Other Error: $e');
  }
}

在这个例子中，定义了一个自定义异常 CustomException。在 fetchDataWithCustomError 函数中抛出这个自定义异常。在 main 函数中，先使用 on CustomException 捕获特定类型的异常，然后再使用普通的 catch 块捕获其他类型的异常。这样可以更精细地处理不同类型的异常。

六、async/await 在 Flutter 实际开发中的应用

6.1 网络请求

在 Flutter 应用中，网络请求是非常常见的异步操作。以 http 库为例，假设我们要获取一个 JSON 数据：

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

Future<Map<String, dynamic>> fetchJsonData() async {
  Uri url = Uri.parse('https://example.com/api/data');
  http.Response response = await http.get(url);
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load data');
  }
}

void main() async {
  try {
    Map<String, dynamic> data = await fetchJsonData();
    print(data);
  } catch (e) {
    print('Error: $e');
  }
}

在这个例子中，fetchJsonData 函数使用 http.get 发送网络请求，使用 await 等待请求完成。如果请求成功（状态码为 200），则将响应体解析为 JSON 数据并返回；否则抛出异常。在 main 函数中，通过 try-catch 块处理可能出现的异常。

6.2 文件读写

Flutter 中文件读写也是异步操作。例如，读取一个文本文件：

import 'dart:io';

Future<String> readTextFile() async {
  File file = File('path/to/your/file.txt');
  return await file.readAsString();
}

void main() async {
  try {
    String content = await readTextFile();
    print(content);
  } catch (e) {
    print('Error: $e');
  }
}

在这个例子中，readTextFile 函数使用 File.readAsString 异步读取文件内容，通过 await 获取文件内容并返回。在 main 函数中，同样使用 try-catch 块处理可能出现的文件读取错误。

七、async/await 的性能考虑

7.1 并发与顺序执行

如前面提到的，使用 await 依次处理多个 Future 会导致顺序执行，而使用 Future.wait 可以实现并发执行。在实际开发中，需要根据具体需求选择合适的方式。如果多个异步操作之间没有依赖关系，并发执行可以显著提高效率。但如果有依赖关系，顺序执行可能更合适。

例如，假设我们有两个异步操作，一个是获取用户信息，另一个是根据用户信息获取用户的订单列表。这两个操作有依赖关系，就需要顺序执行：

Future<User> fetchUser() async {
  // 模拟获取用户信息的异步操作
  await Future.delayed(Duration(seconds: 1));
  return User('John', 25);
}

Future<List<Order>> fetchOrders(User user) async {
  // 模拟根据用户获取订单列表的异步操作
  await Future.delayed(Duration(seconds: 1));
  return [Order('Order 1'), Order('Order 2')];
}

void main() async {
  User user = await fetchUser();
  List<Order> orders = await fetchOrders(user);
  print('User: ${user.name}, Orders: ${orders.length}');
}

7.2 资源管理

在异步操作中，特别是涉及到文件、网络连接等资源时，要注意资源的及时释放。例如，在进行文件读写时，如果打开文件后没有关闭，可能会导致资源泄漏。

import 'dart:io';

Future<String> readTextFile() async {
  File file = File('path/to/your/file.txt');
  FileStream stream = file.openRead();
  try {
    return await stream.transform(utf8.decoder).join();
  } finally {
    await stream.close();
  }
}

在这个例子中，使用 try-finally 块确保无论文件读取是否成功，文件流都会被关闭，从而避免资源泄漏。

八、总结 async/await 的优势与注意事项

8.1 优势

  • 代码可读性强：async/await 使得异步代码看起来更像同步代码，开发者可以按照顺序编写异步操作，大大提高了代码的可读性和可维护性。例如，对比使用回调函数和 async/await 处理网络请求的代码，async/await 的代码结构更加清晰。
  • 错误处理方便：通过 try-catch 块可以方便地捕获异步操作中抛出的异常，而不需要像传统回调函数那样在每个回调中处理错误，使得错误处理更加集中和统一。

8.2 注意事项

  • 阻塞主线程：虽然 async/await 用于处理异步操作，但如果在 await 之前有大量的同步计算，仍然可能阻塞主线程。例如：
void main() async {
  // 大量同步计算
  for (int i = 0; i < 100000000; i++) {
    // 一些复杂计算
  }
  String data = await fetchData();
  print(data);
}

在这个例子中，大量的同步计算会阻塞主线程，导致界面卡顿，即使后面的 fetchData 是异步操作也无济于事。所以要尽量避免在 async 函数中进行大量的同步计算。

  • 嵌套问题：虽然 async/await 减少了回调地狱的问题，但如果在 async 函数中嵌套过多的 async 函数调用，代码可能会变得复杂难以维护。要尽量保持代码的扁平化结构，合理拆分异步操作。

通过深入理解和正确使用 async/await 语法糖，Flutter 开发者可以更高效地处理异步任务，提升应用的性能和用户体验。无论是网络请求、文件读写还是其他耗时操作，async/await 都为我们提供了一种简洁而强大的解决方案。在实际开发中，结合具体业务场景，充分发挥其优势，避免潜在问题，是编写高质量 Flutter 应用的关键之一。