비동기적 처리 다루기 - Promise, async, await, Promise all, race

비동기적 처리는 동기와 다르게 작업의 순서를 정확히 파악하기 어려움. 또한 비동기적 처리의 반환되는 값에 관하여 이어지는 이벤트와 함수를 연결한다고 하면 callback함수를 많이 활용하게 되어 가독성이 떨어지고 에러 컨트롤이나 조건에 따른 분기를 설정하기 어려운 부분이 있음.

Promise는 resolve와 reject를 통해 분기를 나누고, Promise객체를 리턴함으로써 비동기처리를 콜백에 비해 간결하게 처리할 수 있음. 아래는 setTimeout을 이용한 비동기 처리에 대한 promise 예시.

increaseAndPrint: (parameter) => {
        return new Promise(async (resolve, reject) => {
        	setTimeout(() => {
            	const value = n + 1;
                if (value === 5) {
                	const error = new Error();
                    error.name = "ValueIsFiveError";
                    reject(error);
                    return;
                }
                console.log(value);
                resolve(value);
            }, 1000);
        });
    }
    
    increaseAndPrint(0).then(increaseAndPrint)
    .then(increaseAndPrint)
    .then(increaseAndPrint)
    .then(increaseAndPrint)
    .catch(e => {
    	console.error(e);
    })

callback 대신 Promise then을 통해 코드를 간결화할 수 있고, then에서 이어지는 함수를 호출할 수 있음. 

또한 async await를 통해 함수 호출의 순서를 정할 수 있음(동기와 비슷하게 처리 가능)

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function makeError() {
    await sleep(1000);
    const error = new Error();
    throw error;
}


async function process() {
    console.log('안녕하세요!');
    await sleep(2000);
    console.log('반갑습니다!');

    try {
        await makeError();
    } catch (e) {
        console.error(e);
    }
}

process();

위와 같은 코드에서 async await을 쓰지 않으면 process()를 호출할 경우 안녕하세요-반갑습니다 다음에 바로 에러가 나타남. 그러나 async await를 사용하면 안녕하세요 - 2초 기다림 - 반갑습니다 뒤에 makeError함수를 호출하게 됨. 

만약 어떤 함수에서 실행시간이 서로 다른 3개의 async await 함수를 호출한다고 했을때 세 개의 함수의 결과값을 모두 반환받은뒤에 다음 작업이 진행되길 바랄때는 Promise.all() 안에 배열로 함수를 넣어주면 됨. 비할당구조로 Promise객체에 대한 변수를 선언할경우 표현도 쉬움. all은 모든 함수의 반환값이 에러가 없을 때 결과값을 리턴하고, 하나라도 이상이있으면 에러를 리턴. race는 가장 먼저 실행된 함수가 에러가 없을때만 결과를 리턴함(제일 먼저 실행되는 것이 에러가 나면 멈춤)