자바스크립트의 비동기 통신에관한 이해

Callback

기존 비동기 통신을위해서 callback형태의 구문을 사용하였다.

이 형태에는 치명적인 문제가 있었는데, 비동기 코드가 중첩될수록 읽는데 한세월 고치는데 한세월인 코드가 된다는것이었다.

// 여기까진 봐줄만하다
doAsyncRequestAction(param, function(resp) {

});

// 그러나...
doAsyncRequestFirstAction(param, function(resp) {
    doAsyncRequestSecondAction(param, function(resp) {
        doAsyncRequestThirdAction(param, function(resp) {

        });
    });
});

물론 위와 같은 코드도 로직수정과 별도의 함수로 분리하는 리팩토링 과정을 거치면 조금 나아질 수 있다. 하지만 재사용하지도 않을 함수를 굳이 밖으로 빼는 시점에서 기분이 좋지않다.

Promise

그래서 ES6 에서 Promise 라는 문법이 추가되었다.

promise 객체는 크게 세분류의 상태값을 갖는다

• 대기(pending)
• 이행(fullfilled)
• 거부(rejected)

Promise 객체의 처리 프로세스

비동기 처리함수 → resolve 실행 → 이때 reslove 함수의 인자에 처리함수의 결과값이 이동 → then 함수를 통해 결과값 핸들링 및 후속처리

axios.get("/api")
.then(doAsyncRequestSecondAction)
.then(doAsyncRequestThridAction)

• 예외처리가 번거로움, 겉으로 잘 드러나지 않고 이해하기 어려운 객체의 상태
• then의 체이닝으로 보기 좋지 않은 코드

Async / Await

이 단점들을 해결하기위해 ES8 에서 Async / Await 이라는 패턴이 추가되었다.

C# 혹은 Dart 의 그것과 거의 비슷하다고 봐도된다.

const firstResp = await axios.get("/api")
const secondResp = await doAsyncRequestSecondAction(firstResp)
const thirdResp = await doAsyncRequestThirdAction(secondResp)

• 자바와 같이 동기적 코드흐름으로 개발이 가능하고
• 코드가 간결해지고 가독성이 높아진다.
• 일반적인 코드처럼 try / catch로 에러를 핸들링하며 error가 어디서 발생했는지 확인이 쉽다