Mobilutveckling med Flutter · Lektion

Futures och async/await

Förstå Darts `Future`-klass och nyckelorden `async`/`await` för att utföra icke-blockerande åtgärder och hantera fördröjda resultat.

Lektion 1 av 411 steg

Futures och async/await är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad är asynkron kod?

Vid apputveckling behöver vi ofta utföra uppgifter som tar tid, till exempel att hämta data från internet eller läsa en fil.

Om dessa uppgifter blockerar appens huvudtråd blir gränssnittet trögt och fryser. Det ger en dålig användarupplevelse!

Asynkron programmering gör att appen kan starta en långvarig uppgift och fortsätta göra andra saker, som att uppdatera gränssnittet, medan den väntar på att uppgiften ska slutföras.

Problemet med blockerande kod

Föreställ dig en uppgift som tar 3 sekunder. Om den körs på huvudtråden fryser appen i 3 sekunder. Prova att köra det här exemplet för att se hur det blockerar:

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öt Darts Future

Darts klass Future är lösningen för icke-blockerande åtgärder. En Future representerar ett möjligt värde eller fel som blir tillgängligt någon gång i framtiden.

Det fungerar som ett skuldebrev för ett värde.
När du anropar en asynkron funktion returnerar den omedelbart ett Future-objekt.
Det faktiska resultatet levereras till Future när åtgärden är klar.

Tänk på det som att beställa mat: du får ett kvitto, alltså Future, direkt, men maten, alltså värdet, kommer senare.

Skapa en enkel Future

Du kan skapa en Future som slutförs efter en fördröjning med hjälp av Future.delayed. Den tar emot en tidsperiod och en funktion som ska köras när fördröjningen är över.

Kör koden för att se hur meddelandet "Data received!" visas efter en kort väntan utan att blockera meddelandet "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.");
}

Hämta värden med .then()

För att faktiskt använda värdet som en Future så småningom tillhandahåller kopplar du en callback-funktion med metoden .then().

Koden i .then() körs först när Future har slutförts utan fel och levererat sitt värde. Så här reagerar du på en slutförd asynkron uppgift.

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)");
}

Hantera fel i Future

Asynkrona åtgärder kan misslyckas, till exempel på grund av nätverksproblem. För att hantera fel kan du kedja .catchError() efter .then(). Den här callbacken körs om Future slutförs med ett fel.

.catchError() tar emot felobjektet, så att du kan reagera på problem på ett smidigt sätt.

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!");
  });
}

Förenkla med async och await

Även om .then() och .catchError() fungerar kan många kedjade anrop bli svåra att läsa. Dart erbjuder nyckelorden async och await för att få asynkron kod att se ut och fungera mer som synkron kod.

async: Markerar en funktion som asynkron. En async-funktion returnerar alltid en Future.
await: Kan endast användas i en async-funktion. Det pausar körningen av async-funktionen tills den Future som den väntar på har slutförts.

Resten av programmet fortsätter att köras medan en await är aktiv.

Async/await i praktiken

Vi skriver om vårt exempel med hämtning av användardata med hjälp av async och await. Lägg märke till hur mycket renare och mer sekventiell koden ser ut!

Nyckelordet await får koden i main att verka vänta, men själva funktionen main är en async-funktion. Därför returnerar den faktiskt en Future och blockerar inte hela programmet.

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 och await blir felhantering bekant! Du kan använda vanliga try-catch-block runt await-uttryck för att fånga undantag som kastas av Futures.

Det gör det mycket mer intuitivt och lättläst att hantera potentiella fel i asynkrona operationer.

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!");
  });
}

Kontrollera dina kunskaper

Studera följande kodexempel i Dart:

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

Besvara frågan i den interaktiva lektionen

Repetition av Futures och Async/Await

Du har bemästrat grunderna i asynkron programmering i Dart!

Future: En platshållare för ett värde som blir tillgängligt senare.
.then()/.catchError(): Metoder för att hantera om en Future lyckas eller misslyckas.
async: Markerar en funktion som utför asynkrona operationer och returnerar en Future.
await: Pausar en async-funktion tills en Future är klar, så att asynkron kod kan läsas som synkron kod.
try-catch: Används tillsammans med await för robust felhantering.

Dessa verktyg är avgörande när du bygger responsiva Flutter-appar som kommunicerar med externa resurser. Härnäst använder vi dessa koncept för att göra HTTP-anrop!

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Futures och async/await” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”Futures och async/await”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”Futures och async/await”?

Förstå Darts `Future`-klass och nyckelorden `async`/`await` för att utföra icke-blockerande åtgärder och hantera fördröjda resultat. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Futures och async/await”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till Mobilutveckling med Flutter