flutter & dart - dart 비동기 프로그래밍 , Future 타입

Overview .

1. 비동기 프로그래밍이란?
2. Future 타입과 값을 꺼내는 방법

 

1. 비동기 프로그래밍 이란?

동기성 - 모든 코드가 순차적으로 진행되는 형태

비동기 - 코드가 동시다발적으로 실행, 순착적으로 보장을 할 수 없는 형태

dart 비동기 프로그래밍은 프로그램의 흐름을 중단시키지 않고, 무언가의 완료를 기다리는 동안 다른 작업을 수행할 수 있게 해줍니다. Dart에서는 이를 위해 Future와 Stream이라는 두 가지 주요 개념을 제공합니다.

 

키워드

 // 키워드 묶음
  // async / await / Future : 1회만 응답을 돌려 받는 경우
  // async* / yield / Stream : 지속적으로 응답을 돌려 받아야 하는 경우

 

 

Future 키워드로 비동기 처리 예제 ( Future 의 delay 함수를 사용하였음)

 

async 와 await 키워드로 비동기를 동기로 바꾸기

 

규칙 -  await 키워드를 사용하는 포함하고 있는 함수는 반드시 함수 선언부에 async 키워드를 선언해주어야 한다.

 

2. Future 타입과 값을 꺼내는 방법

 

Future 는 미래타입으로 비동기라고 생각하면 된다. Future 는 제네릭이 있으며 , value 함수를 통해 값을 넣을 수 있다.

그렇다면 Future 에서 값을 꺼내는 방법은 무엇일까?

 

첫번째 방법

위와 같이 async 와 await 키워드를 사용하면 된다. 한마디로 비동기를 동기성으로 만들어 사용할 수 있다.

 

두번째 방법

future 의 then 함수를 사용하는 것이다. 뭐 아시다시피 javascript 의 promise then 과 비슷하다. 

void main() async {
  // Future 타입과 값을 꺼내는 방법
  // 비동기 함수를 - 동기성으로 변경하면 값이 자동으로 꺼내졌다.

  // Future 타입을 선언
  Future<String> name = Future.value("텐코");
  Future<int> number = Future.value(100);
  Future<bool> isTrue = Future.value(true);

  // 미래 타입을 소화 시키는 두번째 방법 : 콜백 메서드의 활용
  name.then((value) => print(value));
  number.then((value) => print(value));
  isTrue.then((value) => print(value));
}

 

응용

매개변수 2개를 받아 처리하고 async 와 await 로 동기적 방식으로 바꾸어 보자

밑의 예제를 보면 Future<int> return 타입인데 동기적으로 바꾸어 result 라는 int 타입이 리턴되는 것을 확인할 수 있다.

다만 runtimeType 시점에서는 Future<int> 타입인 것을 확인할 수 있다.

void main() {
  // 비동기 처리로 사용하는 방법
  var result = sum(100, 200);
  print(result.runtimeType);
  result.then((value) => print(value));
}

// 응용
// 함수 설계 , 인수 2개 int 값을 받아서 2초뒤에 연산되는 함수를 설계해 보자
// 동기적 방식으로 처리
Future<int> sum(int n1, int n2) async {
  int result = 0;
  await Future.delayed(Duration(seconds: 3), () => result = n1 + n2);
  return result;
}

 

결과

Future<int>
300

 

 

3. Http 통신을 살펴보자

https://pub.dev/packages/http/install

밑은 pub.dev 의 http 의 사용 예제이다. await 키워드를 사용한 것을 확인할 수 있다. 동기 처리시 다트 개발자들이 미리 만들어 놓은 Response 객체타입이 생성이 되고 headers, statusCode , body 등 다양한 함수를 사용할 수 있다.

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

var url = Uri.https('example.com', 'whatsit/create');
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

print(await http.read(Uri.https('example.com', 'foobar.txt')));

 

pubspec.yml 에 추가하고 사용해 보자

...
dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.1
...

 

해당 예제를 보고 마무리를 짓겠다.

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

void main() async {
  var response = fetchTodo();
  print(response.runtimeType); // Future<Response> 타입
  // 1번 방법 - then , catchError
  response
      .then((value) => print("1번 방법 : ${value.body}"))
      .catchError((error) => print(error));

  // 2번 방법 - async , awiat
  var result = await response;
  print(result.runtimeType); // 동기 처리시 다트 개발자들이 만들어 놓은 Response 객체 타입이 나옴
  print("2번 방법 : ${result.body}");
}

// 통신을 하는 함수 만들어 보기
Future<http.Response> fetchTodo() {
  const url = "https://jsonplaceholder.typicode.com/todos/1";
  var response = http.get(Uri.parse(url));
  return response;
}

 

결과

결과를 보면 1번 방법은 Future<Response> 타입 객체가 런타임에 찍히고 , 2번째 방법에서는 Response 객체가 런타임 시점에 찍히는 것을 확인할 수 있다.

Future<Response>
1번 방법 : {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}
Response
2번 방법 : {
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}