설명하기에 앞서 자바스크립트(JS)는 동기적 언이다.
키오스크 사용 시 한 번에 한명씩 사용하는 것 처럼 한 번에 하나의 작업을 수행하고 이러한 동작을 '단일(싱글) 스레드', '동기'라고 말하며 '호스팅'된 후 작성한 순서에 맞게 동기적으로 실행된다.
호스팅이란 변수선언 및 함수선언이 해당 스코프의 최상단으로 올라간 것 같은 현상을 말한다. 추가로 스코프란 변수와 함수가 유효한 범위(특정 코드 블록 내에서 변수 또는 함수에 접근할 수 있는지를 결정)를 의미한다.
Promise
JS 비동기 처리에 사용되는 객체이고 주로 서버에서 받아온 데이터를
화면에 표시할 때 사용되며 아래에서 프로미스의 3가지 상태에 대해 설명하겠다.
프로미스 상태 : 프로미스의 처리 과정을 의미하며
'new promise()'함수로 프로미스를 생성하고 종료될 때까지 3가지 상태를 가진다.
pending(대기) : 비동기 처리 로직이 완료되지 않은 상태
new promise() 메서드를 호출 시 콜백함수를 선언할 수 있고
콜백함수의 인자 값으로 resolve, reject를 사용할 수 있다.
Fulfilled(이행) :
비동기 처리가 완료되어 프로미스 결과 값을 반환한 상태
콜백함수의 resolve를 실행하면 이행 상태가 된다.
이행 상태가 되고 then() 함수를 이용하여 처리 결과 값을 받을 수 있다.
Rejected(실패) :
비동기 처리가 실패하거나 오류가 발생한 상태
콜백함수의 reject를 실행시 실패 상태가 된다.
실패 시 실패한 이유 즉 실패 처리의 결과 값을 catch로 받을 수 있다.
async, await
- async는 function 앞에 위치하고 사용 시 해당 함수는 항상 프로미스를 반환한다.
async를 함수 앞에 붙이면 해당 함수는 비동기적 함수이고 Promise를 반환한다는 뜻이다. -
await는 asyn 함수 내에서만 사용할 수 있는 특별 한 문법이며 프로미스를 반환하는
함수 앞에 await를 붙이면 해당 프로미스의 상태가 바뀔 때까지 코드가 대기하게 된다. -
프로미스가 성공 또는 실패 상태로 바뀌기 전까지는 다음 연산을 수행하지 않고
아래 사진의 코드와 같이 try/catch를 사용 시 에러를 찾아 예외처리가 가능하다.
