콜백함수, Promise, async/await

예제 1)

function printMe(){
	console.log('Hello world!')
}

setTimeout(printme, 3000);
console.log('대기중~');


------------------------------
대기중~
Hello world!

 

setTimeout이 사용되는 시점에서 코드가 3초동안 멈추는 것이 아니라, 위에서 아래로 코드가 다 호출되고 3초 뒤에 printMe가 호출된다. js에서 비동기 작업을 사용할 때 가장 흔히 사용하는 방법으로 setTimeout 함수의 인자로 전달하고 있는 printMe 함수 자체를 콜백함수라고 한다.

 

예제 2 )

number 값이 주어지면 1초 뒤에 10을 더한 값을 반환하는 함수가 있다.

function increase(number, callback){
	setTimeout(() => {
    	const result = number + 10;
        if (callback) {
        	callback(result);
        }
    }, 1000)
}

increase(0, result =>{
	console.log(result);
	}
});

만약 여러번 순차적 처리를 하고싶다면?

function increase(number, callback){
	setTimeout(() => {
    	const result = number + 10;
        if (callback) {
        	callback(result);
        }
    }, 1000)
}

increase(0, result => {
    console.log(result);
    increase(0, result => {
        console.log(result);
        increase(0, result => {
            console.log(result);
            increase(0, result => {
            	console.log(result);
        	});    
        });    
    });
});

콜백 안에 콜백을 넣어서 구현하면 콜백 지옥에 갇히게 된다. 이를 형성하지 않기 위해 Es6에 Promise 기능이 도입되었다.

function increase(number, callback){
	const promies = new Promise((resolve, reject) => {
    	setTimeout(() => {
        	const result = number + 10;
            if (result > 50){
            	const e = new Error('NumberTooBig');
                return reject(e);
            }
            resolve(result);        
        }, 1000);
    });
}

increase(0)
  .then(number => {
  	console.log(number);
    return increase(number);
  })
  .then(number => {
  	console.log(number);
    return increase(number);
  })
  .then(number => {
  	console.log(number);
    return increase(number);
  })
  .then(number => {
  	console.log(number);
    return increase(number);
  })
  .catch(e => {
  	console.log(e);
  }
});

then을 사용하여 그 다음 작업을 설정한다. ES8 문법인 async/await는 Promise를 더 쉽게 사용할 수 있다. 함수의 앞부분에 async를 추가하고, 해당 함수 내부에서 Promise의 앞부분에 await를 사용한다. 이렇게 하면 Promise가 끝날 때까지 기다리고, 결과 값을 특정 변수에 담을 수 있다.

function increase(number){
	conts promise = new Promise((resolve, reject) => {
    	setTimeout(() => {
        	const result = number + 10;
            if(result > 50) {
            	const e = new Error('NumberTooBig');
                return reject(e);
            }
            resolve(result);
        }, 1000)
    });
    return promise;
}

async function runTasks(){
	try {
    	let result = await increase(0);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
        result = await increase(result);
        console.log(result);
    }catch(e){
    	console.log(e);
    }
}