flutter 개발 중 await, async의 개념이 헷갈려서 토스페이먼츠 블로그와 기타 블로그들을 보고 정리한 내용입니다.
배경 개념: 비동기 작업
비동기 작업이란 특정 코드의 로직이 끝날 때까지 기다리지 않고, 나머지 코드를 먼저 실행하는 것이다.
빠른 페이지 로딩을 위해 웹사이트 개발에 비동기 작업을 사용한다.
하지만 동기적으로 순서대로 불러야 하는 코드가 있으면 콜백 함수를 사용할 수 있지만 콜백을 계속 호출하면 코드가 복잡해지고 에러도 처리하기 어렵다.
이런 콜백의 단점을 보완한 Promise를 사용한다.
promise
- Promise : 비동기 함수가 반환하는 객체
- 함수의 성공 또는 실패 상태를 알려준다.
- 콜백을 직접 호출하는 방법 대신, Promise로 콜백을 부를 수 있다.
-> 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고 에러 발생 지점을 파악하기 좋다.
promise의 3가지 상태
- 대기(Pending): 비동기 함수가 아직 시작하지 않은 상태
- 성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태
- 실패(Rejected): 비동기 함수가 실패한 상태
비동기 함수의 리턴 값으로 promise 객체를 생성했을 때 비동기 함수의 처리 결과에 따라 성공/실패 상태의 promise가 반환된다.
then, catch method
Promise를 처리할 때는 then() 또는 catch() 메서드를 사용할 수 있다. 각 메서드 파라미터에는 콜백 함수를 넣어 성공 상태의 Promise가 반환되면 then() 메서드를 호출하고 실패 상태의 Promise가 반환되면 then() 메서드를 건너뛰고 catch() 메서드를 호출한다.
하지만 then() 체인을 길게 이어 나가면 콜백 체인과 마찬가지로 코드의 가독성이 떨어지고 에러가 어디서 일어났는지 보기 어렵다.
=> 이를 await, async 문법을 사용해서 보완할 수 있다.
Future (in Flutter, Dart)
Dart에서의 Future는 자바스크립트에서의 Promise에 대응된다.
Future와 Promise는 모두 싱글스레드 환경에서 비동기 처리를 위해 존재한다.
- JS의 Promise는 특정 동작의 수행이 완료되면 다음 동작을 수행하겠다는 약속
- Dart의 Future는 지금은 없지만 미래에 요청한 데이터 혹은 에러가 담길 상자
문법
JS
async function 함수명() {
await 비동기_처리_메서드_명();
}함수 앞에 async 키워드를 붙이면 함수가 비동기로 처리되며 promise를 반환한다는 것을 나타낸다.
함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다.
await은 async내에서만 사용할 수 있다.
Promise를 반환하는 함수 앞에 await를 붙이면, 해당 Promise가 성공 상태 또는 실패 상태로 바뀌기 전까지는 다음 연산을 시작하지 않는다.
사실상 await는 then()과 같은 역할을 하는데, 콜백 함수를 등록할 필요가 없기 때문에 더 편리하고 코드가 간결해진다.
에러처리
에러는 try와 catch를 써서 처리한다.
실패 상태의 promise가 반환되면, catch 블록이 바로 실행된다.
일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수이다.
Dart
Dart에서는 async는 Future를 반환해야만 한다.
Future 함수_이름() async {
...
await 비동기_처리_메소드();
...
}Dart에서 await 키워드를 만나면 함수를 잠시 멈추고 함수를 호출한 곳에 Future 를 return 하고, await이 붙은 동작이 완료되기 전까지 함수를 진행하지 않는다.
이후 return을 통해 처음 반환했던 Future에서 return 값이 나오게 된다.
Dart에서의 future, async, await에 대해서는 이 블로그에서 정리를 정말 잘 해두었기에 꼭 읽어보면 좋을 것 같습니다!
