비동기 프로그래밍 - Callback, Promise, async/await

비동기 프로그래밍?

Javascript는 싱글 스레드로 동작하기 때문에 한 번에 하나의 작업만 실행할 수 있다. 하지만, Call Stack, Web API, Event Loop, Callback Queue와 함께 동작하여 비동기 프로그래밍이 가능하다.

 

 

Call Stack

자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조로 실행 중인 함수들이 쌓인다.

 

Web API

브라우저에서 제공하는 API로 Call Stack에 있는 비동기 작업들을 위임받아 멀티 스레드로 처리한다.

 

Callback Queue

Web API의 비동기 작업이 완료되고 실행을 대기하는 함수가 쌓인다.

 

Event Loop

Call Stack이 비어있는 경우 Callback Queue에서 대기중인 함수를 Call Stack으로 옮겨 실행해준다.

 

Callback 함수

콜백 함수를 사용하여 비동기 프로그래밍이 가능하다.

function func(callback) {
    setTimeout(function () {
    	callback("응답");
    }, 2000);
}

func(function (data) {
    console.log(data);
});

 

하지만 중첩될 경우 콜백 지옥(Callback Hell)이 발생하여 가독성이 떨어지고, 관리하기 어려워진다.

func1(function (arg1) {
    func2(function (arg2) {
        func3(function (arg3) {
            func4(function (arg4) {
                func5(function (arg5) {
                    func6(function (arg6) {
                        ...
                    });
                });
            });
        });
    });
});

 

Promise

ES6에 도입된 기술로 콜백 함수의 단점을 보완하기 위한 기술이다. Promise는 총 3개의 상태를 갖는다. 

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

비동기 작업 이후 Fulfilled, Rejected 상태에 따라 then()과 catch()를 이용해 작업을 처리할 수 있다.

function func() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("응답");
        }, 2000);
    });
}

func()
    .then(function (data) {
    	console.log(data); // "응답"
    }).catch(function (error) {
    	console.error("에러:", error);
    });

 

Promise.all / Promise.race

비동기 작업을 병렬로 실행할 수 있도록 도와주는 메서드들이다.

Promise.all

모든 비동기 작업을 병렬로 실행하여 한 번에 결과를 반환한다. 하나라도 실패하면 전체가 실패한다.

const func1 = new Promise(function (resolve) {
	setTimeout(function () {
		resolve("응답1");
	}, 3000);
});
const func2 = new Promise(function (resolve) {
	setTimeout(function () {
		resolve("응답2");
	}, 2000);
});

Promise.all([func1, func2])
    .then(function (results) {
    	console.log(results); // ["응답1", "응답2"]
    });

Promise.race

가장 먼저 완료된 프로미스의 결과를 반환한다.

const func1 = new Promise(function (resolve) {
	setTimeout(function () {
		resolve("응답1");
	}, 3000);
});
const func2 = new Promise(function (resolve) {
	setTimeout(function () {
		resolve("응답2");
	}, 2000);
});

Promise.race([func1, func2])
    .then(function (result) {
    	console.log(result); // "응답2"
    });

async/await

ES7에 도입 된 기술로 Promise 또한 체이닝이 많아질 수록 콜백 함수와 마찬가지로 Promise hell이 발생하여 async/await문법이 추가되었다. async 키워드가 붙은 함수는 비동기 함수를 의미하며 Promise를 반환하고, await 키워드와 함께 비동기 함수 호출 시 비동기 함수가 완료될 때까지 기다린다.

async function func() {
    return new Promise(function (resolve) {
        setTimeout(function () {
            resolve("응답");
        }, 2000);
    });
}

async function wait() {
    const data = await func();
    console.log(data);
}

wait();