비동기 처리

비동기 처리에 대한 promise, async, await 등은 늘 가려운 부분이 있었다. 어떤 상황에 대해 어떤식으로 쓰면 작동한다는 것은 알고 있지만 그것이 정확히 어떻게 작동하는지 알지 못했기 때문이다. 늘 정리할 필요를 느끼면서 미뤄두며 틈틈이 문서를 보는것으로 채워왔는데 도움이 되는 글들을 보게되서 스크랩해두고 간단히 정리해 둔다.

• 비동기 처리: 자바스크립트의 특성으로, 기다리지 않는 것이다. 그냥 다음 라인으로 넘어가 실행한다. 그래서 값을 다 가져오지 못해 undefined 등이 출력될 수 있다.
• 콜백: 비동기 처리를 돕기 위해 나타남. 특정 로직이 끝났을 때 원하는 동작을 실행시킨다. 즉, 비동기 처리로 인해 실행라인이 지나갔더라도 해당 로직이 완료되면 그때 다시 그 로직을 통해 하고자 하는 동작을 실행 할 수 있는 것. 그렇지만 이런식으로 콜백을 쌓아가다보면 가독성이 떨어지고, 로직을 변경하기가 어려워지는 문제가 있었다.
• Promise: Promise 는 비동기 처리를 돕기 위한 객체이다.
  — promise state: Pending / Fullfilled / Rejected
  아래 그림 참조.

— promise chaning

getDate(userInfo)
  .then(parseValue)
  .then(auth)
  .then(display)

— promise 에러 처리
1. then 의 두번째 인자로 처리.
getDate().then(handleSuccess, handleError)

2. catch() 이용.
getDate().then().catch()

위의 두 방법 다 promise 의 reject() 메서드가 호출되어 실패 상태가 된 경우에 실행된다.

• async / await
  비동기 처리의 최근의 문법.
  함수 앞에 async 라는 예약어를 붙인다.
  비동기 처리 코드 앞에 await 를 붙인다.
  예외처리를 위해 try / catch 를 사용한다.

async function 함수명() {
    try {
        await 비동기 처리 코드
    } catch(error) {
        console.log(error)
    }
}

참고 링크

자바스크립트 비동기 처리와 콜백 함수

ES6 Promises(1) - the API