[JavaScript] 비동기적 방식 처리 방법 : Callback, Promise, async/await

자바스크립트에서의 비동기적 구현 방식에는 Callback, Promise, async/await의 3가지를 들 수 있다. 또한, 이러한 비동기 처리 방식을 동기 처리처럼 가능하게 해줄 수 있다.

 

728x90

 

---

 

Callback

다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다. 함수를 등록해놓은 후 어떤 이벤트가 발생하면 호출하는 함수로써, 파라미터로 함수를 전달받아 함수의 내부에서 실행된다. 아래의 예처럼 setTimeout 함수 안에 함수를 전달하여 3초 뒤에 실행되는 모습이다.

setTimeout(function() {
    ...
}, 3000);

 

이를 동기 처리 방식으로 구현하려면, 비동기 함수의 콜백 내부에서 다음 작업(비동기 함수를 호출 등)을 하면 된다. 그런데 이러한 콜백을 이용한 비동기 처리는 아래와 같이 콜백 지옥을 만든다. (콜백 지옥은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상)

setTimeout(() => {
    ...
    setTimeout(() => {
        ...
        setTimeout(() => {
            ...
        }, 0);
    }, 0);
}, 0);

 

Promise

위의 콜백 함수의 에러/예외처리의 어려움, 중첩으로 인한 복잡도 증가(콜백 지옥)라는 단점을 해결하기 위하여 ES6에서 언어적 차원으로 지원한다. Callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 콜백 안에서만 처리를 해야하며 콜백 밖에서는 비동기에서 온 값을 알 수가 없지만, Promise를 사용하면 비동기 처리에서 온 값이 Promise 객체에 저장되기 때문에 코드 작성이 용이해진다. 

 

Promise는 resolve, reject로 성공 혹은 실패 결과 값을 나타내어 다음 작업을 체이닝할 수 있다.

const promise = new
   Promise((resolve, reject) => {
})

promise.then(
    // 비동기 작업 성공 시 호출
).catch(
    // 비동기 작업 실패 시 호출
)

 

아래와 같이 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining)이라 하며, 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다. 이렇게 비동기 코드에 순서를 부여하여, 동기적으로 처리되게 할 수 있다.

promise
    .then(data => {
        return ...
    })
    .then(data => {
        ...
    })
    .catch(e => {
        ...
    })

 

async/await

 Promise의 장황한 코드 단점을 보완하기 위해 ES8에서 도입된 비동기 처리 방식의 가장 최신 문법이다.

async function 함수명() {
    await 비동기처리 메서드()
}

 

await 키워드는 then 메서드 체인을 연결한 것처럼 순서대로 동작하여 비동기 코드에 쉽게 순서를 부여한다. 즉, 비동기 코드를 동기 코드처럼 간결하게 작성할 수 있다.

async function asyncFunc() {
    let data1 = await fetchData1()
    let data2 = await fetchData2(data1)
    let data3 = await fetchData3(data2)
    return data3
}