Mobiludvikling med Flutter · Lektion

Futures og async/await

Forstå Darts `Future`-klasse og nøgleordene `async`/`await` til udførelse af ikke-blokerende operationer og håndtering af forsinkede resultater.

Lektion 1 af 411 trin

Futures og async/await er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad er asynkron kode?

I appudvikling har vi ofte brug for at udføre opgaver, der tager tid, f.eks. at hente data fra internettet eller læse en fil.

Hvis disse opgaver blokerer appens hovedtråd, bliver brugerfladen ufølsom og fryser. Det giver en dårlig brugeroplevelse!

Asynkron programmering giver din app mulighed for at starte en langvarig opgave og fortsætte med at udføre andre ting, f.eks. opdatere brugerfladen, mens den venter på, at opgaven bliver færdig.

Problemet med blokerende kode

Forestil dig en opgave, der tager 3 sekunder. Hvis den kører på hovedtråden, fryser din app i 3 sekunder. Prøv at køre dette eksempel for at se, hvordan den blokerer:

void main() {
  print("Starting a long task...");
  // Simulate a long-running operation
  var result = _performHeavyCalculation();
  print("Task finished with result: $result");
  print("End of program.");
}

String _performHeavyCalculation() {
  // Simulate delay without async/await
  var startTime = DateTime.now();
  while (DateTime.now().difference(startTime).inSeconds < 3) {
    // Busy-wait, blocking the thread
  }
  return "Calculated Data";
}

Mød Dart Future

Klassen Future i Dart er din løsning til ikke-blokerende handlinger. En Future repræsenterer en mulig værdi eller fejl, som bliver tilgængelig på et tidspunkt i fremtiden.

Det er som et løfte om en værdi.
Når du kalder en asynkron funktion, returnerer den straks et Future-objekt.
Det faktiske resultat leveres til Future-objektet, når handlingen er fuldført.

Tænk på det som at bestille mad: Du får straks en kvittering, altså Future-objektet, men maden, altså værdien, kommer senere.

Opret en simpel Future

Du kan oprette en Future, der fuldføres efter en forsinkelse, ved at bruge Future.delayed. Den tager en varighed og en funktion, der skal udføres, når forsinkelsen er udløbet.

Kør denne kode for at se, hvordan meddelelsen "Data received!" vises efter en kort ventetid uden at blokere meddelelsen "Program continues!".

void main() {
  print("Program starts!");

  Future.delayed(Duration(seconds: 2), () {
    print("Data received after 2 seconds!");
  });

  print("Program continues immediately!");
  print("End of main function.");
}

Hent værdier med .then()

For rent faktisk at bruge den værdi, som en Future til sidst leverer, knytter du en tilbagekaldsfunktion til den ved hjælp af metoden .then().

Koden i .then() kører først, når Future fuldføres korrekt og leverer sin værdi. Sådan reagerer du på en fuldført asynkron opgave.

void main() {
  print("Fetching user data...");

  _fetchUserData().then((userData) {
    print("User data fetched: $userData");
  });

  print("UI can update while data fetches.");
}

Future<String> _fetchUserData() {
  return Future.delayed(Duration(seconds: 2), () => "Alice (ID: 123)");
}

Håndter fejl i Future

Asynkrone handlinger kan mislykkes, f.eks. på grund af netværksproblemer. For at håndtere fejl kan du kæde .catchError() efter .then(). Dette tilbagekald udføres, hvis Future fuldføres med en fejl.

.catchError() modtager fejlobjektet, så du kan reagere hensigtsmæssigt på problemer.

void main() {
  print("Attempting to fetch data...");

  _fetchFaultyData().then((data) {
    print("Data received: $data");
  }).catchError((error) {
    print("Error caught: $error");
  });
}

Future<String> _fetchFaultyData() {
  return Future.delayed(Duration(seconds: 2), () {
    throw Exception("Failed to connect to server!");
  });
}

Forenkling med async og await

Selvom .then() og .catchError() fungerer, kan det blive svært at læse, når mange af dem kædes sammen. Dart tilbyder nøgleordene async og await, så asynkron kode ser ud og føles mere som synkron kode.

async: Markerer en funktion som asynkron. En async-funktion returnerer altid en Future.
await: Kan kun bruges i en async-funktion. Det sætter udførelsen af async-funktionen på pause, indtil den Future, den venter på, er fuldført.

Resten af programmet fortsætter med at køre, mens en await-handling er aktiv.

Async/await i praksis

Lad os omskrive vores eksempel på hentning af brugerdata ved hjælp af async og await. Bemærk, hvor meget renere og mere sekventiel koden ser ud!

Nøgleordet await får koden i main til at se ud som om den venter, men selve funktionen main er en async-funktion, så den returnerer faktisk en Future og blokerer ikke det overordnede program.

void main() async { // main function is now async
  print("Fetching user data with async/await...");

  String userData = await _fetchUserData(); // Await the Future
  print("User data fetched: $userData");

  print("UI can update while data fetches.");
}

Future<String> _fetchUserData() {
  return Future.delayed(Duration(seconds: 2), () => "Bob (ID: 456)");
}

Try-catch med async/await

Med async og await bliver fejlhåndtering velkendt! Du kan bruge almindelige try-catch-blokke omkring await-udtryk til at fange undtagelser, der kastes af Futures.

Det gør det langt mere intuitivt og overskueligt at håndtere potentielle fejl i asynkrone handlinger.

void main() async {
  print("Attempting to fetch data with try-catch...");

  try {
    String data = await _fetchFaultyData();
    print("Data received: $data");
  } catch (e) {
    print("Error caught: $e");
  }
  print("Program continues after error handling.");
}

Future<String> _fetchFaultyData() {
  return Future.delayed(Duration(seconds: 2), () {
    throw Exception("Network connection lost!");
  });
}

Test din forståelse

Se på følgende Dart-kodestykke:

void main() async {
  print("A");
  await Future.delayed(Duration(seconds: 1), () => print("B"));
  print("C");
}

Besvar den i den interaktive lektion

Opsummering af Futures og Async/Await

Du har styr på det grundlæggende i asynkron programmering i Dart!

Future: En pladsholder for en værdi, der bliver tilgængelig senere.
.then()/.catchError(): Metoder til at håndtere en Futures succes eller fejl.
async: Markerer en funktion, der udfører asynkrone handlinger og returnerer en Future.
await: Sætter en async-funktion på pause, indtil en Future er færdig, så asynkron kode kan læses som synkron kode.
try-catch: Bruges sammen med await til robust fejlhåndtering.

Disse værktøjer er afgørende, når du bygger responsive Flutter-apps, der kommunikerer med eksterne ressourcer. Dernæst bruger vi disse begreber til at sende HTTP-anmodninger!

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Futures og async/await” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Futures og async/await”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Futures og async/await”?

Forstå Darts `Future`-klasse og nøgleordene `async`/`await` til udførelse af ikke-blokerende operationer og håndtering af forsinkede resultater. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Futures og async/await”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mobiludvikling med Flutter