flutter API 연동 방식

flutter의 API 연동 방식은 주로 두 가지로 나뉜다.

 

http 패키지

기본적인 HTTP 요청(REST API)을 처리하는 패키지이며, GET, POST, PUT, DELETE 등의 메소드를 지원한다.

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

Future<void> fetchPosts() async {
  final url = Uri.parse('https://jsonplaceholder.typicode.com/posts');

  try {
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final List data = json.decode(response.body);
      print('Fetched Data: $data');
    } else {
      print('Failed to load data: ${response.statusCode}');
    }
  } catch (error) {
    print('Error occurred: $error');
  }
}

 

주요 기능

 

• 간단하고 직관적인 설계: 기본적인 HTTP 요청(GET, POST, PUT, DELETE 등)을 쉽게 구현할 수 있다.
• 가벼움: 패키지가 단순하고 의존성도 적어 초기 설정이 간단하다.
• 제한된 기능: 추가적인 기능(예: 요청 인터셉터, 파일 업로드, 요청 취소 등)이 부족하다.
• 사용 사례: 간단한 REST API 요청과 응답 처리, 단일 API 호출 중심의 소규모 프로젝트에 적합하다

 

Dio 패키지

고급 기능(인터셉터, 파일 업로드/다운로드 등)을 제공하는 패키지이며, 여러 기능을 사용해 복잡한 네트워크 요구사항에 대응 가능하다.

import 'package:dio/dio.dart';

final dio = Dio();

Future<void> fetchData() async {
  try {
    final response = await dio.get('https://jsonplaceholder.typicode.com/posts');
    print(response.data);
  } catch (e) {
    print('Error: $e');
  }
}

Future<void> uploadFile(String filePath) async {
  final file = await MultipartFile.fromFile(filePath);
  final formData = FormData.fromMap({'file': file});

  final response = await dio.post(
    'https://example.com/upload',
    data: formData,
  );
  print('File uploaded: ${response.statusCode}');
}

 

주요 기능

 

• 고급 기능 제공
  • 인터셉터: 요청/응답을 가로채어 공통 로직 처리
  • 요청 취소: 대규모 프로젝트에서 유용한 요청 취소 기능
  • 파일 업로드/다운로드 지원: 대용량 파일 처리가 용이
  • 쿠키 및 세션 관리: 복잡한 인증/권한 시스템 구현 가능
• 유연성: 헤더, 파라미터, 타임아웃 설정 등 더 많은 옵션을 제공한다.
• 확장성: 대규모 프로젝트에서 필요한 복잡한 네트워크 요구사항에 대응 가능하다.
• 사용 사례: 여러 API 호출, 다양한 요청/응답 처리, 파일 업로드/다운로드 등이 필요한 대규모 프로젝트에 적합하다.

 

 

기능	http	dio
기본 요청 처리	간단하고 직관적	고급 기능이 많지만 다소 복잡함
인터셉터	미지원	요청/응답 가로채기 가능
파일 업로드/다운로드	제한적	내장된 기능 제공, 진행 상황 추적 가능
요청 취소	미지원	CancelToken으로 요청 취소 가능
병렬 요청 처리	수동으로 처리	내장 기능으로 병렬 요청 가능
타임아웃 설정	제한적	세부적인 타임아웃 설정 가능
에러 처리	기본적인 상태 코드 처리	상세한 예외 처리 가능
사용 사례	소규모 프로젝트	대규모 프로젝트, 복잡한 요청 처리

 

기능 비교로 http는 React에서 fetch, dio는 axios와 비교되어 사용한다.

하지만, 아예 axios 자체 패키지도 있어 해당 패키지를 사용하기도 하는 것 같다.

defee 프로젝트에는 dio 패키지를 사용하기로 했다. 본인이나 팀원들 전부 axios에 익숙하기 때문이다.