JS async & await

async와 await도 생활코딩 유튜브로 배웠다. 정말 그는 신인가..

---

생활코딩 유튜브 강의: https://www.youtube.com/watch?v=1z5bU-CTVsQ&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI&index=3

 

async & await는 js2017에 추가된 문법이다.

 

js에서는 비동기가 사용되는데, 비동기 함수 호출 후 또 다른 작업을 한다면 비동기 작업이 진행되는 중에 다음 작업이 진행될 수 있다.

이것은 장점과 단점이 있다. 장점으로는 언제 끝날지 모르고 다음 작업과 상관 없는 작업이라면 비동기 함수로 작업을 하는 것이 장점이 된다.

하지만 단점. 작업이 끝난 후 리턴값을 이용하여 후 작업을 해야 한다면 동기적으로 작동시키고 싶을 것이다. 파일 입출력 같은 경우에는 동기적으로도 비동기적으로도 작동시킬 수 있는 함수가 모두 존재하지만, axios같은 모듈처럼 애초에 비동기적으로만 작동하고 동기적으로 작동하는 것을 지원하지 않는다면? 골치가 아파진다.

 

이것의 해결 방법으로 첫번째는 콜백 함수 안에 작업 넣기이다. timerr라는 비동기 함수가 있다고 하자.

timerr(1000, function(){
    console.log('작업');
    timerr(1000, function(){
        console.log('작업');
        timerr(1000, function(){
            console.log('작업');
        })
    })
})

하지만 이것은 좋은 해결 방법이 아닌듯 하다. 보기에도 안좋을 뿐더러 코드가 어떤 식으로 되어 있는지 굉장히 헷갈리게 된다.

해결방법 두번째는 해당 비동기 함수가 promise를 반환한다고 가정하에 promise chaining을 하는 것이다.

timerr(1000)
.then(function(){
    console.log('작업');
    return timer(1000);
})
.then(function(){
    console.log('작업');
    return timer(1000);
})

해결방법 세번째는 async와 await를 사용하는 것이다.

function timerr(time){
    return new Promise(function(resolve){
        setTimeout(function(){
            resolve(time);
        }, time);
    })
}

async function run(){
    await timerr(1000);
    console.log(1);
    await timerr(1000);
    console.log(2);
    await timerr(1000);
    console.log(3);
}
run();

async와 await를 사용하면 흐름이 동기적으로 되는 것이 장점이다.

async를 붙인 함수는 promise취급을 받게 되어 .then()함수를 사용할 수 있다.

또한 앞에 await를 사용해 또다른 async함수 내부에서 사용할 수 있다.

---

예제

전 글에서 Promise를 만드는 방법을 이용한 것을 async & await를 이용한 것으로 바꾸어 보자.

function job1() {
	return new Promise(function (resolve, reject) {
		setTimeout(function () {
			resolve("job1 ok!");
		}, 2000);
	});
}
function job2() {
	return new Promise(function (resolve, reject) {
		setTimeout(function () {
			resolve("job2 ok!");
		}, 2000);
	});
}
job1().then(function (data) {
	console.log("data1", data);
	return job2();
})
.then(function(data) {
	console.log("data2", data)
})

이것은 promise만을 사용하여 만든 코드이다.

function job1() {
	//생략
}
function job2() {
	//생략
}
async function run(){
	let data = await job1();
	console.log("data1", data);
	data = await job2();
	console.log("data2", data);
}
run();

nodejs로 구동한다면 두 코드 모두 동일하게 작동하는 것을 볼 수 있다.