[Flutter] API요청

http 패키지를 사용해 API 호출한다.

 

🐾 http 패키지 설치하기

pub.dev ⇦ Node.js의 npm과 비슷한 Dart, Flutter 공식 패키지 보관소

https://pub.dev/

The official repository for Dart and Flutter packages.

http를 검색한 후 설치한다.

 

설치 방법 중 pubspec.yaml파일에 코드를 작성하는 방법을 사용했다.

• pubspec.yaml
  • 프로젝트에 대한 설정을 하는 파일

// pubspec.yaml
dependencies:
  http: ^1.2.2

 

 

🐾 ApiService class 생성하기

Api 요청을 보내는 함수를 담을 class를 생성한다.

class ApiService {
  final String baseUrl = "url주소";
  final String today = 'today';

}

 

 

🐾 http로 get요청하기

http에서 get 메소드를 꺼내 요청을 보낸다.

이때 get의 리턴 타입은 Future<Response>로 미래에 반환하는 타입이 Response라는 것을 의미한다.

• Future
  • 미래에 받을 값의 타입을 알려줌

API 요청은 오래 걸릴 수 있기 때문에 Dart는 코드를 바로 처리하지 않고 요청이 처리되어 응답을 반환받을 때까지 기다린다.

따라서 서버가 응답할 때까지 프로그램을 기다리게 만들기 위해 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();
}

 

 

🐾 model class 생성하기

받아온 응답을 flutter에서 사용할 수 있는 데이터 형식인 class로 바꿔준다.

class WebtoonModel {
  final String title, thumb, id;

  // named constructor
  WebtoonModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        thumb = json['thumb'],
        id = json['id'];
}

json을 받아와 각 프로퍼티를 초기화한다.

 

 

🐾 응답 데이터를 Json으로 decoding하기

response.body를 jsonDecode 메소드를 사용해 decode한다.

이때 jsonDecode의 타입은 dynamic이기 떄문에 타입을 특정해준다.

static Future<List<WebtoonModel>> getTodaysToons() async {
    List<WebtoonModel> webtoonInstances = [];
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      // 요청이 성공한 경우
      final List<dynamic> webtoons = jsonDecode(response.body);
      for (var webtoon in webtoons) {
        webtoonInstances.add(WebtoonModel.fromJson(webtoon));
      }
      return webtoonInstances;
    }
    throw Error();
}

현재 데이터는 object로 이루어진 List이다.

WebtoonModel에 데이터를 전달해 초기화를 한 후 변수에 담아준다.

응답 데이터를 담아 초기화시킨 webtoon을 담은 WebtoonInstance를 리턴한다.

이때 getTodaysToons의 타입은 Future<List<WebtoonModel>>이 된다.

 

 

---

 

💛 정리 💛

1. API 요청을 보내는 ApiService 클래스 생성한다.
2. http 패키지를 다운로드 한 후 http.get으로 요청을 보낸다.
   • http.get은 Future 타입을 리턴 ← 당장 완료될 수 있는 작업이 아님
   • 작업이 마무리되면 Response 타입을 리턴
3. 요청이 성공하면 response의 body를 decoding한다.
   • String 형식의 응답을 JSON 형식으로 변환 ← 원래 응답의 포맷이 JSON이기 때문
4. API에서 받은 데이터를 사용해 WebtoonModel를 만든다.
5. for in 구문을 사용해 데이터를 하나씩 꺼내 사용한다.
   • webtoonInstance 생성