✏️비동기 작업처리: callback, Promise, async/await 차이점

비동기 작업을 처리할 때 방법으로 callback, Promise, async/await가 있다.

callback

우선 callback은 다른 함수가 실행되고 나서 실행되는 함수로, 매개변수를 변수가 아닌 함수로 받는다. 함수 내부에서 실행된다. 간단한 작업에서는 상관없지만 비동기 작업을 많이할 경우 코드가 복잡해진다.(소위 콜백지옥👿)

대신, Es6에 문법으로 추가된 promise를 사용할 수있다.

Promise

resolve(성공)와 reject(실패)를 파라미터로 받아와야한다
내부에 .catch()를 통해 에러도 잡을수 있다.

const myPromise = new Promise((resolve, reject) => {
	setTimeOut(() => {
    	//resolve('result');
        reject(new Error());
    },1000)
})

myPromise.then(result => {
	console.log(result) // result
}).catch(e => {
	console.error(e);
})

📌 callback과 차이점과 단점?
callback은 중첩된 구조라 코드의 깊이가 깊어지지만 promise는 .then()과 .catch()를 사용해 깊어지지 않고 연달아 작성 가능하다. 비교적 난잡하지 않다.
하지만, 에러를 잡을때 어떤 부분에서인지 파악하기 어렵고, 특정 조건에 따라 분기를 나누기 번거롭다. 또, 특정값을 공유해가면서 작업을 연달아하기 번거롭다고 한다.

async/await

위 단점을 보완한 async/await을 사용한다.
Es8에 추가된 문법이다.

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

async function process(){
	console.log('시작');
    await sleep(1000);
    console.log('인사');
}

process();

실행할 함수 앞에 async, 실행할 promise 앞에 await를 붙여주면 된다.
위 promise 코드처럼 .then()로 넘어가지 않고 함수내부에서 promise를 기다려서 분기점을 나누기 용이하다. 하지만 .catch()같이 에러를 핸들링하지 못해 error를 함수로 던저 try-catch구조로 잡아야한다.

function sleep(ms) {
	return new Promise(resolve => setTimeout(resolve,ms));
}
async function makeError() {
	await sleep(1000);
    cont err = new Error();
    throw error; // 에러 던지기
}
async function process() {
	try {
    	await makeError();
    } catch (e) {
    	console.error(e)
    }
}

process();

+추가로,

여러개 promise 동시에 처리할 수 있는,
Promise.all()
배열에 프로미스들을 등록해주고 Promise.all로 감싸 실행한다.
단, 셋중에 하나라도 에러가 발생하면 전체 에러로 나타난다.

promise.race()
방법은 동일하지만, 등록한 프로미스 중에 가장 빨리 실행되는것 만 나타나게할 때 사용한다.
단, 가장 빨리 끝난게 에러가 나면 에러지만 나머지에서 에러나면 에러로 간주하지 않는다.

---

참고 : 패스트캠퍼스 강의 참고(벨로퍼트와 함께 하는 모던 자바스크립트 : 자바스크립트에서 비동기 처리 다루기 - 김민준 강사)