[Flutter] http 통신(GET) & JSON 파싱 (1)

오늘은 서버에서 데이터를 가져와서 flutter 앱 화면에서 보이도록 해보겠습니다.

(flutter 공식문서 내용을 참고하였습니다.)

 

1.  패키지를 추가합니다.

 

pubspec.yaml는 플로터 프로젝트를 생성하면 같이 생기는 기본 파일로 패키지 의존성 관리 및 프로젝트 정의 등의 다양한 역할을 수행하는 파일입니다. 그중에 dependencies는 패키지의 의존성을 작성하는 곳으로 주로 외부 패키지를 가져다 쓰기 위해 사용되는데 이곳에 http 패키지를 추가해줍니다. 그리고 AndroidManifest.xml 파일에서 인터넷 권한을 추가해줘야합니다.

 

 

AndroidManifest.xml파일에 <uses-permission android:name="android.permission.INTERNET"/>을 작성해줌으로써 앱에 인터넷 권한이 추가됩니다. http 패키지는 import 'package:http/http.dart' as http; 형태로 작성함으로써 사용 가능합니다.

 

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

 

as http를 적지 않을 경우 http 패키지의 메소드들(get,post,...)을 아무런 프리픽스 없이 써야합니다. 하지만 as http까지 적어주면 이 패키지의 메소드들을 부를때 http라는 프리픽스를 반드시 붙여줘야하기 때문에 좀 더 명확하게 쓰고 알아볼 수 있습니다.

 

ex) respone=get(url)     vs     respone=http.get(url)

 

2. 패키지를 사용하여 네트워크 응답을 요청합니다.

http 패키지의 http.get()메소드를 이용해서 특정 url로의 요청을 쉽게 할 수 있습니다.

 

Future<http.Response> fetchAlbum() {
  return http.get(Uri.parse('http://ajsv.dothome.co.kr/test/restapiPage.php'));
}

 

http.get()메서드는 Response를 갖고있는 Future를 리턴합니다. Future는 비동기 작업 작업을 위한 핵심 Dart 클래스로 미래의 어느 시점에 사용할 수 있는 잠재적인 값이나 오류를 나타냅니다. http.Response클래스에는 성공적인 http 호출에서 받은 데이터가 포함되어 있습니다. 

3. 응답을 사용자 지정 Dart 개체로 변환합니다.

http.get() 메소드를 이용해서 쉽게 응답을 받았지만 계속 Future<http.Response> 를 가지고 작업을 하는것은 간편하지 않다. 따라서 http.Response를 Dart Object로 변환해 보도록 하겠습니다. 먼저 요청하고자하는 네트워크의 데이터를 포함하는 클래스를 만듭니다. 여기에는 JSON에서 사용하는 factory 생성자가 포함됩니다.

 

class Album { 
  final String http_status;
  final String data1;
  final String data2;
  final List<dynamic> data3;

  const Album({
    required this.http_status,
    required this.data1,
    required this.data2,
    required this.data3,
  });

  factory Album.fromJson(Map<String, dynamic> json) {
    return Album( 
      http_status: json['http_status'],
      data1: json['data1'],
      data2: json['data2'],
     data3: json['data3'],
    );
  }
}

 

이제 fetchAlbum() 함수에서 Future<Album>을 리턴하도록 바꿔보겠습니다. 

 

Future<Album> fetchAlbum() async {
  final response = await http
      .get(Uri.parse('http://ajsv.dothome.co.kr/test/restapiPage.php'));

  if (response.statusCode == 200) {
    // If the server did return a 200 OK response, then parse the JSON.
    // 만약 서버가 ok 응답을 반환하면, JSON을 파싱합니다.
    return Album.fromJson(jsonDecode(response.body));
  } else {
    // If the server did not return a 200 OK response, then throw an exception.
    // 만약 응답이 ok가 아니라면 예외 발생
    throw Exception('Failed to load album');
  }
}

 

1. dart:convert패키지를 통해 response body를 JSON Map으로 변환시켜줍니다. 함수에 async를 붙였는데 이 함수안에 await 문장(비동기 프로그래밍)이 있기때문에 붙여준것입니다. (async 안붙이면 컴파일 에러 발생)

 

2. 서버가 상태 코드 200과 함께 OK 응답을 반환하면 JSON Map을 fromJson()  factory 메서드를 통해 Album으로 변환합니다. 받은 정보를 json형태로 디코드(jsonDecode())하기위해서 import 'dart:convert';을 사용해야합니다.

 

3. 서버가 상태 코드 200과 함께 OK 응답을 반환하지 않으면 예외가 발생합니다.

 

이제 서버에서 데이터를 가져올 수 있게 되었습니다!가져온 데이터를 나타내는 것은 다음 포스팅에서 다루도록 하겠습니다.

 

 

 

참고자료

https://velog.io/@rkddl6803/Flutter-%EC%9D%B8%ED%84%B0%EB%84%B7%EC%97%90%EC%84%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0#%EC%99%9C-fetchalbum%EC%9D%B4-initstate-%EC%95%88%EC%97%90%EC%84%9C-%EC%8B%A4%ED%96%89%EB%90%90%EB%8A%94%EA%B0%80

https://docs.flutter.dev/cookbook/networking/fetch-data

https://eunjin3786.tistory.com/246