Flutter Mobile Development · บทเรียน

การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await

จัดการการดำเนินการที่ล่าช้าใน Dart และ Flutter ด้วย Futures, async, await และการจัดการข้อผิดพลาด

บทเรียน 4 จาก 413 ขั้นตอน

การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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.

เริ่มต้นได้ฟรี

เรียนรู้ Dart ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
22
บทเรียน
88

คำถามที่พบบ่อย

บทเรียน “การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await”

จัดการการดำเนินการที่ล่าช้าใน Dart และ Flutter ด้วย Futures, async, await และการจัดการข้อผิดพลาด คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ระบบนิเวศและการตั้งค่า Flutter
  2. พื้นฐาน Dart สำหรับ Flutter
  3. การสร้างแอป Flutter แรกของคุณ
  4. การเขียนโปรแกรมแบบไม่พร้อมกันด้วย Futures และ async/await
← กลับไปที่ Flutter Mobile Development