[dart] HTTP 요청 시에 적절한 에러 메시지 표시하기

22 Dec 2023

dart

웹 애플리케이션을 개발할 때, HTTP 요청이 실패할 경우 사용자에게 적절한 에러 메시지를 표시하는 것이 중요합니다. 이 글에서는 Dart 언어를 사용하여 HTTP 요청 시에 에러를 처리하고 표시하는 방법에 대해 다루겠습니다.

1. HTTP 패키지 설치

먼저, HTTP 요청을 보내기 위해 http 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가합니다.

dependencies:
  http: ^0.13.3

그리고 다음 명령어를 사용하여 패키지를 설치합니다.

$ flutter pub get

2. HTTP 요청 보내기

다음은 http 패키지를 사용하여 GET 요청을 보내는 예제입니다.

import 'package:http/http.dart' as http;

void fetchData() async {
  try {
    var response = await http.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      // 성공한 경우 데이터 처리
    } else {
      // 에러 처리
    }
  } catch (error) {
    // 에러 처리
  }
}

3. 에러 메시지 표시하기

HTTP 요청에서 발생하는 에러를 적절하게 처리하고 사용자에게 메시지를 표시해야 합니다. 예를 들어, 다음과 같이 showErrorDialog 함수를 만들어 사용자에게 에러 메시지를 표시할 수 있습니다.

import 'package:flutter/material.dart';

void showErrorDialog(BuildContext context, String errorMessage) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('에러'),
        content: Text(errorMessage),
        actions: <Widget>[
          TextButton(
            child: Text('닫기'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

4. 에러 핸들링

위에서 정의한 fetchData 함수에서 HTTP 요청이 실패하거나 에러가 발생한 경우 showErrorDialog 함수를 사용하여 사용자에게 에러 메시지를 표시합니다.

void fetchData() async {
  try {
    var response = await http.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      // 성공한 경우 데이터 처리
    } else {
      showErrorDialog(context, '서버에서 데이터를 불러오는데 실패했습니다.');
    }
  } catch (error) {
    showErrorDialog(context, '네트워크 에러: $error');
  }
}

이렇게 함으로써, HTTP 요청이 실패할 때 적절한 에러 메시지를 사용자에게 표시할 수 있습니다.

이러한 에러 핸들링은 사용자 경험 향상에 큰 영향을 미치므로 개발 시 꼭 고려해야 합니다.

1. HTTP 패키지 설치

2. HTTP 요청 보내기

3. 에러 메시지 표시하기

4. 에러 핸들링

참고 자료