14. Flutter 수업- async, 비동기 , Future

1. async, awiat와 비동기

// 비동기 작업 예시
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));  // 2초 대기
  return "데이터 로드 완료";
}

void main() async {
  print("데이터 로드 시작");
  String result = await fetchData();  // fetchData가 완료될 때까지 대기
  print(result);  // "데이터 로드 완료" 출력
  print("다음 작업 실행");
}

2. 비동기 함수와 Future<T>타입

// 비동기 함수
Future<String> fetchData() async {
  // 2초 동안 대기하는 비동기 작업
  await Future.delayed(Duration(seconds: 2));
  return "데이터 로드 완료";  // 작업 완료 후 문자열 반환
}

void main() async {
  print("데이터 로드 시작");

  // 비동기 함수 호출 후 결과를 대기
  Future<String> futureResult = fetchData();

  // Future가 완료될 때까지 기다림
  String result = await futureResult;  // result는 "데이터 로드 완료"가 됨

  print(result);  // "데이터 로드 완료" 출력
}

// 비동기 함수에서 Future의 다양한 상태 처리
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return "데이터 로드 완료";
}

void main() {
  print("데이터 로드 시작");

  // Future 사용: 완료되면 처리
  fetchData().then((result) {
    print(result);  // "데이터 로드 완료"가 출력됨
  }).catchError((error) {
    print("에러 발생: $error");
  }).whenComplete(() {
    print("데이터 로드 작업 완료");
  });

  print("다른 작업을 처리 중...");
}

3. 비동기 함수의 유무에 따라 코드의 순차적 실행 방식

void main() {
  print("작업 1 시작");
  print("작업 2 시작");
  print("작업 3 시작");
}

작업 1 시작
작업 2 시작
작업 3 시작

Future<void> asyncTask(int id) async {
  await Future.delayed(Duration(seconds: 2));
  print("작업 $id 완료");
}

void main() async {
  print("작업 1 시작");
  asyncTask(1); // 비동기 실행, 기다리지 않음
  print("작업 2 시작");
  asyncTask(2); // 비동기 실행, 기다리지 않음
  print("작업 3 시작");
  asyncTask(3); // 비동기 실행, 기다리지 않음
}

작업 1 시작
작업 2 시작
작업 3 시작
작업 1 완료 (2초 뒤 출력)
작업 2 완료 (2초 뒤 출력)
작업 3 완료 (2초 뒤 출력)

Future<void> asyncTask(int id) async {
  await Future.delayed(Duration(seconds: 2));
  print("작업 $id 완료");
}

void main() async {
  print("작업 1 시작");
  await asyncTask(1);  // 작업 1이 완료될 때까지 대기
  print("작업 2 시작");
  await asyncTask(2);  // 작업 2가 완료될 때까지 대기
  print("작업 3 시작");
  await asyncTask(3);  // 작업 3이 완료될 때까지 대기
}

작업 1 시작
작업 1 완료 (2초 뒤)
작업 2 시작
작업 2 완료 (2초 뒤)
작업 3 시작
작업 3 완료 (2초 뒤)

4. Future코드 수업 예제

1. Future -ex01

// Future.delayed에 Duration객체에 3초를 설정해줬다. 통신 없이 3초 지연을 설정하고 이것을 마치 통신을 해서 3초 뒤에 받는다고 가정.
// 이 Future.delayed를 받은 Furture<int>는 3초 뒤 실행이라는 어음을 가지고 있다.
// 그렇기 때문에 이 어음을 처리하려면 처리하는 쪽에서 async(await를 품고 있는 함수의 소괄호와 중괄호 사이에 배치),  await(딜레이가 있는 혹은 통신해서 값을 받아오는 함수 호출 앞)를 가지고 처리하면 된다.
// 처리한다는 게 무슨 의미냐면 아래 void start(){~}에서 받으면 void start(){~}에 async를 붙이고 값을 받아 오는데 시간이 걸리는 getNum() 호출 앞에 await붙여서 처리. 즉, async, await로 받아서 처리한다는 것이다.
// 이러면 main() 에서 start()를 실행하고 print('안녕')을 해두면 getNum()과 start()가 비동기로 처리되기 때문에 3초 뒤에 값을 가져오고 기다리는 사이에 안녕이 먼저 출력되고 3초 뒤에 n + 10이 출력된다.
// main에서 start();와 print('안녕');을 순차적으로 처리하려면 어떻게 해줘야 할까? -> ex02

Future<int> getNum() {
  Future<int> fNum = Future.delayed(Duration(seconds: 3), () => 1);
  return fNum;
}

void start() async {
  int n = await getNum();
  print(n + 10);
}

void main() {
  start();
  print('안녕');
}

2. Future -ex02

// main에서 안녕이 먼저 출력되지 않고 순차적으로 출력되려면 어떻게 해야될까?
// main()전체를 비동기로 처리하게 하면 된다.
// start()에 await를 붙여서 비동기 처리를 하면 main()에도 async를 붙여야 한다. 결과적으로 main() 전체가 비동기 함수가 된다.
// 그럼 main()전체가 비동기이기 때문에 await start()가 실행 되고 나서 print가 출력된다.
// 여기서 주의할 점이 start()는 리턴타입이 void인데
// 앞에 await가 붙으면 비동기 작업을 기다리는 것이므로, 이를 포함한 함수는 항상 async가 붙여야되고 async가 붙으면 Future<T> 타입을 반환해야 하지만
// void의 경우 리턴하는 값이 없기 때문에 void로 적어놔도 내부적으로 Future<void>로 리턴된다.
// 이렇게 main()이 전체 비동기 함수가 돼서 start()가 3초 뒤에 실행되기까지 기다렸다가 실행 후 그 다음에 안녕이 출력된다.

// 따라서 main() 내부에 동기,비동기가 혼재돼있을 경우 순차적으로 실행시킬지 말지는 main()자체가 비동기이냐(async) 아니냐에 따라 달라진다.
// 예를들어 main()이 로그인 시도이고 start()가 로그인 뒤 화면에 필요한 정보를 불러오는 것이고 print()가 화면이라면
// main()이 비동기가 되어야 시간이 걸리는 await start()를 기다렸다가 이후에 화면이 그려질 것이다.
// 만약 main()에 async가 없이 그냥 동기 처리를 한다면 start()가 값을 기다리는 동안 그 다음 코드인 화면이 그려지게 된다.
// 정보가 없는데 화면을 먼저 그리게 되면 필요한 정보를 못 받았는데 화면이 그려지므로 다 비거나 하기 때문에 순서를 고려한 적절한 동기 처리가 필요하다.

Future<int> getNum() {
  Future<int> fNum = Future.delayed(Duration(seconds: 3), () => 1);
  return fNum;
}

Future<void> start() async {
  int n = await getNum();
  print(n + 10);
}

void main() async {
  await start();
  print('안녕');
}