Overview .
- 비동기 프로그래밍이란?
- 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
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - Flutter MVVM 패턴 (0) | 2024.03.19 |
---|---|
flutter & dart - dart:convert 파싱 (parsing) (0) | 2024.03.15 |
flutter & dart - 콜백 (callback) 함수 (0) | 2024.03.13 |
flutter & dart - InkWell (0) | 2024.03.13 |
flutter & dart - CupertinoDialog (0) | 2024.02.29 |