Menangkap Error dengan try

Termasuk bagian Data dan Jaringan dalam perjalanan Flutter di Coddy. Pelajaran 10 dari 27.

Panggilan jaringan bisa gagal: ponsel tidak mendapat sinyal, server sedang mati, atau jalurnya salah. Saat fetch gagal, fungsi itu melemparkan error: sebuah ApiException, class kecil di bagian atas api.dart dengan statusCode dan message. Error yang tidak ditangani akan menghentikan fungsi dan muncul sebagai error merah di Console, sementara orang yang menggunakannya melihat indikator pemuatan yang tidak pernah berhenti.

Tangani dengan try dan catch:

try {
  final text = await fetch('/message');
  // hanya dijalankan saat fetch berhasil
} catch (e) {
  // hanya dijalankan saat fetch melempar error
  print('It failed: $e');
}

Dart menjalankan blok try. Jika ada sesuatu di dalamnya yang melemparkan error, Dart langsung berpindah ke catch, dan e berisi error tersebut. Baris setelah baris yang gagal di dalam try tidak akan dijalankan.

Letakkan await itu sendiri di dalam try: baris itulah yang melemparkan error. Lalu beri tahu orang yang menggunakannya apa yang terjadi dengan kata-kata, alih-alih membuat program berhenti karena error.

Untuk melihat kegagalannya di pratinjau, tulis offline = true; sebagai baris pertama di main, lalu tekan Jalankan. offline berasal dari api.dart: kode itu membuat setiap panggilan gagal seolah-olah ponsel tidak mendapat sinyal. Hapus baris itu sebelum menekan Periksa.

Tantangan

Sedang

Buat loadMessage tetap berfungsi saat pemanggilan gagal:

letakkan fetch dan setState setelahnya di dalam blok try
di dalam catch (e), hentikan spinner dan atur pesan menjadi Could not load: $e

Coba sendiri

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

Uji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di Data dan Jaringan

Latihan sendiri: Compiler Flutter online