[Flutter] API 요청하기

노마드코더님의 플러터 강의를 수강 하면서 플러터 API요청은 어떤 방식으로 이루어 지는지 알아보려고 한다.

lib 폴더 구조

├─lib
	├─models
	│		└─webtoon_model.dart
	├─screens
	│		└─home_screen.dart
	└─services
			└─api_service.dart

api 요청

// api_service.dart

// pub.dev에서 http를 설치
import 'package:http/http.dart' as http;

class ApiService {
	// baseUrl과, 오늘의 웹툰을 받아올 수 있는 주소를 final로 담아준다
  final String baseUrl = '<https://webtoon-crawler.nomadcoders.workers.dev>';
  final String today = 'today';
	
	// JS와 같이 async, await를 사용해서 데이터가 담기는 것을 기다려주는 처리를 한다.
  void getTodaysToons() async {
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);
		
		// 성공 코드 일 때 처리
    if (response.statusCode == 200) {

			// 일단은 디버그 콘솔에 출력만 해본다.
      print(response.body);
      return;
    }
		// 에러 처리
    throw Error();
  }
}

// 출력 값
// [
// {"title":"대학원 탈출일지","thumb":"<https://shared-comic.pstatic.net/thumb/webtoon/790713/thumbnail/thumbnail_IMAG21_3919364435331003700.jpg","id":"790713>"},
// {"title":"역대급 영지 설계사","thumb":"<https://shared-comic.pstatic.net/thumb/webtoon/777767/thumbnail/thumbnail_IMAG21_cc85f891-272b-450a-b642-cffe1568ab71.jpg","id":"777767>"},
// {"title":"1초","thumb":"<https://shared-comic.pstatic.net/thumb/webtoon/725586/thumbnail/thumbnail_IMAG21_17f81846-d1a9-43fd-83a4-f9e966b6b977.jpg","id":"725586>"},
// {"title":"개를 낳았다","thumb":"<https://shared-comic.pstatic.net/thumb/webtoon/712362/thumbnail/thumbnail_IMAG21_7220173143199539507.jpg","id":"712362>"},
// ...
// ]

 

fromJson → string을 json으로 변경한 후 webtoonInstances로 만들어 줌

// api_service.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:toonflix/models/webtoon_model.dart';

class ApiService {
  final String baseUrl = '<https://webtoon-crawler.nomadcoders.workers.dev>';
  final String today = 'today';

  Future<list> getTodaysToons() async {
    List webtoonInstances = [];

    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);

    if (response.statusCode == 200) {
      final List webtoons = jsonDecode(response.body);

      for (var webtoon in webtoons) {
        webtoonInstances.add(WebtoonModel.fromJson(webtoon));
      }
      return webtoonInstances;
    }
    throw Error();
  }
}
</list

String으로 들어온 json string을 json 자료형으로 변환시키는 과정.

클래스의 named constructor를 사용하여 변환 된 스트링 값을 Map 자료형을 사용하여 key, value 자료형으로 만들어준다.

1. JSON으로 된 데이터를 Dart Class로 바꾼다.
2. 바꾼 인스턴스들을 새로운 리스트 객체 안에 넣어서 반환