비동기 처리의 특성
일단 JS엔진은 하나의 스레드로 이루어져 있어 동시에 단 하나의 작업만을 수행할 수 있다. 하나의 스레드에서 모든 일을 처리하기엔 무리가 있어 API라하는 다른 스레드로 비동기 처리를 진행한다.
자바스크립트 비동기 처리 과정
Event Loop와 Queue를 이용하여 비동기 처리 과정을 수행할 수 있다.
Call Stack에 작업이 들어간다. 해당 작업이 비동기 작업이라면 브라우저에 존재하는 Web API로 보낸다. 직접적인 처리를 Web API에서 수행한다. 등록했던 Callback을 Queue로 보낸다.
Event Loop를 이용하여 Queue에 존재하는 callback을 call stack으로 보낸다. 이 때 call stack에 아무것도 없어야 Event Loop가 callback을 call stack에 집어넣을 수 있다.
callback, Promise, async/await
callback
- 다른 함수의 매개변수로 함수를 전달하고 특정 이벤트가 수행됐을때 전달한 함수가 다시 호출되는 것을 의미한다.
- 비동기 처리를 할 때 유용하게 처리된다.
- 콜백이 중첩될 경우에 가독성이 매우 떨어진다. 이를 '콜백 지옥'이라 한다.
Promise
-
callback의 단점을 보완하기 위해 나왔다. 순차적으로 처리할 수 있다.
-
pending, fulfilled, rejected와 같은 상태가 존재한다.
- pending : 대기 중
- fulfilled : resolve 함수가 실행되면 작업 수행이 완료로 바뀝니다.
- rejected : reject 함수가 실행되면 작업 수행 도중 에러가 발생합니다.
-
.then을 이용하여 지정한 함수를 호출할 수 있다. 첫번째 인수는 작업 수행이 완료 됐을때, 두번째 인수는 작업 수행이 실패했을때 실행되는 함수 입니다. 이를 이용해 callback 보다 가독성이 높은 코드를 작성할 수 있다. -
.catch를 이용하여 에러 처리를 할 수 있다..catch또한 Promise를 반환할 수 있기때문에.then을 붙여 이어서 작업할 수 있다. -
.finally는 fulfilled와 rejected 상태에서 호출된다.
reject 처리
then과 catch 둘 다 사용할 수 있지만 catch를 사용하는것을 권장한다.
promise.then(f1).catch(f2);
promise.then(f1, f2);첫번째 코드는 f1에서 에러가 발생하면 catch로 에러를 처리할 수 없지만
두번째 코드는 f1에서 에러가 발생해도 에러를 처리하지 못한다.
async/await
- ES8에서 새로 나온 문법이다. Promise 기반이며 비동기 처리를 도와준다.
- 명령형 프로그래밍에 익숙하게 만들어 코드를 보기 좋게 해준다.
- promise를 반환하는 비동기 처리 함수 앞에 await 키워드를 붙인다.
- await 키워드를 사용하기 위해선 함수 앞에 async 키워드를 붙여야한다.
- 에러처리는 try catch 문으로 작성한다.
