Flutter Mobile Development · 课时

使用 Future 与 async/await 进行异步编程

使用 Future、async、await 和错误处理，在 Dart 与 Flutter 中处理延迟操作。

使用 Future 与 async/await 进行异步编程 是 CoddyKit 上的免费 Flutter Mobile Development 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Flutter Mobile Development 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Flutter Mobile Development 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Why Async?

Apps fetch data, read files, and wait on timers. Blocking would freeze the UI, so Dart uses asynchronous programming to stay responsive.

The Future Type

A Future is a value that’ll arrive later. It’s either uncompleted, completed with a value, or completed with an error.

Future<String> fetchName() {
  return Future.delayed(
    Duration(seconds: 1),
    () => "Ada",
  );
}

async and await

Mark a function async and use await to pause until a Future completes — async code that reads top-to-bottom like normal.

Future<void> main() async {
  print("start");
  String name = await fetchName();
  print("Hello, " + name);
}

await Suspends, Not Blocks

Key point: await suspends, it doesn’t block. The event loop keeps handling other work, so the UI stays responsive.

Returning Values

An async function always returns a Future. A plain return inside it just completes that Future with the value.

Future<int> doubleIt(int x) async {
  return x * 2;  // becomes Future<int>
}

Error Handling

Wrap awaited calls in try/catch to handle failures — exactly like catching synchronous exceptions.

try {
  var data = await fetchData();
} catch (e) {
  print("Failed: " + e.toString());
}

Chaining with then

Without async/await, you attach callbacks with then and catchError. Async/await is clearer but compiles to the same idea.

fetchName()
    .then((n) => print(n))
    .catchError((e) => print("error"));

Running in Parallel

Use Future.wait to launch several Futures at once and await them together — faster than awaiting one after another.

var results = await Future.wait([
  fetchA(),
  fetchB(),
]);

FutureBuilder in Flutter

The FutureBuilder widget rebuilds your UI as a Future goes from loading to done — so you show spinners and results declaratively.

FutureBuilder<String>(
  future: fetchName(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) return CircularProgressIndicator();
    return Text(snapshot.data!);
  },
)

Streams: Many Values

A Future yields one value; a Stream yields many over time. Listen with await for or a StreamBuilder.

Stream<int> counter() async* {
  for (var i = 0; i < 3; i++) {
    yield i;
  }
}

Putting It Together

Putting it together: Futures for one-off results, async/await for clean code, try/catch for errors, and FutureBuilder to bind async data to widgets.

Quick Check

One quick check on Dart’s Future and async/await before you move on.

Recap

You’ve got Dart async: Future for later values, async/await for readable code, try/catch for errors, and Future.wait plus FutureBuilder.

常见问题解答

「使用 Future 与 async/await 进行异步编程」课时是免费的吗？

是的 — 「使用 Future 与 async/await 进行异步编程」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Flutter Mobile Development 课程的其余内容，请升级到 CoddyKit PRO。 Flutter Mobile Development 课程共包含 4 节课。

「使用 Future 与 async/await 进行异步编程」这节课中我会学到什么？

使用 Future、async、await 和错误处理，在 Dart 与 Flutter 中处理延迟操作。你通过在浏览器中直接运行的动手代码来练习 Flutter Mobile Development，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Flutter Mobile Development 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Flutter Mobile Development 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 Future 与 async/await 进行异步编程」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Flutter Mobile Development 课中编写并运行代码吗？

能。每节 Flutter Mobile Development 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Flutter Mobile Development