앞선 포스팅에서 동기와 비동기에 대한 개념을 정리했고, 자바스크립트는 Non-Blocking Model로 비동기적으로 실행 된다고 했다.
하지만 비동기적인 자바스크립트에서 코드를 동기적으로 처리해야할 때가 있는데
대표적으로 서버와 통신이 필요할 때인데 필요한 프로미스(Promise) 개념을 정리하도록 하겠다.
#1. 프로미스란?
자바스크립트에서 비동기 처리를 동기로 처리할 수 있게 돕는 객체 유형이다.
Why?
데이터베이스의 데이터를 먼저 가져온 후, 그 데이터를 가공하여 반환하는 함수가 존재한다고 가정하자 !
데이터베이스와의 소통은 I/O이고, Javascript 에서 거의 모든 I/O는 비동기적이므로 아마도 데이터를 가져오기도 전에 데이터 가공 명령이 실행된다면? 에러 발생!
‘언제 진행할지 약속’ ! 언제 진행할지란, 바로 비동기 명령의 실행이 완료된 이후
=> 데이터를 가져온 이후 데이터를 처리하는 명령어들을 Promise 이후에 진행하도록 작성한다면 데이터를 가져오지도 않았는데 처리가 시작되는 오류상황을 회피할 수 있다 !
프로미스에 대한 간략한 개념은 아래와 같다.
프로미스의 상태는 3가지로 나뉘어지게 되는데
- 대기(Pending): 이행하거나 거부되지 않은 초기 상태.
- 이행(Fulfilled): 연산이 성공적으로 완료됨.
- 거부(Rejected): 연산이 실패함.
먼저 예제를 한번 보자
# resolve
프로미스를 사용하지 않았다면 비동기적으로 처리되기 때문에 Middle, Last, First 순으로 나올 것으로 예상된다.
**resolve 괄호안에 데이터를 넣어줄 수 있다.
resolve 안에 넣어준 데이터가 아래 then의 매개함수로 쓰여져서 마지막 console.log에서는 Resolve! 가 출력되는 모습을 볼 수 있다.
#catch
Promise 안에서 에러가 throw 되거나 reject가 실행되면 catch 메서드에 작성한 함수가 실행된다.
#2. 비동기 함수(Async)
비동기 함수는 화살표 함수와 아주 비슷하나 두가지 차이점이 있다.
1. 비동기 함수의 결과 값은 항상 Promise 객체로 resolve된다.
2. 비동기 함수 안에서만 await 연산자를 사용할 수 있다.
async 함수는 await 연산자를 비동기 함수 안에서만 사용이 가능하며, 이를 이용하면 문법이 훨씬 간결해질 수 있다.
new Promise(executor) 코드로 Promise를 직접 생성하면 executor가 바로 실행되는것과 달리, 비동기 함수는 함수가 실행되기 전까지 Promise를 생성하지 않음
#3. await 연산자
await 연산자를 사용하면 Promise가 fulfill 상태가 되거나 rejected 될 때 까지 함수의 실행을 중단하고 기다릴 수 있다.
위에서 이야기한 바와 같이 await 연산자는 async 함수 안에서만 사용할 수 있다.
# await을 적용하지 않았을 경우
13~15줄의 실행 부분의 순서가 1) 시작되었습니다. 2) 종료되었습니다. 3) setTimeoutFunc 가 실행된다.
(앞선 포스팅에서 setTimeout 함수의 경우 비동기 함수로 콜 스택이 비었을 때 실행되는 함수이기 때문이다.)
앞선 게시글에서 실제 사용한 사례를 다시 한번 소개하겠다.
fetchMovieData라는 함수는 다른 사이트에서 영화 데이터를 가져오는 함수인데,
await 함수를 통해 데이터가 다 받아질 때까지 기다리는고자 async / await를 사용했다.
앞으로 Node.js 를 배울 때 많이 사용하게 되는 것 같은데
조금 더 공부를 해보도록 하겠다.