Flutter Dio HTTP 클라이언트

대부분의 Flutter 앱은 앱에 더 많은 가치를 부여하거나 비즈니스 요구 사항을 충족하기 위해 네트워크 호출을 해야 합니다. 이 기사에서는 Flutter에서 REST API 요청을 처리하는 방법을 살펴보겠습니다.

디오란?

Flutter는 기본HTTP 패키지를 제공하지만 Rest Api의 모든 기능을 사용하려면 인터셉터, 전역 구성, FormData, 요청 취소, 파일 다운로드, 시간 초과 등을 지원하는 강력한 Http 클라이언트Dio 사용을 고려해야 할 수도 있습니다.

시작하기

새 Flutter 프로젝트를 만들고 pubspec.yaml 파일에 Dio 패키지를 추가하여 시작하겠습니다.

dependencies:
  dio: ^4.0.4

디오 초기화

네트워크 작업을 수행하기 위한 메서드가 포함된 별도의 클래스를 만들 수 있습니다. 이것은 사용자 인터페이스 코드에서 기능적 논리를 분리하는 데 도움이 됩니다.

이렇게 하려면 NetworkClient 클래스가 포함된 새 파일 network_client.dart를 만듭니다.

class NetworkClient{
 // TODO: Set up and define the methods for network 
 operations
}

클래스에서 Dio를 초기화하거나 종속성 주입을 사용하여 수명 주기를 더 많이 제어하고 종속성을 분리하여 관심사를 분리할 수 있습니다.

import 'dart:_http';
import 'dart:async';

import 'package:dio/dio.dart';

class NetworkClient {
  final Dio _dio;

  NetworkClient(this._dio) {
    _dio.options
      ..baseUrl = 'http://httpbin.org/'
      ..connectTimeout = 5000 //5s
      ..receiveTimeout = 5000
      ..validateStatus = (int? status) {
        return status != null && status > 0;
      }
      ..headers = {
        HttpHeaders.userAgentHeader: 'dio',
        'common-header': 'xx',
      };

    // Token can be shared with different requests.
    var token = CancelToken();

    // In one minute, we cancel!
    Timer(Duration(milliseconds: 500), () {
      token.cancel('cancelled');
    });
  }
}

이제 네트워크 요청을 수행하는 데 필요한 메서드를 정의할 수 있습니다.

요청 정의


GET은 지정된 리소스에서 데이터를 요청하는 데 사용됩니다.


POST는 리소스를 생성/업데이트하기 위해 서버에 데이터를 보내는 데 사용됩니다.


POST와 PUT의 차이점은 PUT 요청이 멱등적이라는 것입니다. 즉, 동일한 PUT 요청을 여러 번 호출하면 항상 동일한 결과가 생성됩니다. 반대로 POST 요청을 반복적으로 호출하면 동일한 리소스를 여러 번 생성하는 부작용이 있습니다.


DELETE 메소드는 지정된 자원을 삭제합니다.


PATCH 방법은 리소스에 부분 수정을 적용합니다.


여러 동시 요청 수행.

파일 및 양식 데이터 업로드

Dio는 파일을 서버에 업로드하는 프로세스를 훨씬 간단하게 만듭니다. 여러 개의 동시 파일 업로드를 처리할 수 있으며 진행 상황을 추적하기 위한 간단한 콜백이 있어 http 패키지보다 훨씬 사용하기 쉽습니다.

FormData와 Dio를 이용하여 손쉽게 서버에 파일을 업로드할 수 있습니다. 다음은 API로 파일을 보내는 방법의 예입니다.

var formData = FormData.fromMap({
  'name': 'wendux',
  'age': 25,
  'file': await MultipartFile.fromFile('./text.txt', filename: 'upload.txt'),
  'files': [
    await MultipartFile.fromFile('./text1.txt', filename: 'text1.txt'),
    await MultipartFile.fromFile('./text2.txt', filename: 'text2.txt'),
  ]
});
var response = await dio.post('/info', data: formData);

인터셉터

then 또는 catchError를 사용하여 처리하기 전에 Dio 요청, 응답 및 오류를 가로챌 수 있습니다. 실제 시나리오에서 인터셉터는 권한 부여, JSON 구문 분석, 오류 처리 및 Dio 네트워크 요청을 쉽게 디버깅하는 데 유용합니다.

onRequest, onResponse 및 onError의 세 위치에서 콜백을 재정의하여 인터셉터를 실행할 수 있습니다.

이 예에서는 다양한 유형의 요청을 기록하기 위한 간단한 인터셉터를 정의합니다. Interceptor에서 확장되는 LoggingInterceptor라는 새 클래스를 만듭니다.

import 'dart:developer';

import 'package:dio/dio.dart';

class LoggingInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    super.onRequest(options, handler);
    log("Request Path: ${options.path}");
    log("Request Query Parameters: ${options.queryParameters}");
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    super.onResponse(response, handler);
    log("Response Status Code: ${response.statusCode}");
    log("Response Status Message: ${response.statusMessage}");
    log("Response Data: ${response.data}");
  }

  @override
  void onError(DioError err, ErrorInterceptorHandler handler) {
    super.onError(err, handler);
    log("Error Status Code: ${err.response?.statusCode}");
    log("Error Status Message: ${err.response?.statusMessage}");
  }
}

여기에서는 Dio 요청에 의해 트리거되는 다양한 콜백을 재정의하고 콘솔에 요청을 기록하기 위해 각각에 로그 문을 추가했습니다.

초기화하는 동안 인터셉터를 Dio에 추가합니다.

import 'dart:_http';
import 'dart:async';

import 'package:dio/dio.dart';

class NetworkClient {
  final Dio _dio;

  NetworkClient(this._dio) {
    _dio.interceptors.add(LoggingInterceptor());
...
}

결론

Dio를 사용하면 고급 오류 처리 기술의 안전성으로 여러 동시 네트워크 요청을 더 쉽게 처리할 수 있습니다. 또한 파일 업로드 진행 상황을 추적하기 위해 http 패키지를 사용해야 하는 상용구 코드를 피할 수 있습니다. 그리고 여기에서 다룬 것 이상으로 Dio 패키지를 사용하여 수행할 수 있는 다양한 기타advanced customizations가 있습니다.

감사합니다. 좋은 하루 보내세요.