תפיסת שגיאות באמצעות try

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 10 מתוך 27.

קריאת רשת עלולה להיכשל: לטלפון אין קליטה, השרת מושבת, הנתיב שגוי. כש־fetch נכשלת, היא זורקת שגיאה: ApiException, מחלקה קטנה בראש הקובץ api.dart עם statusCode ועם message. שגיאה שאף אחד לא תופס עוצרת את הפונקציה ומופיעה כשגיאה אדומה במסוף, והמשתמש רואה גלגל טעינה שלא מפסיק להסתובב.

תפסו אותה באמצעות try ו־catch:

try {
  final text = await fetch('/message');
  // פועל רק כאשר fetch הצליח
} catch (e) {
  // פועל רק כאשר fetch זרק חריגה
  print('It failed: $e');
}

Dart מריצה את בלוק try. אם משהו בתוכו זורק שגיאה, Dart קופצת ישירות אל catch, ו־e מכיל את השגיאה. השורות שאחרי השורה שנכשלה בתוך try לעולם לא יפעלו.

הכניסו את await עצמו לתוך try: זו השורה שזורקת את השגיאה. לאחר מכן הסבירו למשתמש במילים מה קרה, במקום לגרום לקריסה.

כדי לראות את הכישלון בתצוגה המקדימה, כתבו offline = true; בתור השורה הראשונה של main ולחצו על הפעלה. offline מגיע מ־api.dart: הוא גורם לכל קריאה להיכשל כאילו לטלפון אין קליטה. הסירו את השורה לפני שתלחצו על בדיקה.

אתגר

בינוני

גרום ל־loadMessage להתמודד עם קריאה שנכשלה:

הכנס את fetch ואת setState שאחריו לבלוק try
בתוך catch (e), עצור את מחוון הטעינה והגדר את ההודעה ל־Could not load: $e

נסו בעצמכם

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')),
          ],
        ),
      ),
    );
  }
}