api , async/await

차준우·2024년 7월 5일

flutter

목록 보기

14/25

data fetching(api통신하기)

flutter에서 class를 만들어 통신해보자

http

우선 get, post는 http메서드니까 http설치를 해야된다. 터미널에 다음 코드를 넣자

flutter pub add http
//http: ^1.2.1 를 pubspec.yaml의 dependencies에 직접 넣어도 된다.

그리고 필요한 곳에서 import '~~~/http.dart' as http;
as http 없이 사용하면 메서드를 사용할 때 다음처럼 사용하게 된다

get()

이렇게 사용하면 뭔 get이지? 할 수 있으니까 as http를 붙여서 사용하자

http.get()

api통신

통신을 위해서는 http.get(url)로 요청을 하게 된다.

그럼 그냥 String으로 url 넣으면 되는거아님?

안됨.
그렇게 넣으면 다음 에러를 반환한다.
The argument type 'String' can't be assigned to the parameter type 'Uri'.
파라미터 타입이 Uri여야 된다고 한다.
아래 코드로 변환하자 (Uri.parse)

final url = Uri.parse('$baseUrl');

변환한 변수 url을 사용해 get 요청을 하면 아래와 같이 작성할 수 있다.

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

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

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

http.get의 반환 - Future

위 예시처럼 api요청을 하면 네트워크, 서버 등 다양한 이유로 응답이 늦어질 수 있다. 이렇게 되면 코드는 계속 응답을 기다리며 돌아가지 못한다.(동기)

하지만 async를 사용하면 비동기로 동작할 수 있게 해주고, 그 비동기 블록에서
await키워드가 붙은 동작만이 동기로 동작한다.

await가 붙은 코드는 완료(변화)될 때까지 대기하다가 결과를 넘겨주게 된다.

await를 뺐을 때 발생하는 에러를 살펴보자

The getter 'statusCode' isn't defined for the type 'Future<Response>'.
Try importing the library that defines 'statusCode', correcting the name to the name of an existing getter, or defining a getter or field named 'statusCode'.

Future에는 statusCode가 없다고 에러가 발생한다.
왜 붙고 안붙고가 다른 것일까?

http.get이 비동기로 동작하기 때문에, 값을 가져오기 전에 response변수에 접근하려고 하기 때문이다.