자바스크립트 비동기 처리 방식 중 하나는 콜백함수를 사용하는 것이다.
-> 하지만, 콜백 헬이나 에러 처리에서 불편함 같은 문제가 있고, 이를 해결하기 위해 Promise를 도입한다.
콜백 헬
비동기 함수의 콜백함수는 태스크 큐에 대기하고 있다가 콜스택이 비어 있으면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행된다.
=> 이때문에 비동기 처리 결과를 반환하거나 상위 스코프에 전달할 수가 없다.
=> 이를 위해 비동기 함수의 처리 결과를 위해 비동기 함수의 처리 결과를 가지고 또다시 비동기 함수를 호출하게 된다. -> 콜백 헬
에러 처리 문제
콜백 함수는 태스큐 큐에 저장되어 있다가 콜 스택이 비어 있으면 이벤트 루프에 의해 콜 스택으로 푸시되어 실행된다고 말했다.
에러는 호출자 방향으로 전파된다. => 콜 스택의 아래 부분의 실행 컨텍스트로 전파된다. 하지만, 비동기 함수는 이미 콜 스택에서 제거된 상태이다. 따라서 에러 검출을 할 수가 없다.
Promise
Promise : 비동기 처리 상태와 처리 결과를 관리하는 객체
Promise는 인수로 resolve 함수와 reject 함수를 받는다.
비동기 처리가 성공하면 처리 결과를 resolve 함수에 인수로 전달하여 호출하고, 실패하면 reject 함수에 인수로 전달하여 호출한다.
Promise 상태
- pending : 비동기 처리가 수행되지 않은 상태
- fulfilled : 비동기 처리가 성공된 상태 (resolve 함수 호출 이후)
- rejected : 비동기 처리가 실패한 상태 (reject 함수 호출 이후)
Prmoise 후속 처리 메서드
- then : 두 개의 콜백 함수를 인수로 전달받음 -> 첫번째 콟백 함수는 fulfilled 상태일 때 호출, 두번째 콜백 함수는 reject 상태일 때 호출
- catch : 한 개의 콜백 함수를 인수로 전달받음 -> 이 콜백 함수는 reject 상태일 때만 호출
- finally : 성공, 실패와 상관없이 무조건 한 번 호출
이 메서드들은 언제나 Promise를 반환하기 때문에 연속적으로 호출할 수 있다! -> 프로미스 체이닝
그리고 에러 처리 같은 경우도 후속 처리 메서드를 통해 쉽게 할 수 있다.
async/await
제너레이터
제너레이터 : 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수
일반 함수와의 차이
- 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다.
- 제너레이터 함수는 함수 호출자와ㅏ 함수의 상태를 주고받을 수 있다.
- 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
제너레이터 객체의 next 메서드를 실행하면 yield까지 실행되고 일시 중지된다. 이때 함수의 제어권이 호출자로 양도된다. 이후 다시 실행하려면 호출자가 next 메서드를 호출하면된다.
호출자는 yield 뒤의 값으로 제너레이터 객체의 상태 값을 꺼내올 수 있고, next메서드에 값을 통해 제너레이터로 값을 보낼 수도 있다!
async/await
async/await를 사용하면 프로미스의 후속 처리 메서드에 콜백 함수를 전달해서 비동기 처리 결과를 처리할 필요 없이, 동기 처리처럼 프로미스를 사용할 수 있다!!
async : async 함수는 언제나 promise 반환
await : async 함수 내부에서만 사용 가능!, 프로미스가 settled 상태가 될때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 결과를 반환!
