소개

API에서 데이터를 소비하는 모바일 앱 개발자에게는 반드시 갖추어야 할 기술 중 하나입니다. Flutter 자체에는 개발자가 API에서 데이터를 사용하는 데 도움이 되는 많은 패키지가 있습니다.

디오

DIO은 Flutter의 API에서 데이터를 검색하는 데 널리 사용되는 패키지로, 강력하고 사용하기 쉽습니다.

GET 예제

예를 들어 reqres.in API를 사용하여 GET, POST 및 PUT을 수행합니다.

먼저 데이터 모델을 만들어야 합니다. 이것은 Flutter로 데이터를 사용하기 전에 API에서 데이터를 저장하는 것입니다.
API의 응답 데이터(여기서는 GET reqres.in 메서드의 응답 데이터)를 기반으로 데이터 모델을 만들 수 있습니다.
GET:https://reqres.in/api/users?page=2

class UserModel {
// this is the data from json response,
// each type data based on success json response
  int? page;
  int? perPage;
  int? total;
  int? totalPages;
  List<Data>? data;

// this is constructor
  UserModel({
    this.page,
    this.perPage,
    this.total,
    this.totalPages,
    this.data,
  });

// this is function to store data base on key-value response
  UserModel.fromJson(Map<String, dynamic> json) {
    page = json['page'];
    perPage = json['per_page'];
    total = json['total'];
    totalPages = json['total_pages'];
    data = json['data'] == null
        ? []
        : (json['data'] as List).map((e) => Data.fromJson(e)).toList();
// on this data we should mapping each response from List to 'class Data'
  }
}

// this class for store data from each response on List
class Data {
  int? id;
  String? email;
  String? firstName;
  String? lastName;
  String? avatar;

  Data({
    this.id,
    this.email,
    this.firstName,
    this.lastName,
    this.avatar,
  });

  Data.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    email = json['email'];
    firstName = json['first_name'];
    lastName = json['last_name'];
    avatar = json['avatar'];
  }
}

그런 다음 DIO로 Get API 기능을 만들 것입니다.
DIO에서 GET 메서드를 사용하는 것은 쉽습니다. 클래스에서 DIO 패키지를 선언한 다음 GET 메서드를 사용하는 함수를 만들고 URL을 전달하기만 하면 됩니다.

class ApiServices {
  Dio dio = Dio();

  Future<Map<String, dynamic>> getUser() async {
    const String url = 'https://reqres.in/api/users?page=2';
    try {
      Response response = await dio.get(url);
      return response.data;
    } on DioError catch (error, trace) {
      print('DIO error : $error, on : $trace');
      return error.response!.data;
    }
  }
}

설명:
Future<Map<String, dynamic>> getUser() async {
이 코드에서는 Dart가 Future 유형 데이터 함수에 대한 비동기만 허용하기 때문에 Future Type 데이터를 사용합니다. 그런 다음 String의 Type 데이터 Map을 사용하고 GET의 응답이 여전히 json의 배열이므로 동적이므로 나중에 매핑해야 합니다.

그런 다음 데이터 모델 목록에 동적으로 문자열 맵을 캐스팅하는 또 다른 함수를 만듭니다.

Future<List<DataModel>> userServices() async {
    List<DataModel> userList = [];
    var response = await getUser();
    if (response.containsKey('data') && response['data'] is List) {
      userList =
          (response['data'] as List).map((e) => DataModel.fromJson(e)).toList();
    }
    return userList;
  }

설명:
Future<List<DataModel>> userServices() async {
getUser의 반환 데이터는 json 데이터의 맵이며 Flutter에서 사용하기 전에 DataModel의 목록으로 변환해야 합니다.
if (response.containsKey('data') && response['data'] is List) {
우리는 단지 '데이터' 배열을 사용하기를 원하기 때문에 응답에 데이터가 있는지 확인한 다음 데이터 모델에 매핑해야 합니다.
userList =
(response['data'] as List).map((e) => DataModel.fromJson(e)).toList();
그런 다음 DataModel 목록이 있고 Flutter에서 ListView.builder()로 사용할 수 있습니다.

일반적인 DIO GET 방법

dio.get()의 '경로' 옆에 get() 메서드의 또 다른 매개변수를 사용할 수 있습니다.queryParameters: API에 매개변수를 부여하려면,options: 이것은 Options()를 필요로 하며 헤더 설정 등과 같은 많은 기능을 가지고 있습니다.