[Javascript] 비동기 처리 방법

Javascript는 기본적으로 동기적 처리를 하는 특성을 갖고 있다.

• 동기(Syncronous) : 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식
• 비동기(Asynchronous) : 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식

(사람들이 많이 비동기 처리를 하고 있다고 의식하며 알고 있는데, 사실은 동기적 처리를 진행하고 있고 비동기로 착각하게 되는 이유는 개발자가 Javascript 코딩을 진행하면서 비동기적으로 처리를 진행하고 있기 때문이다.)

 

그렇다면 비동기로 처리하는 방법은 무엇일까?

 

FE 개발자들이 많이 사용하는 방법 2개가 있다.

ES8 이전 버전에서는 Promise, ES8 이후 버전에서는 Async / Await 문법을 사용하여 많이 개발을 진행한다.

 

Promise

Promise의 기본 문법은 아래와 같다.

var fetchApi = new Promise(function(resolve, reject) {
    $.get('API 주소', function(response) {
        if(response.statusCode == 200) {
            resolve(response);
        } else {
            reject("ERROR");
        }
    });
  });
})
 
/**
 * 사용시
 */
fetchApi()
    .then( ... )
    .catch( ... )
    .finally( ... )

Promise 내부에서 resolve는 성공을 의미하고, reject는 실패를 의미한다.

사용할 때 then, catch, finally 3개의 Method를 사용할 수 있다.

• then() : Resolve 발생시 실행이 되는 Method
• catch() : Reject 발생시 실행이 되는 Method
• finally() : 모든 작업이 완료되고 나서 실행이 되는 Method

비동기 작업이 (성공 혹은 실패로) 완료된 후의 결과 값을 받을 수 있다.

결과 값을 돌려받을 수 있기 때문에 이후 처리를 컨트롤 할 수 있게 된다

 

Promise의 상태는 총 3개를 갖고 있다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

즉 then으로 들어오게 되면 Promise의 상태는 Fulfilled가 되는 것이고, catch로 들어오게 되면 Rejected가 되는 것이다.

 

하지만 이 방법은 요즘 들어 많이 쓰이지 않는 방법이다.

(호출해야하는 API가 많으면 많을수록 개행지옥이... 생각해보자. A API가 완료된 다음 B API를 호출하려면, A API가 완료되는 then에 B API를 넣을꺼고.. 그게 많아진다면...)

 

Async / Await

ES8에서 사용할 수 있는 문법이다.

특정 함수 앞에 async 라는 Keyword를 넣어주게 될 경우 해당 함수는 Promise 형식으로 변환되게 된다.

그리고 사용할 때에는 await으로 호출을 해주면 된다.

async function asyncCall() {
    ...
}
 
async function main() {
    await asyncCall();
}

이렇게 사용하면 끝.

엄청나게 간단해졌다.

asyncCall은 Promise를 리턴하게 되어 있으며, main함수에서 asyncCall 함수를 호출할 때 await을 이용해 호출하고 있으니 "asyncCall 내부에서 성공하고 Return이 올 때 까지 기다려" 라는 의미를 내포하고 있다.

 

await Keyword를 사용하기 위해서는 호출하는 함수가 async Keyword가 있어야 한다.

만약 async를 주지 못할 경우 Promise와 똑같이 동작을 하기에 Promise 형식으로 개발을 진행하면 된다.