[Flutter]API 가져오는 법 설명

노마드 코더 강의 복습

 

예시를 통해 알아보자

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

  Future<List<WebtoonModel>> getTodaysToons() async {
    final 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();
  }
}

다음은 api를 가져오기 위한 코드들을 한줄씩 알아보자

Future<List<WebtoonModel>> getTodaysToons() async {
    final List<WebtoonModel> webtooninstances = [];
    final url = Uri.parse('$baseUrl/$today');
    final response = await http.get(url);

일단 url을 가져오기 위해 get을 사용하여 url에 있는 정보를 가져온다(요청한다)

그리고 reponse의 변수로 값을 넣는다.

get에 url을 가져오기 위해서는 다음과 같은 요건을 갖춰야한다.

그래서 url이라는 변수에 사진과 같이 Uri로 파싱하여 값을 넣어준다.

그리고 get은 비동기 함수이기 때문에 await을 붙여준다.

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();

그렇게 값들을 가져온 정보들은 여기선 보이지 않지만 json파일로 가져왔다.

그래서 json파일을 여기서 쓸수 있게 리스트로 해독(decode: 변환)해주고 WebtoonModel이라는 클래스를 만들어 정보들을 사용하기 쉽게 가공한다. 이때 namedparameter을 이용한다. namedparameter란 쉽게 이름을 붙여서 정보를 넣는 것이다. json 파일 정보 가공할때 유리하다. 왜냐하면 json 파일에는 값마다 고유 key값들이 존재하기 때문이다.

 

class WebtoonModel {
  final String title, thumb, id;

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

 

이과정을 거치면

이런 뒤죽박죽 정보들을 우리가 변수로 사용할 수 있도록 정리해준다

그리고 webtooninstances라는 리스트에 받아온 정보들을 저장한다.

 

 

 

 

 

결론

api를 받아오기 위해서는 받아온 정보들을 쉽게 가져와서 쓸수 있기 위해

파일을 변환하고 다시 저장해주는 과정을 거쳐야한다.