如何在 Back4app 上使用 Flutter Completers 与后端结合

介绍 未来 和 流 是任何类型异步操作的最佳选择。然而，有时这两者都不够。如果你想对 未来 有更高级的控制，那么使用一个 完成器 。这是一个工具，通过它你可以以编程方式完成一个 未来 。在某种程度上，这提供了对异步操作的更好控制。本教程将帮助你在与 back4app 后端交互的应用程序中使用 flutter 完成器 。 在本教程结束时，你将学习如何在 flutter 应用程序中使用 完成器 来管理异步任务，并将这些任务与来自 back4app 的提供的后端服务集成。我们将创建一个非常简单的应用程序，该应用程序使用 完成器 从 back4app 后端获取数据，以控制应用程序的流程。 先决条件 要完成本教程，你需要： 一个 back4app 账户。在 back4app com https //www back4app com 注册一个免费账户。 在你的本地机器上设置 flutter 开发环境。如果你还没有设置，请遵循 flutter 安装指南 https //flutter dev/docs/get started/install 。 对 dart 和 flutter 中的异步编程有基本了解。如果你需要复习，请查看 flutter 异步编程指南 https //dart dev/codelabs/async await 。 步骤 1 – 设置您的 back4app 后端 首先，让我们在 back4app 上设置一个简单的后端，以便我们的 flutter 应用程序可以与之交互。 登录到您的 back4app 账户 并创建一个新项目。 设置一个新的 parse 类 名为 任务 , 用于存储我们的 flutter 应用程序将获取的任务。添加以下列到 任务 类： 名称 (字符串)：任务的名称。 状态 (布尔值)：任务的状态（已完成或未完成）。 在 back4app 数据库中添加一些示例任务 以进行测试。例如： 任务 1 名称 = "完成 flutter 教程", 状态 = true 任务 2 名称 = "开始新项目", 状态 = false 您的 back4app 后端现在可以被 flutter 应用程序访问。 步骤 2 – 创建一个 flutter 项目 接下来，我们将创建一个新的 flutter 项目。 打开终端或命令提示符。 运行以下命令以创建一个新的 flutter 项目： flutter create completer demo 导航到项目目录： cd completer demo 2\ 在您喜欢的代码编辑器中打开项目（例如，vs code，android studio）。 步骤 3 – 添加 parse sdk 和配置应用程序 现在，让我们添加必要的依赖项以与 back4app 进行交互。 打开 pubspec yaml 并添加以下依赖项： dependencies flutter sdk flutter parse server sdk flutter ^3 0 0 2\ 运行 flutter pub get 来安装依赖项。 3\ 在 lib/main dart , 导入 parse sdk import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'dart\ async'; 4\ 在 main 函数中初始化 parse void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your app id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); } 用你的实际 back4app 凭据替换 'your app id' 和 'your client key' 。 步骤 4 – 使用 completers 异步获取数据 现在，让我们使用一个 completer 从 back4app 后端获取数据，并控制数据何时可用于 ui。 在 lib/main dart , 创建一个新类，该类将使用 completer 从 back4app 获取任务 class taskmanager { final completer\<list\<parseobject>> completer = completer(); future\<list\<parseobject>> get tasks => completer future; taskmanager() { fetchtasks(); } void fetchtasks() async { querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('task')); final parseresponse response = await query query(); if (response success && response results != null) { completer complete(response results); } else { completer completeerror('failed to load tasks'); } } } 这个类初始化一个 completer , 开始获取数据，并在数据可用时完成 completer 。 2\ 在 myapp 小部件中，使用 taskmanager 来获取和显示任务： class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home scaffold( appbar appbar(title text('flutter completer demo')), body futurebuilder\<list\<parseobject>>( future taskmanager() tasks, builder (context, snapshot) { if (snapshot connectionstate == connectionstate waiting) { return center(child circularprogressindicator()); } else if (snapshot haserror) { return center(child text('error ${snapshot error}')); } else if (!snapshot hasdata || snapshot data! isempty) { return center(child text('no tasks found ')); } else { return listview\ builder( itemcount snapshot data! length, itembuilder (context, index) { final task = snapshot data!\[index]; return listtile( title text(task get\<string>('name') ?? 'no name'), subtitle text('completed ${task get\<bool>('status') ? 'yes' 'no'}'), ); }, ); } }, ), ), ); } } 3\ 运行你的 flutter 应用程序： 你应该能看到从你的 back4app 后端获取的任务列表，包含它们的名称和完成状态。 结论 在本教程中，你学习了如何使用 flutter completers 来管理异步操作并控制数据获取的流程。通过与 back4app 集成，你为你的 flutter 应用创建了一个简单而强大的后端，使你能够动态获取和显示数据。这种方法可以扩展到处理更复杂的场景，例如用户身份验证、数据操作等。 有关使用 flutter 与 back4app 的更多信息，请查看 back4app flutter 文档 https //www back4app com/docs/flutter/overview 。祝你编码愉快！