Fehler mit try abfangen

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 10 von 27.

Ein Netzwerkaufruf kann fehlschlagen: Das Telefon hat kein Signal, der Server ist ausgefallen, der Pfad ist falsch. Wenn fetch fehlschlägt, wirft es einen Fehler: eine ApiException, eine kleine Klasse am Anfang von api.dart mit einem statusCode und einer message. Ein Fehler, den niemand abfängt, beendet deine Funktion und erscheint als roter Fehler in der Konsole, und die Person sieht einen Spinner, der nie aufhört.

Fange ihn mit try und catch ab:

try {
  final text = await fetch('/message');
  // wird nur ausgeführt, wenn fetch erfolgreich war
} catch (e) {
  // wird nur ausgeführt, wenn fetch eine Ausnahme ausgelöst hat
  print('It failed: $e');
}

Dart führt den try-Block aus. Wenn darin etwas einen Fehler wirft, springt Dart direkt zu catch, und e enthält den Fehler. Die Zeilen nach der fehlerauslösenden Zeile in try werden nie ausgeführt.

Setze das await selbst in try: Diese Zeile wirft den Fehler. Zeige der Person dann mit Worten, was passiert ist, statt dass das Programm abstürzt.

Um den Fehler in der Vorschau zu sehen, schreibe offline = true; als erste Zeile von main und drücke auf Run. offline stammt aus api.dart: Es lässt jeden Aufruf fehlschlagen, als hätte das Telefon kein Signal. Entferne die Zeile, bevor du auf Check drückst.

Aufgabe

Mittel

Sorge dafür, dass loadMessage einen fehlgeschlagenen Aufruf übersteht:

füge fetch und das darauffolgende setState in einen try-Block ein
stoppe in catch (e) den Ladekreisel und setze die Nachricht auf Could not load: $e

Probier es selbst

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  String message = 'No message yet';
  bool loading = false;

  Future<void> loadMessage() async {
    setState(() {
      loading = true;
    });
    final text = await fetch('/message');
    setState(() {
      message = text;
      loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            loading
                ? const CircularProgressIndicator()
                : Text(message, style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: loadMessage, child: const Text('Load message')),
          ],
        ),
      ),
    );
  }
}

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler